单张与标记和线 [英] Leaflet with markers and line

问题描述

我正在使用带有geojson的leafletjs，但是我无法同时使用标记绘制多段线，因此我的解决方案是先绘制一条多段线，然后添加标记. 我认为这不是一个好方法，所以还有其他解决方案吗?

I'm using leafletjs with geojson, but i can't draw a polyline with the markers at the same time, so my solution is draw first a polyline then add the markers. I don't think it's a good ways, so is there any other solution?

有我的密码

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());
}

非常感谢

推荐答案

您真的不需要在运行时首先构建GeoJSON对象就可以在Leaflet地图上显示某些内容.

You really do not need to build a GeoJSON object first at runtime in order to display something on your Leaflet map.

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

Simply loop through your coordinates and build a marker at each pair.

然后在坐标数组之外构建一条折线.

Then build a polyline out of the coordinates array.

您将需要在此过程中还原坐标，因为它们被记录为经度/纬度(符合GeoJSON格式)，而Leaflet在直接构建标记和折线时会期望纬度/经度(而不是使用L.geoJSON工厂)

You will need to revert your coordinates in the process, since they are recorded as Longitude / Latitude (compliant with GeoJSON format), whereas Leaflet expects Latitude / Longitude when directly building Markers and Polylines (instead of using L.geoJSON factory).

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>

这篇关于单张与标记和线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！