角度小叶中的多个多边形"路径"

时间:2015-04-10 13:14:09

标签: angularjs angular-leaflet-directive

我试图使用角度传单在我的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.

0 个答案:

没有答案