角传单“路径”中的多个多边形答案

【问题标题】：Multiple polygons in angular leaflet "paths"角传单“路径”中的多个多边形
【发布时间】：2015-04-10 13:14:08
【问题描述】：

我正在尝试使用角度传单在我的 OSM 地图中显示多条路径。路径类型，如多个圆形和多边形。对于圆圈，以下代码：

angular.forEach($scope.alertcircles, function(obj, key){
            var arraylen = obj.g_pos_circle.coordinates[0].length;
            console.log(obj.id);
             $scope.paths['circle' + obj.id] = {
                    circle: {
                        color: '#FF0000',
                        opacity: 0.5,
                        stroke: false,
                        fillColor: '#ff69b4',
                        fillOpacity: 0.5,
                        weight: 8,
                        radius: 6,
                        latlngs: [],
                        type: 'circle',
                        clickable: true,
                        heading: 240
                    } 
                }; 
            for(i=0; i<obj.g_pos_circle.coordinates[0].length;i++){
                var coord = obj.g_pos_circle.coordinates[0][i];
                angular.extend($scope.paths ['circle' + obj.id] .circle.latlngs.push({
                    lat: parseFloat(coord[1]),
                    lng: parseFloat(coord[0])
                }))
            }
            $scope.paths['circle' + obj.id].circle.radius = obj.g_pos_radius
        });

对于多边形

angular.forEach($scope.alertareas, function(obj, key){
            var arraylen = obj.g_pos_poly.coordinates[0].length;
            console.log(obj.id);
             $scope.paths['area' + obj.id] = {
                    area: {
                        color: '#FF0000',
                        opacity: 0.5,
                        stroke: false,
                        fillColor: '#ff69b4',
                        fillOpacity: 0.5,
                        weight: 0,
                        latlngs: [],
                        type: 'polygon',
                        clickable: true,
                        heading: 240
                    }
                }; 
            for(i=0; i<obj.g_pos_poly.coordinates[0].length-1; i++){
                var coord = obj.g_pos_poly.coordinates[0][i];   
                angular.extend($scope.paths ['area' + obj.id ] .area.latlngs.push({
                    lat: parseFloat(coord[1]),
                    lng: parseFloat(coord[0])
                }))
            }
        });

我无法在地图中看到任何形状。我以前有一个像下面这样的设置，但问题是所有形状都是连接的，因为不同形状之间没有区别

$scope.paths = {
        area: {
            color: '#FF0000',
            opacity: 0.5,
            stroke: false,
            fillColor: '#ff69b4',
            fillOpacity: 0.5,
            weight: 0,
            latlngs: [],
            type: 'polygon',
            clickable: true,
            heading: 240
        },
        circle: {
            color: '#FF0000',
            opacity: 0.5,
            stroke: false,
            fillColor: '#ff69b4',
            fillOpacity: 0.5,
            weight: 8,
            radius: 6,
            latlngs: [],
            type: 'circle',
            clickable: true,
            heading: 240
        } 
    };

     What approach do I have to follow to show individual shapes correctly. Any help is greatly appreciated.

【问题讨论】：

标签： angularjs angular-leaflet-directive

【解决方案1】：

我遇到了同样的问题，原因是包含样式的css

svg{
width: 100%;
height: 100%;
}

修正

 .angular-leaflet-map svg{
   width: initial;
   height: initial;
 }

解决问题

【讨论】：