【问题标题】:Leaflet draw polygon on load map传单在负载图上绘制多边形
【发布时间】:2019-11-08 02:44:40
【问题描述】:

我有这个多边形坐标

let polygon = [
    [
        51.40545845031738,
        35.706447104954194
    ],
    [
        51.390438079833984,
        35.70568044469603
    ],
    [
        51.38288497924805,
        35.69689817401091
    ]
]

我想在地图加载时绘制多边形。也可编辑。

换句话说

地图加载后如何在地图上显示可编辑的多边形。

【问题讨论】:

标签: javascript leaflet polygon leaflet-draw


【解决方案1】:

以这种方式为我解决了

let polygon = [
    [
        51.40545845031738,
        35.706447104954194
    ],
    [
        51.390438079833984,
        35.70568044469603
    ],
    [
        51.38288497924805,
        35.69689817401091
    ]
];

let geojson = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {},
        "geometry": {
            "type": "Polygon",
            "coordinates": []
        }
    }]
};
let arr = [];
polygon.forEach(function (item, index) {
    arr.push([item[1], item[0]]);
});
geojson.features[0].geometry.coordinates.push(arr);

var drawnItems = new L.FeatureGroup();
var geoJsonGroup = L.geoJson(geojson).addTo(map);
addNonGroupLayers(geoJsonGroup, drawnItems);

// Would benefit from https://github.com/Leaflet/Leaflet/issues/4461
function addNonGroupLayers(sourceLayer, targetGroup) {
    if (sourceLayer instanceof L.LayerGroup) {
        sourceLayer.eachLayer(function (layer) {
            addNonGroupLayers(layer, targetGroup);
        });
    } else {
        targetGroup.addLayer(sourceLayer);
    }
}

【讨论】:

  • 您的arr 数组不只是成为您polygon 数组的副本吗?执行forEach / push 循环似乎是一个多余的步骤。
  • 我正在使用 Angular 8!已实现“github.com/Asymmetrik/ngx-leaflet-draw”。一切正常。我可以绘制多边形,但是当我重新加载页面时,我希望从 localStorage 加载该多边形(上次创建的)。
  • 我正在尝试从组件(ts 文件)加载多边形。我可以稍后对 localStorage 进行排序。我正在绘制多边形并通过从组件中对它们进行安慰来获取值(Lat long)。我想通过 ngOnInit() 或 LeafletMapReady 从组件中给出值,并且应该在初始加载时绘制多边形。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-10-01
  • 2016-04-18
  • 1970-01-01
  • 2013-12-10
  • 1970-01-01
相关资源
最近更新 更多