0

angularリーフレットを使用して、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.
4

1 に答える 1

0

私は同じ問題を抱えていましたが、その理由はスタイル付きのcssに含まれていました

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

修正

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

問題を解決する

于 2015-04-29T21:10:06.290 に答える