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

最新推荐文章于 2024-05-08 00:00:00 发布

u010036331

最新推荐文章于 2024-05-08 00:00:00 发布

阅读量1.3k

点赞数

分类专栏： leaflet 文章标签： js

本文链接：https://blog.csdn.net/u010036331/article/details/115212251

版权

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

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

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

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({