vue2-leaflet是对ledflet的封装，vue项目中直接使用vue2-leaflet即可。
1、安装
项目中会使用到vue2-leaflet和leaflet，因此需要安装2个插件
npm install vue2-leaflet --save
npm install leaflet --save
2、使用
组件中引入，也可以全局引入，代码如下：
<template>
<div>
<l-map
:zoom="currentZoom"
:center="currentCenter"
:options="mapOptions"
style="height:100%;"
:minZoom="3" :maxZoom="18"
>
<l-tile-layer :url="url" :options="option" />
<l-tile-layer :url="Annotation" :options="option" />
<!-- 比例尺 -->
<l-control-scale position="topleft" :imperial="false" :metric="true"></l-control-scale>
<!--显示轨迹 -->
<l-polyline :lat-lngs="polyline.latlngs" :color="polyline.color"></l-polyline>
<!-- marker点 -->
<l-marker :lat-lng="reportPoint" :icon="icon_report"></l-marker>
</l-map>
</div>
</template>
<script>
import { mapGetters,mapState,mapActions, mapMutations } from "vuex";
import { latLng, icon } from "leaflet";
import {
LMap,
LTileLayer,
LMarker,
LPolyline,
LIcon,
LControlScale
} from "vue2-leaflet";
export default {
name: "TDTVecMap",
components: {
LMap,
LTileLayer,
LMarker,
LPolyline,
LIcon,
LControlScale
},
data() {
return {
param:{
name: "获取人员轨迹",
UserID: "10031",
sDate: "2019-10-01 10:00",
fDate: "2019-10-01 11:00",
Map: "arcgis_tianditu_online",
DataType: "json"
},
currentZoom :16,
currentCenter :latLng(31.9922383, 118.7115911) ,
replyLine:[],
polyline: {
latlngs: [],
color: 'blue'
},
// 底图 天地图
Annotation:"http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=583a5ba8766602fb9802a4aa5bf0b40e",
url:"http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=583a5ba8766602fb9802a4aa5bf0b40e",
option: { subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"] },
showParagraph: false,
mapOptions: {
zoomSnap: 0.5
},
//marker点图标
icon_report: icon({
iconUrl: require("../../../../assets/mobile/images/NJGHV3/report.png"),
iconSize: [25], //图片大小
iconAnchor: [30, 37]
})
};
},
methods: {
...mapActions("repair/TrajectoryInfo",{
loadTrajectoryData:"loadTrajectoryData"
}),
showLongText() {
this.showParagraph = !this.showParagraph;
},
loadMap() {
//请求轨迹数据
this.loadTrajectoryData(this.param).then(res=>{
var lagPoint=res
for(let i=0;i<lagPoint.length;i++){
var temparr=[]
temparr=[lagPoint[i].lat,lagPoint[i].lng]
this.replyLine.push(temparr)
}
this.polyline.latlngs=this.replyLine
})
}
},
computed: {
...mapState("repair/TrajectoryInfo",{
reportPoint:state=>state.reportPoint
}),
},
mounted() {
this.loadMap();
}
};
</script>
具体参见vue2-leaflet官网：https://vue2-leaflet.netlify.app
