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看是否数据需要从数据库获取，需要则安装即可！！！
-
- 引入依赖并挂载全局
在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=`
<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>
<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（有不懂的评论区问我🤭）
1143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
