vue使用leafles画出路径线条

先有一个空白div放入地图，这个div需要有id。

<template>

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

  </div>

</template>

接着，写一段script方法，设置地图地址，将地图加载到div里面

 initDate() {
      var map = L.map("map").setView(
        [X,Y],//默认中心坐标点
        20//地图默认放大倍数
      );

 L.tileLayer(
        "url"//这里放入地图地址,
        {
          attribution:
            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
          maxNativeZoom: 18,
          maxZoom: 100
            //设置无限放大
        }
      ).addTo(map);//将底层地图加入到容器里面
}

最后是画线画路径部分，因为我这边业务的需求，已经存在geojson格式文件，因此可以使用leaflet自带的 L.geoJSON方法画出所有坐标点并连接。我这里展示也用这种方法。其他方法在leaflet文档里面有，大同小异，需要参数不同而已。

 initDate() {
      var map = L.map("map").setView(
        [X,Y],//默认中心坐标点
        20//地图默认放大倍数
      );

 L.tileLayer(
        "url"//这里放入地图地址,
        {
          attribution:
            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
          maxNativeZoom: 18,
          maxZoom: 100
            //设置无限放大
        }
      ).addTo(map);//将底层地图加入到容器里面



//定义两条线，线的坐标就是coordinates，因此只要对coordinates赋值就行
var myLines = [
        {
          type: "LineString",
          coordinates: []
        },
        {
          type: "LineString",
          coordinates: []
        }
      ];

//定义线条的样式
 var myStyle=  {
        color: "#ff7800",
        weight: 5,
        opacity: 0.65
      };

//使用L.geoJSON就行
L.geoJSON(myLines, {
        style: myStyle
      }).addTo(map);

}

最后，在网页初始化完毕后，调用initdate就行。

vue在mounted里面调用就行