Leaflet实现地图交互

• leaflet
• • 项目准备
  • 编写弹出交互组件
  • 编写地图页
  • • 代码分析
  • 效果图

leaflet

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

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

项目准备

• 1.创建项目

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

vue create 项目名称

• 2.安装依赖

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

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

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

• 引入依赖并挂载全局
  在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 = falseVue.use(L)new Vue({render: h => h(App),}).$mount('#app')

编写弹出交互组件

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

<template><p><a-pider orientation="left">地名:</a-pider><p><a-tag color="#3b5999">{{detailInfo}}</a-tag></p><a-modalv-model:visible="visible"title="详情"ok-text="确认"cancel-text="关闭"@ok="hideModal()"><p v-html="text"></p></a-modal><br/><hr /><a-button @click="viewDetail">查看详情</a-button></p></template><script>export default {name: 'PopupComp',data () {return {detailInfo: {},visible:false,text:"详情内容"}},watch:{detailInfo:function (val){switch(val){case '江西省':this.text=`<img src='https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00771-3285.jpg' width="100%" /><p>江西，简称赣，因公元733年唐玄宗设江南西道而得省名，又因江西最大河流为赣江而得简称。 [169] 省会南昌，位于中国东南部，在长江中下游南岸，处于北纬24°29′14″至30°04′43″与东经113°34′18″至118°28′56″之间。东邻浙江、福建，南连广东，西接湖南，北毗湖北、安徽。 [207] 江西为长江三角洲、珠江三角洲和闽南三角地区的腹地</p>`;break;case '江西吉安':this.text=`<img src='https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/baike/pic/item/4034970a304e251f58fd0d17a986c9177e3e53d3.jpg' width="100%" /><p>吉安，古称庐陵、吉州，是江西省辖地级市。元初，取“吉泰民安”之意改称“吉安”。吉安下辖2区1市10县。全市总面积25283平方千米 [48] 。 [1-4] 截至2020年11月1日零时，吉安市常住人口为446.9176万人(第七次人口普查)。 [46] 2021年吉安地区生产总值为2525.65亿元，同比增长9.0%</p>`;break;case '赣州市':this.text=`<img src='https://img1.baidu.com/it/u=2279326805,3248785434&fm=253&fmt=auto&app=120&f=JPEG?w=650&h=392' width="100%" /><p>赣州，简称“虔”，别称虔城、赣南，江西省辖地级市、省域副中心城市，江西省的南大门。赣州地处中亚热带南缘，属亚热带丘陵山区湿润季风气候， [21] 地形以山地、丘陵、盆地为主，章江、贡江在赣州合流为赣江。 [6] 。截至2020年6月，全市总面积39379.64平方千米，占江西省总面积的23.6%，为江西省最大的行政区， [17] 下辖3个区、13个县，代管2个县级市。</p>`break;case '武功山国家级风景区':this.text=`<img src='https://bkimg.cdn.bcebos.com/pic/3b87e950352ac65c1038ec1673bda5119313b07e1c0c?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxODA=,g_7,xp_5,yp_5/format,f_auto' width="100%" /><p>武功山位于中国江西省中西部，居罗霄山脉北支，山体呈东北—西南走向，地跨江西省萍乡市芦溪县、吉安市安福县、宜春市袁州区，主脉绵延120余千米，总面积约970平方千米。</p>`break;case '江西南昌':this.text=`<img src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1508%2F13%2Fc67%2F11141173_1439479437456.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664766596&t=4a29c015543e0720313007e17fec6609' width="100%" /><p>南昌,是江西省的省会城市,长江中游城市群中心城市之一,鄱阳湖生态经济区核心城市,国务院命名的国家历史文化名城。现辖三县(南昌、进贤、安义),六区(红谷滩、东湖、西湖、青云谱、青山湖、新建),三个国家级开发区(南昌国家经济技术开发区、南昌国家高新技术产业开发区、南昌小蓝经济技术开发区)以及湾里管理局,区域面积7402平方公里,总人口603万,是全省的政治、经济、文化、科技和交通中心。</p>`break;case '湖南长沙':this.text=`<img src='https://img0.baidu.com/it/u=1265428848,3143645505&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=371' width="100%" /><p>长沙地处中国华中地区、湘江下游、长浏盆地西缘、湖南东部偏北,介于东经111°53′—114°15′,北纬27°51′—28°41′之间。长沙是全国“两型社会”综合配套改革试验区、中国重要的粮食生产基地,长江中游城市群和长江经济带重要的节点城市, [2-3] 是综合交通枢纽和国家物流枢纽。 [4] 长沙是中国(大陆)国际形象**城市、 [8] 东亚文化之都、 [9] 世界“媒体艺术之都</p>`break;case '湖南省':this.text=`<img src='https://img0.baidu.com/it/u=1316064131,863435770&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500' width="100%" /><p>湖南省，简称“湘”，是中华人民共和国省级行政区，省会长沙，界于北纬24°38′～30°08′，东经108°47′～114°15′之间，东临江西，西接重庆、贵州，南毗广东、广西，北连湖北，总面积21.18万平方千米。</p>`break;case '江西九江':this.text=`<img src='https://img0.baidu.com/it/u=1316064131,863435770&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500' width="100%" /><p>江西九江</p>`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><p><p id="mapContainer"></p></p></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 = datareturn 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（有不懂的评论区问我🤭）