vue(16) : leaflet[1] : 入门

>leaflet

https://vue2-leaflet.netlify.app/components/LMarker.html#props

>>中文文档

leafLet入门教程兼leafLet API中文文档参考_Sunny蔬菜小柠的博客-CSDN博客_leaflet中文文档

>>添加标记

leaflet(二)在地图上添加标记 - 走看看

leaflet 在地图上创建marker标记 - JackGIS - 博客园

>距离测量

Leaflet 简单测距_大洪的博客-CSDN博客_leaflet 测距

>官方文档

Documentation - Leaflet - a JavaScript library for interactive maps

>坐标偏移

leaflet中如何优雅的解决百度、高德地图的偏移问题_GIS兵器库的博客-CSDN博客_leaflet天地图偏移

>曲线2

leaflet曲线2_fk129的博客-CSDN博客_leaflet 画曲线

>曲线

地图已知两点坐标画一条曲线_宁晓的博客-CSDN博客

地图页面

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

<script>
import '../../leaflet/leaflet.css'
import '../../leaflet/leaflet.pm.css'
import '../../leaflet/leaflet.js'
import '../../leaflet/leaflet.pm.min.js'
import '../../leaflet/leaflet.ChineseTmsProviders.js'


var map = null

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      /**
        * 智图地图内容
        */
      var normalm1 = L.tileLayer.chinaProvider('Geoq.Normal.Map', {
          maxZoom: 18,
          minZoom: 5
      });
      var normalm2 = L.tileLayer.chinaProvider('Geoq.Normal.Color', {
          maxZoom: 18,
          minZoom: 5
      });
      var normalm3 = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', {
          maxZoom: 18,
          minZoom: 5
      });
      var normalm4 = L.tileLayer.chinaProvider('Geoq.Normal.Gray', {
          maxZoom: 18,
          minZoom: 5
      });
      var normalm5 = L.tileLayer.chinaProvider('Geoq.Normal.Warm', {
          maxZoom: 18,
          minZoom: 5
      });
      var normalm6 = L.tileLayer.chinaProvider('Geoq.Theme.Hydro', {
          maxZoom: 18,
          minZoom: 5
      });
      /**
        * 天地图内容
        */
      var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
              maxZoom: 18,
              minZoom: 5
          }),
          normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
              maxZoom: 18,
              minZoom: 5
          }),
          imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
              maxZoom: 18,
              minZoom: 5
          }),
          imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
              maxZoom: 18,
              minZoom: 5
          }),
      terrainm = L.tileLayer.chinaProvider('TianDiTu.Terrain.Map', {
              maxZoom: 18,
              minZoom: 5
          }),
          terraina = L.tileLayer.chinaProvider('TianDiTu.Terrain.Annotion', {
              maxZoom: 18,
              minZoom: 5
          });

      var normal = L.layerGroup([normalm, normala]),
          image = L.layerGroup([imgm, imga]),
          terrain = L.layerGroup([terrainm, terraina]);
      /**
        * 谷歌
        */
      var normalMap = L.tileLayer.chinaProvider('Google.Normal.Map', {
              maxZoom: 18,
              minZoom: 5
          }),
          satelliteMap = L.tileLayer.chinaProvider('Google.Satellite.Map', {
              maxZoom: 18,
              minZoom: 5
          });
      /**
        * 高德地图
        */
      var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
          maxZoom: 18,
          minZoom: 5
      });
      var Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
          maxZoom: 18,
          minZoom: 5
      });
      var Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
          maxZoom: 18,
          minZoom: 5
      });
      var Gaodimage = L.layerGroup([Gaodimgem, Gaodimga]);
    /**
      * OSM地图
      */
    var OsmMap = L.tileLayer.chinaProvider('OSM.Normal.Map', {
          maxZoom: 18,
          minZoom: 5
      });
    /**
        * 百度地图

      var Baidu = L.tileLayer.chinaProvider('Baidu.Normal.Map', {
          maxZoom: 18,
          minZoom: 5
      });
      var Baiduimgem = L.tileLayer.chinaProvider('Baidu.Satellite.Map', {
          maxZoom: 18,
          minZoom: 5
      });
      var Baiduimga = L.tileLayer.chinaProvider('Baidu.Satellite.Annotion', {
          maxZoom: 18,
          minZoom: 5
      });
    var Baiduimage = L.layerGroup([Baiduimgem, Baiduimga]);
    */
      var baseLayers = {
          "智图地图": normalm1,
          //"智图多彩": normalm2,
          "智图午夜蓝": normalm3,
          "智图灰色": normalm4,
          "智图暖色": normalm5,
          "智图冷色": normalm6,
          "天地图": normal,
          "天地图影像": image,
          "天地图XX": terrain,
          "谷歌地图": normalMap,
          "谷歌影像": satelliteMap,
          "高德地图": Gaode,
          "高德影像": Gaodimage,
      "OSM地图": OsmMap
      //,
      //    "百度地图": Baidu,
      //"百度影像": Baiduimage
      }

      map = L.map("map", {
      //crs: L.CRS.Baidu,
          center: [29.329328,120.138346],
          zoom: 12,
          layers: [Gaode],
          attributionControl: false,
          zoomControl: false
      });

      L.control.layers(baseLayers, null).addTo(map);

      L.control.zoom({
          zoomInTitle: '放大',
          zoomOutTitle: '缩小'
      }).addTo(map);
      L.marker([29.329328,120.138346]).addTo(map);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.maps {
  width: 100%;
  height: 100vh;
  z-index:1;
  margin: auto
}
</style>

最后

以上就是温柔萝莉为你收集整理的vue(16) : leaflet[1] : 入门的全部内容，希望文章能够帮你解决vue(16) : leaflet[1] : 入门所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。