摸鱼也无聊了！写写最近项目demo。不怎么会写，词穷，直接上代码。

注：以下代码和示例图和项目无关

为什么选择leaflet

1. 开源&&轻量级
2. 插件丰富
3. 适用移动端

用到相关leaflet插件

1. leaflet.chinatmsproviders
2. leaflet-ant-path

页面截图

上代码

<template>
    <div id="map"></div>
</template>

<script>
import L from 'leaflet';
import 'leaflet.chinatmsproviders'; // 插件可加载各种地图（如：智图地图，谷歌地图，高德地图等包含卫星地图）
import 'leaflet-ant-path'; //动态线条插件
import 'leaflet/dist/leaflet.css';

export default {
    name: "leafletMap",
    data() {
        return {
            map:null,
            feiLineGroupLayer: L.layerGroup([]),
            feiMakerGroupLayer: L.layerGroup([]),
        }
    },
    
    mounted() {
        this.initmap();
    },
    methods: {
        // 初始化地图
        initmap(){
            this.map =  L.map('map', {
                attributionControl: false,
                closePopupOnClick: false,
                maxZoom: 13,
                noWrap: false,
                minZoom: 3,
                worldCopyJump: true,
            }); // 初始化地图
            L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue').addTo(this.map); // 用插件设置地图风格午夜蓝
            this.map.setView([24,106], 3); // 定位居中
            
            // 加个三角形
            let multipolygon =new L.Polygon([
            [[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
            ] , {
                color:'rgba(0,0,255,.7)', weight:1,
            });
            multipolygon.addTo(this.map); 

            // 整个国家描边，坐标越多描得越精准（如果你不怕卡）
            let style = {
                "color": "#ffffff", //边框颜色
                "weight": 1, //边框粗细
                "opacity": 0.4, //透明度
                "fillColor": 'red', //区域填充颜色
                "fillOpacity": .4, //区域填充颜色的透明
            };

            let testGeo = {"type":"Feature","id":"THA","properties":{"zhName":"泰国","name":"Thailand"},"geometry":{"type":"Polygon","coordinates":[[[102.584932,12.186595],[101.687158,12.64574],[100.83181,12.627085],[100.978467,13.412722],[100.097797,13.406856],[100.018733,12.307001],[99.478921,10.846367],[99.153772,9.963061],[99.222399,9.239255],[99.873832,9.207862],[100.279647,8.295153],[100.459274,7.429573],[101.017328,6.856869],[101.623079,6.740622],[102.141187,6.221636],[101.814282,5.810808],[101.154219,5.691384],[101.075516,6.204867],[100.259596,6.642825],[100.085757,6.464489],[99.690691,6.848213],[99.519642,7.343454],[98.988253,7.907993],[98.503786,8.382305],[98.339662,7.794512],[98.150009,8.350007],[98.25915,8.973923],[98.553551,9.93296],[99.038121,10.960546],[99.587286,11.892763],[99.196354,12.804748],[99.212012,13.269294],[99.097755,13.827503],[98.430819,14.622028],[98.192074,15.123703],[98.537376,15.308497],[98.903348,16.177824],[98.493761,16.837836],[97.859123,17.567946],[97.375896,18.445438],[97.797783,18.62708],[98.253724,19.708203],[98.959676,19.752981],[99.543309,20.186598],[100.115988,20.41785],[100.548881,20.109238],[100.606294,19.508344],[101.282015,19.462585],[101.035931,18.408928],[101.059548,17.512497],[102.113592,18.109102],[102.413005,17.932782],[102.998706,17.961695],[103.200192,18.309632],[103.956477,18.240954],[104.716947,17.428859],[104.779321,16.441865],[105.589039,15.570316],[105.544338,14.723934],[105.218777,14.273212],[104.281418,14.416743],[102.988422,14.225721],[102.348099,13.394247],[102.584932,12.186595]]]}};

            L.geoJSON(testGeo,{style}).addTo(this.map);  

            this.makeShipLine(); // 一只船的轨迹
        },
        // 船舶轨迹打点
        makeShipLine(){
            let paths = [[35.485106,123.078832],[26.787026,126.104039],[22.847052,126.281993],[18.999909,126.578654]]; //随便打的点
            
            const iconStart = L.icon({iconUrl: require('@/assets/images/chuan/start.png'), iconSize: [20,20], iconAnchor: [5, 5],shadowSize: [0, 0]}); 
            
            const iconEnd = L.icon({iconUrl: require('@/assets/images/chuan/end.png'), iconSize: [20,20], iconAnchor: [5, 5],shadowSize: [0, 0]});

            let popupDom = "<div class='pop-data'><ul><li class='time'><span>位置更新：</span>5天前"  + "</li><li><span>船名：超级无敌号</span>" + "</li><li><span>类型：货船</span>" +"</li></ul></div>"; //   绑定popup

            let makerStart = L.marker(paths[0],{icon: iconStart});
            let makerEnd = L.marker(paths[paths.length-1],{icon: iconEnd}).bindTooltip(popupDom);

            let lineLayer = L.polyline.antPath(paths, {
                "paused": false,   　　//暂停  初始化状态
                "reverse": false,　　//方向反转
                "delay": 1000,　　　　//延迟，数值越大效果越缓慢
                "dashArray": [10, 20],　//间隔样式
                "weight": 2,　　　　//线宽
                "opacity": 0.7,　　//透明度
                "color": "red",　
                "pulseColor": "#fff"　　//块颜色
            });
            this.feiMakerGroupLayer.addLayer(makerStart);
            this.feiMakerGroupLayer.addLayer(makerEnd);
            this.feiLineGroupLayer.addLayer(lineLayer);

            this.map.addLayer(this.feiMakerGroupLayer); // 添加点
            this.map.addLayer(this.feiLineGroupLayer); // 添加线

        },

    },
    

};
</script>


<style lang="scss">
#map{
    width: 100%;
    height: 100%;
}
</style>