leaflet实现动态线段

在这里插入图片描述

一、引用Leaflet脚本样式,和Leaflet Ant Path 插件

Leaflet:https://leafletjs.com/download.html
Leaflet Ant Path:https://github.com/rubenspgcavalcante/leaflet-ant-path

<link href="~/Scripts/leafletjs/1.4.0/leaflet.css" rel="stylesheet" />
<script src="~/Scripts/leafletjs/1.4.0/leaflet.js"></script>
<script src="~/Scripts/leafletjs/1.4.0/leaflet-ant-path.js"></script>

二、地图初始化

 /**
       * 地图初始化
       */
        function mapInit() {
            var amapNormalUrl = '/api/Map/GetMap?type=783085212&zoom={z}&x={x}&y={y}';
            var amapNormalLayer = new L.TileLayer(amapNormalUrl, {
                minZoom: 1,
                maxZoom: 18,
                attribution: ''
            });

            var mapCenter = new L.LatLng(****,****);
            gMap = new L.Map('MapContainer', {
                center: mapCenter,
                zoom: 16,
                minZoom: 1,
                maxZoom: 18,
                layers: [amapNormalLayer]
            });
        }

三、画线

//清楚上一次画的线段
if (gPath) {
                gMap.removeLayer(gPath);
            }
var longLatList =[[****,****],[*****,****]];//经纬度数组
                        var antPath = L.polyline.antPath;
                        gPath = antPath(longLatList, {
                            "paused": false,     //暂停  初始化状态
                            "reverse": false,  //方向反转
                            "delay": 3000,    //延迟,数值越大效果越缓慢
                            "dashArray": [10, 20], //间隔样式
                            "weight": 3,    //线宽
                            "opacity": 0.5,  //透明度
                            //"color": "#0000FF", //颜色
                            //"pulseColor": "#FFFFFF"  //块颜色
                        });
                        gPath.addTo(gMap); 

                        // 缩放地图到折线所在区域
                        gMap.fitBounds(gPath.getBounds());
                        

有想换工作的同学可以找我内推哦不低于15k(前端,java,测试)

在这里插入图片描述

你可以使用Leaflet.draw插件来实现动态绘制多边形,并且可以使用双击事件来闭合多边形。下面是一个基本的实现示例: 1. 首先,在页面中引入LeafletLeaflet.draw插件的JS和CSS文件: ```html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script> ``` 2. 创建一个Leaflet地图: ```javascript var map = L.map('map').setView([51.505, -0.09], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors', maxZoom: 18 }).addTo(map); ``` 3. 添加绘图控件: ```javascript var drawnItems = new L.FeatureGroup(); map.addLayer(drawnItems); var drawControl = new L.Control.Draw({ edit: { featureGroup: drawnItems }, draw: { polygon: true, polyline: false, rectangle: false, circle: false, marker: false } }); map.addControl(drawControl); ``` 4. 监听多边形绘制完成事件,并添加双击事件来闭合多边形: ```javascript map.on('draw:created', function(e) { var layer = e.layer; layer.on('dblclick', function() { if (layer instanceof L.Polygon) { layer.addLatLng(layer.getLatLngs()[0]); } }); drawnItems.addLayer(layer); }); ``` 这样,当用户完成绘制多边形后,双击多边形的任意一个点就可以将多边形闭合了。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值