leaflet+vue2实现地图交互

leaflet

它是一款好入门的地图库,官网:https://leafletjs.com/
由于自身对技术的追求便学习了下，我将为大家分享地图的基本使用

• 本篇教程带领各位实现简单的地图交互
• 通过leaflet+vue2+antd-vue实现的

项目准备

• 1.创建项目

保证自己安装了脚手架vue-cli

vue create 项目名称

• 2.安装依赖

由于是用的vue2,所以ui组件库需要指定版本
组件库官网:
https://www.antdv.com/components/overview

 npm i leaflet
 npm i --save ant-design-vue@1.7.2

大概依赖如下：axios看是否数据需要从数据库获取，需要则安装即可！！！

• 3. 引入依赖并挂载全局
     在main.js入口文件中

这里我是按需引入的antd组件

import Vue from 'vue'
import App from './App.vue'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import 'ant-design-vue/dist/antd.css';
import { Button, Alert,Divider,Tag,Modal} from 'ant-design-vue';
Vue.use(Button)
Vue.use(Alert)
Vue.use(Divider)
Vue.use(Tag)
Vue.use(Modal)
Vue.config.productionTip = false
Vue.use(L)
new Vue({
  render: h => h(App),
}).$mount('#app')

以上项目就准备好了

编写弹出交互组件

这里封装一个组件PopupComp.vue
用于显示弹出层

<template>
    <div>
    <a-divider orientation="left">地名:</a-divider>
    <div>
        <a-tag color="#3b5999">{{detailInfo}}</a-tag>
    </div>
    <a-modal
      v-model:visible="visible"
      title="详情"
      ok-text="确认"
      cancel-text="关闭"
      @ok="hideModal()"
    >
    <div v-html="text"></div>
    </a-modal>
    <br/>
    <hr />
      <a-button @click="viewDetail">查看详情</a-button>
    </div>
</template>

<script>
export default {
    name: 'PopupComp',
    data () {
        return {
            detailInfo: {},
            visible:false,
            text:"详情内容"
        }
    },
    watch:{
        detailInfo:function (val){
            switch(val){
                case '江西省':
                    this.text=`
                    
                    
江西，简称赣，因公元733年唐玄宗设江南西道而得省名，又因江西最大河流为赣江而得简称。 [169]  省会南昌，位于中国东南部，在长江中下游南岸，处于北纬24°29′14″至30°04′43″与东经113°34′18″至118°28′56″之间。东邻浙江、福建，南连广东，西接湖南，北毗湖北、安徽。 [207]  江西为长江三角洲、珠江三角洲和闽南三角地区的腹地
                    `;
                    break;
                case '江西吉安':
                    this.text=`
                    
                    
吉安，古称庐陵、吉州，是江西省辖地级市。元初，取“吉泰民安”之意改称“吉安”。吉安下辖2区1市10县。全市总面积25283平方千米 [48]  。 [1-4]  截至2020年11月1日零时，吉安市常住人口为446.9176万人(第七次人口普查)。 [46]  2021年吉安地区生产总值为2525.65亿元，同比增长9.0%
                    `;
                    break;
                case '赣州市':
                    this.text=`
                    
                        
赣州，简称“虔”，别称虔城、赣南，江西省辖地级市、省域副中心城市，江西省的南大门。赣州地处中亚热带南缘，属亚热带丘陵山区湿润季风气候， [21]  地形以山地、丘陵、盆地为主，章江、贡江在赣州合流为赣江。 [6]  。截至2020年6月，全市总面积39379.64平方千米，占江西省总面积的23.6%，为江西省最大的行政区， [17]  下辖3个区、13个县，代管2个县级市。
                    `
                    break;
                case '武功山国家级风景区':
                this.text=`
                    
                        
武功山位于中国江西省中西部，居罗霄山脉北支，山体呈东北—西南走向，地跨江西省萍乡市芦溪县、吉安市安福县、宜春市袁州区，主脉绵延120余千米，总面积约970平方千米。
                    `
                    break;
                case '江西南昌':
                this.text=`
                    
                        
南昌,是江西省的省会城市,长江中游城市群中心城市之一,鄱阳湖生态经济区核心城市,国务院命名的国家历史文化名城。现辖三县(南昌、进贤、安义),六区(红谷滩、东湖、西湖、青云谱、青山湖、新建),三个国家级开发区(南昌国家经济技术开发区、南昌国家高新技术产业开发区、南昌小蓝经济技术开发区)以及湾里管理局,区域面积7402平方公里,总人口603万,是全省的政治、经济、文化、科技和交通中心。
                    `
                    break;
                case '湖南长沙':
                this.text=`
                    
                        
长沙地处中国华中地区、湘江下游、长浏盆地西缘、湖南东部偏北,介于东经111°53′—114°15′,北纬27°51′—28°41′之间。长沙是全国“两型社会”综合配套改革试验区、中国重要的粮食生产基地,长江中游城市群和长江经济带重要的节点城市, [2-3] 是综合交通枢纽和国家物流枢纽。 [4] 长沙是中国(大陆)国际形象最佳城市、 [8] 东亚文化之都、 [9] 世界“媒体艺术之都
                    `
                    break;
                case '湖南省':
                this.text=`
                    
                        
湖南省，简称“湘”，是中华人民共和国省级行政区，省会长沙，界于北纬24°38′～30°08′，东经108°47′～114°15′之间，东临江西，西接重庆、贵州，南毗广东、广西，北连湖北，总面积21.18万平方千米。
                    `
                    break;
                case '江西九江':
                this.text=`
                    
                        
江西九江
                    `
                    break;
                default:
                    this.text="哥们，你点的哪里？？？"
                    break;
            }
        }
    },
    methods: {
        viewDetail () {
            this.visible=true;
        },
        hideModal(){
            this.visible=false;
        }
    }
}
</script>    

编写地图页

使用该脚手架创建好项目默认有个HelloWorld.vue组件
直接在里边修改内容即可
由于没有坐标相关信息,这里推荐一个东西可以手动弄数据geojson
http://geojson.io/#map=8/27.152/114.453
不会使用的自己去找找教程吧~

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

<script>
  import Vue from 'vue'
  import axios from 'axios'
  // 引入组件
import PopupComp from './PopupComp.vue'
export default {
  name: 'HelloWorld',
  data () {
    return {
      map: null,
      flag:true,
      data:{
            "type": "FeatureCollection",
            "features": [
              {
                "type": "Feature",
                "properties": {
                  "cityName": "江西吉安",
                  "desc": "位于江西省吉安市"
                },
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                    114.9609375,
                    27.112923428713707
                  ]
                }
              },
              {
                "type": "Feature",
                "properties": {
                  "cityName": "湖南长沙",
                  "desc": "位于湖南省长沙市"
                },
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                    112.93395996093749,
                    28.26084411480482
                  ]
                }
              },
              {
                "type": "Feature",
                "properties": {
                  "cityName": "武功山国家级风景区",
                  "desc": "位于江西省，著名的风景区"
                },
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                    114.1534423828125,
                    27.522886832325796
                  ]
                }
              },
              {
                "type": "Feature",
                "properties": {
                  "cityName": "江西南昌",
                  "desc": "位于江西省南昌市，富饶的城市"
                },
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                    115.8673095703125,
                    28.676130433078256
                  ]
                }
              },
              {
                "type": "Feature",
                "properties": {
                  "cityName": "赣州市",
                  "desc": "位于江西省赣州市，是江西最大的市"
                },
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                    114.9169921875,
                    25.859223554761407
                  ]
                }
              },
              {
                "type": "Feature",
                "properties": {
                  "cityName": "湖南省",
                  "desc": "湖南省！！！！"
                },
                "geometry": {
                  "type": "Polygon",
                  "coordinates": [
                    [
                      [
                        111.02783203125,
                        27.186242185608737
                      ],
                      [
                        111.829833984375,
                        27.186242185608737
                      ],
                      [
                        111.829833984375,
                        27.61540601339959
                      ],
                      [
                        111.02783203125,
                        27.61540601339959
                      ],
                      [
                        111.02783203125,
                        27.186242185608737
                      ]
                    ]
                  ]
                }
              },
              {
                "type": "Feature",
                "properties": {
                  "cityName": "江西省",
                  "desc": "江西省!!!!"
                },
                "geometry": {
                  "type": "Polygon",
                  "coordinates": [
                    [
                      [
                        115.23559570312499,
                        27.108033801463115
                      ],
                      [
                        115.86181640625001,
                        27.108033801463115
                      ],
                      [
                        115.86181640625001,
                        27.42053815128712
                      ],
                      [
                        115.23559570312499,
                        27.42053815128712
                      ],
                      [
                        115.23559570312499,
                        27.108033801463115
                      ]
                    ]
                  ]
                }
              },
              {
                "type": "Feature",
                "properties": {
                  "cityName": "江西九江",
                  "desc": "位于江西省九江市"
                },
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                    115.960693359375,
                    29.668962525992505
                  ]
                }
              }
            ]
          }
    }
  },
  mounted () {
    this.initMap()
  },
  beforeDestroy(){
    this.map.off();
        this.map.remove();
        this.map = null;
  },
  methods: {
    async initMap () {
      // 创建地图并初始化中心点、层级
      this.map = L.map('mapContainer').setView([27.103143960595734,114.9609375], 8)
      // 添加底图
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map)
      const glayer=L.geoJSON(this.data,{
            pointToLayer:(point,lating)=>{
                return L.marker(lating,{
                    iconUrl:'https://img1.baidu.com/it/u=2503433779,3574018282&fm=253&fmt=auto&app=138&f=JPEG?w=260&h=315',
                    title:'碰磕Study',//鼠标放上去的提示字
                    clickable:true,//可点击
                    iconSize:[25,41],//icon大小
                    iconAnchor:[12,21]//位置
                })
            }
        })
        glayer.bindPopup(layer => this.getPopupHtml(layer.feature.properties.cityName))
        glayer.addTo(this.map)
    },
    // 构造器创建实例
    getPopupHtml (data = {}) {
        const Comp = Vue.extend(PopupComp)
        const vm = new Comp({})
        vm.$mount()
        vm.detailInfo = data
        return vm.$el
    }
  }
}
</script>

<style scoped>
#mapContainer {
  width: 100%;
  height: 98vh;
}
</style>

代码分析

代码我就不一一分开编写解释了，我统一进行一个解释

• 地图流程:地图主要就是先有底图—>然后就有坐标相关信息放在底图上…等等(教程简单主要是做了这两个)
• 首先需要拿到底图的地址,这个地址可以在高德或者百度等等去获取，这里我拿了个底图切片测试地址进行使用
• 创建地图
  L.map('id节点')
  设置默认显示的坐标.setView([],默认显示层级)
  这里我用this.map去接收，之后更改地图即修改this.map即可
• 添加底图
  L.titleLayer('切片地址').addTo(地图对象)
  这里底图分很多种：像天地图、平面图等等…
  这里推荐个别人的文章用于根据不同底图的方法的选择
  例如arcgis的:https://blog.csdn.net/u012320231/article/details/81905986
• 再添加坐标相关信息，这里我是用的geoJSON，官网也提供了它的方法
  L.geoJSON(数据,函数)
  函数中:pointToLayer表示点坐标的项，参数一表示该对象，参数二表示该点的坐标位置
  通过returnL.marker实现点坐标的构建
• L.marcker参数一表示坐标位置，参数二用于配置（是个对象）例如iconUrl表示图标地址（自定义图标）
• 再通过bindPopup添加点击提示事件（参数是坐标）我这里是触发getPopupHtml（自己封装的弹窗组件方法携带的数据过去），最后将它addTo底图上即可
  以上代码即可实现地图简单的交互，接下来看看效果图吧！！！

效果图

这里有点坐标也有自定义图形坐标

点击某个坐标:

点击查看详情:

是不是觉得自己又行了,hhhhhhhhh（有不懂的评论区问我）