Leaflet学习之路二——在地图上绘制要素(点、线、多边形)

  • 添加注记
  • 绘制点
  • 绘制线
  • 绘制多边形
  • 绘制弹出框
    首先,我们有一个地图
 L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?
 access_token={accessToken}', {
            maxZoom: 18,
            id: 'mapbox.streets',
            accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNp
            ejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
            attribution: 'Map data &copy; <a href="http://openstreet
            map.org">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0
            /">CC-BY-SA</a>, ' +'Imagery © <a href="http://mapbox.com">
            Mapbox</a>'
            }).addTo(m);
            

1.添加注记

下面是批量添加注记的代码,要是你看了还不会添加单个注记请恕在下无能为力了

var markers=[[51.505,-0.09],[52,-1],[51,-0.05]]
for (i=0;i<markers.length;i++){
    L.marker(markers[i]).addTo(m)
}

2.绘制点

在leafletAPI中没有找到绘制点的函数,但是有绘制圆的,点不就是小一点的圆吗

 L.circle([51.3,-0.06],{color:'#FF0000',fillColor:'#FF0000',radius:1000,fillOpacity:1}).addTo(m)
  • radius设置点的大小;
  • 如果用用该方法绘制一个点,有两个地方需要注意:
    (1) fillColor和Color需要一致,否则看起来是一个环。或着设置weight属性为0 。
    (2) fillOpacity指填充色的透明度,必须设为1。我没有研究color有没有透明度,如果有,把两个值设相同也行。

3.绘制线

var latlngs =[[51.505,-0.09],[52,-1],[51,-0.05]]
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(m);

如果要批量绘线,请用三维数组,其它的都一样。

4.绘制多边形

var latlngs = [[51.505,-0.09],[52,-1],[51,-0.05],[51.3,-0.06]]
var polygon = L.polygon(latlngs, {color: '#000eff',fillColor:'#0000ed',
              weight:1}).addTo(m);

5.绘制弹出框

 var popup = L.popup()
            .setLatLng([51.505, -0.19])
            .setContent('<p>Hello world!<br />This is a nice popup.</p>')
            .openOn(m);

或着对绘制好的图形绑定弹出框,在点击这个图形后会弹出你想要你内容

polygon.bindPopup("我是个多边形")

效果如下 :
这里写图片描述
如何动态绘制这些图形,请看Leaflet学习之路五——动态绘制图形(点、线、圆、多边形)

要在 Leaflet 中实现动态绘制多边形并且在绘制完成后双击多边形末尾闭合多边形,你可以使用 Leaflet.draw 插件。这个插件可以让你很方便地添加编辑工具栏,支持绘制多种几何图形,包括多边形线条和圆形等。在绘制多边形时,你可以通过设置 `allowIntersection` 选项来控制多边形是否允许交叉。同时,你可以添加一个事件监听器,当用户双击多边形时触发闭合操作。 以下是一个示例代码,你可以将其添加到你的 Leaflet 应用程序中: ``` // 定义绘制控件 var drawControl = new L.Control.Draw({ edit: { featureGroup: drawnItems }, draw: { polyline: false, circle: false, marker: false, polygon: { allowIntersection: false, showArea: true } } }); // 添加绘制控件到地图上 map.addControl(drawControl); // 定义多边形绘制完成事件 map.on(L.Draw.Event.CREATED, function(event) { var layer = event.layer; drawnItems.addLayer(layer); }); // 定义多边形双击事件 map.on('dblclick', function(event) { var layer = event.target; if (layer instanceof L.Polygon) { var latlngs = layer.getLatLngs(); var lastPoint = latlngs[0][latlngs[0].length - 1]; if (event.latlng.equals(lastPoint)) { layer.closePopup(); layer.closeTooltip(); layer._latlngs.push(layer._latlngs[0]); layer.redraw(); } } }); ``` 在这个例子中,`drawnItems` 是一个 `L.FeatureGroup` 对象,用于存储绘制多边形。当用户完成绘制一个多边形时,会触发 `L.Draw.Event.CREATED` 事件,你可以在这个事件处理程序中将多边形添加到 `drawnItems` 中。当用户双击一个多边形时,会触发 `dblclick` 事件,你可以在这个事件处理程序中将多边形闭合。注意,这里我们要判断双击事件的位置是否等于多边形的末尾,只有在这种情况下才会闭合多边形
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

裘千仞不会水上漂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值