leaflet+vue2实现地图交互

leaflet

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

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

项目准备

• 1.创建项目

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

vue create 项目名称
1

• 2.安装依赖

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

 npm i leaflet
 npm i --save ant-design-vue@1.7.2
1
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')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

以上项目就准备好了

编写弹出交互组件

这里封装一个组件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>    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

编写地图页

使用该脚手架创建好项目默认有个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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223

代码分析

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

• 地图流程:地图主要就是先有底图—>然后就有坐标相关信息放在底图上…等等(教程简单主要是做了这两个)
• 首先需要拿到底图的地址,这个地址可以在高德或者百度等等去获取，这里我拿了个底图切片测试地址进行使用
• 创建地图
  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（有不懂的评论区问我🤭）