leaflet - 在折线上创建缓冲区 - 传单

Question

我正在尝试在我的地图上实现类似于Leaflet.buffer的缓冲区。然而，Leaflet.buffer 似乎只适用于 Leaflet.Draw。

我正在使用Leaflet Editable来绘制我的图层，并且我有一条要添加缓冲区的折线。但是，我找不到任何可以完成这项工作的插件。

我知道我可以使用Turf @buffer 创建一个缓冲区：

let lineString = turf.lineString(coordArr);
let bufferedLine = turf.buffer(lineString, 0.5, {units: 'miles'});

但我希望它类似于Leaflet.buffer以便您可以在地图上滑动缓冲区。（更人性化）

有没有办法通过将Turf.js与Leaflet.Editable一起使用来实现这一点？

标签： leafletbufferpolylineturfjsleaflet-editable

Answer 1

你可以使用 Turf.js 的缓冲模块来做到这一点。您在折线周围创建一个缓冲区，并在传单地图上绘制生成的 geojson。这是一个工作示例。

var center = [37.78791180770003, -122.40962505340575];

var map = L.map('map').setView(center, 14);;

L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
  }).addTo(map);


var line = {
  "type": "Feature",
  "properties": {
    "color": "blue"
  },
  "geometry": {
    "type": "LineString",
    "coordinates": [
      [-122.40447521209718,
        37.79367718768535
      ],
      [-122.40803718566895,
        37.79171022624846
      ],
      [-122.40769386291502,
        37.79096412372944
      ],
      [-122.40662097930908,
        37.789641468930114
      ],
      [-122.40941047668457,
        37.789675383451495
      ],
      [-122.40992546081543,
        37.78875968591083
      ],
      [-122.40962505340575,
        37.78791180770003
      ]
    ]
  }
};



L.geoJSON(line, {
  style: function(feature) {
    return {
      color: feature.properties.color
    };
  }
}).addTo(map);

var polygon = turf.buffer(line, 0.5, {
  units: 'miles'
});

L.geoJSON(polygon, {
  style: function(feature) {
    return {
      color: feature.properties.color
    };
  }
}).addTo(map);

#map {
  height: 300px;
}

<script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<div id="map"></div>