使用leaflet地图划线，加marker标记点移动

83 阅读 0 评论 55 点赞

我是靠谱客的博主天真小天鹅，这篇文章主要介绍使用leaflet地图划线，加marker标记点移动，现在分享给大家，希望可以做个参考。

使用到的插件： leaflet.polylineDecorator.js MovingMarker.js leaflet.js

地图画一条虚线代码如下
显示地图

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
var map, url = host + "/iserver/services/map-world/rest/maps/世界地图_Gray";
map = L.map('map', {
crs: L.CRS.EPSG4326,
center: [21.631799,113.752183],
maxZoom: 20,
zoom: 5
});
L.supermap.tiledMapLayer(url).addTo(map);
//画虚线
var pathPattern = L.polylineDecorator(
[ [ x,y ], [
39.916527,116.397128 ] ],
{
patterns: [
{ offset: 0, repeat: 10, symbol: L.Symbol.dash({pixelSize: 5, pathOptions: {color: '#000', weight: 1, opacity: 0.2}}) },
{ offset: '16%', repeat: '100%', symbol: L.Symbol.marker({rotate: true, markerOptions: {
icon: L.icon({