leaflet它是一款好入门的地图库,官网:Leaflet - a JavaScript library for interactive mapshttps://leafletjs.com/
由于自身对技术的追求便学习了下,我将为大家分享地图的基本使用.
https://geekdaxue.co/read/leaflet-cn/v1.7.1-doc#marker 相关的api文档
- 1.创建项目
保证自己安装了脚手架vue-cli
vue create 项目名称
- 1
- 2.安装依赖
由于是用的vue2,所以ui组件库需要指定版本
组件库官网:
Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js
npm i leaflet
npm i --save ant-design-vue@1.7.2
如果使用leaflet.pm绘制就下载这个
npm install leaflet.pm
这个是绘制圆的使用的方法。
编写弹出交互组件
这里封装一个组件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底图上即可
这是我引入的js文件
这是采用的leaflet.draw绘制 我俩种方式都采用绘制了一下。