// leaflet 核心庫
npm install leaflet   
// 地圖瓦片
npm install leaflet.chinatmsproviders
// 動態(tài)線
npm install leaflet-ant-path
// 側(cè)邊欄工具庫
npm install @geoman-io/leaflet-geoman-free 

import L from "leaflet";
import "leaflet.chinatmsproviders"; // 插件可加載各種地圖（如：智圖地圖，谷歌地圖，高德地圖等包含衛(wèi)星地圖）
import "leaflet-ant-path"; //動態(tài)線條插件
import "leaflet/dist/leaflet.css";
import imgs from "@/assets/svg/logo.svg";
import "@geoman-io/leaflet-geoman-free";
import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";

    methods:{
         initMap(){
             let _this = this;
            this.map = L.map("map", {
            attributionControl: true,  // 是否版權(quán)
            closePopupOnClick: false,  // 點擊畫布是否直接隱藏彈窗
            maxZoom: 13,               // 最大縮放  
            minZoom: 3,                // 最小縮放
            noWrap: false,             // 該層是否包裹在逆子午線周圍 
            worldCopyJump: true,       // 拷貝當(dāng)前配置
            renderer: L.svg(),         // 矢量渲染 
            }); 
         }
    }

// 設(shè)置需要引入的地圖瓦片
// 其他材質(zhì)包括（天地圖，百度，...） git地址：https://github.com/htoooth/Leaflet.ChineseTmsProviders 
L.tileLayer?.chinaProvider('Geoq.Normal.PurplishBlue').addTo(this.map);
// 設(shè)置中心點與縮放層級
this.map.setView([41.02999636902566, 108.984375], 3);

 this.map.pm.addControls({
        position: "topleft",
        drawCircle: false,
  });

const attrs = L.control.attribution({ prefix: "Leafet地圖" });
      attrs.addTo(this.map);

  data(){
        return{
                // layerGroup 圖層組主要用于添加標(biāo)點與線段對象
                LineGroupLayer: L.layerGroup([]),
                MakerGroupLayer: L.layerGroup([]),
        }
    }

// 定義圖標(biāo)
const icons = L.icon({
    iconUrl: imgs,
    iconSize: [20, 20],
    iconAnchor: [5, 5],
    shadowSize: [0, 0],
    });
// 創(chuàng)建點實例 將經(jīng)緯度傳入,并在該點位顯示圖標(biāo)
let makerStart = L.marker([50.5, 30.5],{ icon: icons });
// 添加圖
this.MakerGroupLayer.addLayer(makerStart); 
this.map.addLayer(this.MakerGroupLayer); // 添加點   

let paths = [
        [35.485106, 123.078832],
        [26.787026, 126.104039],
        [22.847052, 126.281993],
        [18.999909, 126.578654],
      ]; //隨便打的點
let lineLayer = L.polyline.antPath(paths, {
    // 線
    paused: false, //暫停  初始化狀態(tài)
    reverse: false, //方向反轉(zhuǎn)
    delay: 1000, //延遲，數(shù)值越大效果越緩慢
    dashArray: [10, 20], //間隔樣式
    weight: 2, //線寬
    opacity: 0.7, //透明度
    color: "red",
    pulseColor: "#fff", //塊顏色
    });
this.LineGroupLayer.addLayer(lineLayer);
this.map.addLayer(this.LineGroupLayer); // 添加線

  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);

// 自定義popup,并顯示圖片
var popup = L.popup()
        .setLatLng([e.latlng.lat, e.latlng.lng])
        .setContent(`<p>Hello world!<br />This is a nice popup.</p><img src="${imgs}"/>`)
        .openOn(_this.map); 

// 定義圖標(biāo)
const icons = L.icon({
    iconUrl: imgs,
    iconSize: [20, 20],
    iconAnchor: [5, 5],
    shadowSize: [0, 0],
    });
let popupDom =
    "<div class='pop-data'><ul><li class='time'><span>這是一個點：</span>" +
    "</li><li><span>內(nèi)容...</span>" +
    "</li><li><span>內(nèi)容...</span>" +
    "</li></ul></div>"; //   綁定popup
let makerEnd = L.marker([17.686816, 83.218482], {
    icon: icons,
    }).bindTooltip(popupDom); 
this.MakerGroupLayer.addLayer(makerEnd);            

//  引入Geojson的json文件，這里直接將文件展開了，在項目中不應(yīng)該這么做
 let Geojson = {
        type: "FeatureCollectio", 
        properties: { zhName: "河北省", name: "Hebei" },
        geometry: {
          type: "MultiPolygon",
          coordinates: [
            [
              [116.365069,40.943216],
              [116.37641,40.939681],
              [116.398515,40.905999]
              ....
            ],
          ],
        },
      }; 
      L.geoJSON(Geojson, style: {
          weight: 2, //邊框粗細
          opacity: 0.4, //透明度
          fillColor: 'transparent', //區(qū)域填充顏色
          fillOpacity: 0.3, //區(qū)域填充顏色的透明
        }).addTo(this.map);