带有标记和线条的传单

Question

我将leafletjs 与geojson 一起使用，但我无法同时使用标记绘制折线，因此我的解决方案是先绘制折线然后添加标记。 我认为这不是一个好方法，那么还有其他解决方案吗？

这是我的代码

function DrawLine(mymap,topo){

var line={
     "type": "Feature",
     "geometry": {
         "type": "LineString",
         "coordinates" : topo.pointsForJson 
         // topo.pointsForJson is my data source like : [[5.58611,43.296665], [5.614466,43.190604], [5.565922,43.254726], [5.376992,43.302967]]
     },
     "properties": {
         "ID": topo['OMS_IDTOPO'],
         "color" : "blue"
     }
 };

var points=[];
for(var i in topo.pointsForJson){
    var point = {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates" : topo.pointsForJson[i]
        }

    };
    points.push(point);
}
//add markers
L.geoJSON(points).addTo(mymap);
// add polyline
 var polyline = L.geoJSON(line,{
     style:function (feature) {
         return {color: feature.properties.color}
     }
 }).bindPopup(function (layer) {
     return layer.feature.properties.ID;
 }).addTo(mymap);

 mymap.fitBounds(polyline.getBounds());
}

非常感谢

Answer 1

您确实不需要在运行时首先构建 GeoJSON 对象才能在 Leaflet 地图上显示某些内容。

只需遍历您的坐标并在每一对上建立一个标记。

然后从坐标数组中构建一条折线。

您需要在此过程中恢复您的坐标，因为它们被记录为经度/纬度（符合 GeoJSON 格式），而 Leaflet 在直接构建标记和折线时需要纬度/经度（而不是使用 L.geoJSON 工厂） .

var pointsForJson = [
  [5.58611, 43.296665],
  [5.614466, 43.190604],
  [5.565922, 43.254726],
  [5.376992, 43.302967]
];

var map = L.map('map');

pointsForJson.forEach(function(lngLat) {
  L.marker(lngLatToLatLng(lngLat)).addTo(map);
});

var polyline = L.polyline(lngLatArrayToLatLng(pointsForJson)).addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

map.fitBounds(polyline.getBounds());

function lngLatArrayToLatLng(lngLatArray) {
  return lngLatArray.map(lngLatToLatLng);
}

function lngLatToLatLng(lngLat) {
  return [lngLat[1], lngLat[0]];
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script>

<div id="map" style="height: 200px"></div>