vue使用leaflet
一、npm下载依赖使用1、vue npm依赖使用leaflet2、leaflet绘制点线面的插件使用（leaflet pm） 二、vue项目手动外部引入leaflet1、地图加载2、加载control控件（放大缩小、测距、测面积）一、npm下载依赖使用
1、vue npm依赖使用leaflet
npm安装leaflet依赖npm install leaflet
新建vue页面，在页面中局部使用leaflet（不在main.js中设置全局使用）
<template><div class="leaflet"><div class="container"><div id="map" class="map"></div></div></div></template><script>import L from "leaflet";import 'leaflet/dist/leaflet.css';export default {name:'AMap',data() {return {map:""}},methods: {initMap(){this.map = L.map("map", {center: [40.02404009136253, 116.50641060224784], // 地图中心zoom: 14, //缩放比列zoomControl: true, //禁用 + - 按钮doubleClickZoom: true, // 禁用双击放大attributionControl: true // 移除右下角leaflet标识});let name = L.tileLayer("http://webrd01./appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",).addTo(this.map);// this.map.removeLayer(name) // 移除图层}},mounted(){this.initMap()}}</script><style scoped>.leaflet{width: 100%;height: 600px;}.container {width: 100%;height: 100%;position: relative;left: 50.1%;top: 300px;transform: translate3d(-50%, -50%, 0);border: 1px solid #999;}.map {width: 100%;height: calc(100%);z-index: 1;}</style>
2、leaflet绘制点线面的插件使用（leaflet pm）
在vue页面中引用pmimport 'leaflet.pm';import 'leaflet.pm/dist/leaflet.pm.css';
在initMap()里添加如下代码：
this.map.pm.addControls({position: 'topleft',drawCircle: false,});
完整代码如下：
<template><div class="leaflet"><div class="container"><div id="map" class="map"></div></div></div></template><script>import L from "leaflet";import 'leaflet/dist/leaflet.css';import 'leaflet.pm';import 'leaflet.pm/dist/leaflet.pm.css';export default {name:'AMap',data() {return {map:""}},methods: {initMap(){this.map = L.map("map", {center: [40.02404009136253, 116.50641060224784], // 地图中心zoom: 14, //缩放比列zoomControl: true, //禁用 + - 按钮doubleClickZoom: true, // 禁用双击放大attributionControl: true // 移除右下角leaflet标识});let name = L.tileLayer("http://webrd01./appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",).addTo(this.map);// this.map.removeLayer(name) // 移除图层// add leaflet.pm controls with some options to the mapthis.map.pm.addControls({position: 'topleft',drawCircle: false,});}},mounted(){this.initMap()}}</script><style scoped>.leaflet{width: 100%;height: 600px;}.container {width: 100%;height: 100%;position: relative;left: 50.1%;top: 300px;transform: translate3d(-50%, -50%, 0);border: 1px solid #999;}.map {width: 100%;height: calc(100%);z-index: 1;}</style>
效果图如下：
其他插件可在官网自行查找使用：leaflet pm官网
二、vue项目手动外部引入leaflet
1、地图加载
1、在public下的index.html里面引入js文件sdk，leaflet资源下载：leaflet资源下载
<script src="./static/js/leaflet.js"></script><link rel="stylesheet" href="./static/css/leaflet.css" /><script src="./static/js/CustomWebSDK.js"></script>
2、加载天地图底图服务
<div id="map"></div>this.urlhhh = "http://t0./img_c/wmts?tk=eec8c7ee00d8d62dd60a274aa1a1beb5&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles"this.map = L.map('map', {center: {lon: 114, lat: 39},zoom: 9,minZoom: 0,maxZoom: 20,zoomControl: false,crs: L.CRS.CustomEPSG4326});//添加放大缩小控件this.zoomControl = L.control.zoom({position: 'bottomright' });this.map.addControl(this.zoomControl);this.layersContent = L.tileLayer(this.mapUrl,{tileSize:512}).addTo(this.map);
2、加载control控件（放大缩小、测距、测面积）
1、在public下的index.html里面引入Leaflet.Measure文件和样式
<!-- 引入测量插件js --><script src="./static/js/Leaflet.Measure.js"></script><!-- 引入测量插件css --><link rel="stylesheet" href="./static/css/Leaflet.Measure.css" />
2、声明使用，代码如下
//1、添加放大缩小控件this.zoomControl = L.control.zoom({position: 'bottomright' });this.map.addControl(this.zoomControl);// 2.加载测量距离和测量面积的控件L.Measure = {linearMeasurement: "测距", //测量两点间距离areaMeasurement: "测面", //测量区域面积start: "起点",meter: "m",kilometer: "km",squareMeter: "m²",squareKilometers: "km²"};L.control.measure({position: "topright",title: "测量控件",collapsed: true,color: "#000234"}).addTo(this.map);
3、完整代码如下：
<template><div style="width:100%;heght:100%;"><div id="map" v-if="showMap"></div><el-dialogtitle="本地服务列表":visible="!showMap":before-close="handleClose"width="30%"><el-table:data="serviceList"style="width: 100%"><el-table-columnprop="name"label="服务名称"width="180"></el-table-column><el-table-columnprop="type"label="服务类型":formatter="formatter"width="180"></el-table-column><el-table-columnlabel="操作"width="120"><template slot-scope="scope"><router-link:to="{path: '/server',query:{id:scope.row.id,type:scope.row.type,control:true}}" target='_blank' >预览</router-link><el-buttontype="text"@click="copyUrl(scope.row)">复制</el-button></template></el-table-column></el-table></el-dialog></div></template><script>import {getServiceInfo} from '@/api/datahub'import {copyText} from "@/utils/utils"export default {data () {return {serviceList:[],map: null,mapUrl: ""}},computed:{showMap(){return this.$route.query.type}},mounted () {this.showMap?this.initMapConfig():this.getServiceList();},activated(){this.showMap?this.initMapConfig():this.getServiceList();},methods: {copyUrl(row){copyText(window.location.href+"?id="+row.id+"&type="+row.type)},handleClose(done) {this.$router.go(-1)done();},formatter(row) {let type=""if(row.type=="sl"){type="矢量服务"}else if(row.type=="yx"){type="影像服务"}else{type="其他"};return type},showRow(row){this.$router.push("/server?id="+row.id+"&type="+row.type)},async getServiceList(){let sl=await getServiceInfo({url:window.baseWebUrl+"/apis/services/list?serviceName=&page=1&rows=99&groupId=&orderBy="});let yx=await getServiceInfo({url:window.baseWebUrl+"/apis/dataservice/list?groupId=&dataName=&orderBy=&page=1&rows=99&type=2"});this.serviceList=[...JSON.parse(sl.data.data).data.records.map(n=>{return {"type":"sl","name":n.name,"id":n.idString}}),...JSON.parse(yx.data.data).data.records.map(n=>{return {"type":"yx","name":n.alias,"id":n.idString}})]},initMapConfig () {if (this.mapUrl != ''&&this.map) {this.map.removeLayer(this.layersContent)}if(this.$route.query.type=='yx'){getServiceInfo({url:window.baseWebUrl+"/apis/dataservice/getInfo/"+this.$route.query.id}).then(res=>{this.mapUrl=JSON.parse(res.data.data).data.url[0].url.replace("http://127.0.0.1:8021",window.baseWebUrl).replace("http://localhost:8021",window.baseWebUrl).replace("{l}","{z}")this.initMap(JSON.parse(res.data.data).data.alias)})}else if(this.$route.query.type=='sl'){getServiceInfo({url:window.baseWebUrl+"/apis/services/getInfo?id="+this.$route.query.id}).then(res=>{this.mapUrl=JSON.parse(res.data.data).data.url[0].url.replace("http://127.0.0.1:8021",window.baseWebUrl).replace("http://localhost:8021",window.baseWebUrl).replace("{l}","{z}").replace("{styleId}",JSON.parse(res.data.data).data.styles[0].alias).replace("{tilesize}","512")this.map = L.map('map', {center: {lon: JSON.parse(res.data.data).data.styles[0].center.split("(")[1].split(" ")[0], lat: JSON.parse(res.data.data).data.styles[0].center.split("(")[1].split(" ")[1].split(")")[0]},zoom: JSON.parse(res.data.data).data.styles[0].level,minZoom: 0,maxZoom: 20,zoomControl: false,crs: L.CRS.CustomEPSG4326});this.layersContent = L.tileLayer(this.mapUrl,{tileSize:512}).addTo(this.map);if (this.$route.query.control) {this.zoomControl = L.control.zoom({position: 'bottomright' });this.map.addControl(this.zoomControl);// 2.加载测量距离和测量面积的控件L.Measure = {linearMeasurement: "测距", //测量两点间距离areaMeasurement: "测面", //测量区域面积start: "起点",meter: "m",kilometer: "km",squareMeter: "m²",squareKilometers: "km²"};L.control.measure({position: "topright",title: "测量控件",collapsed: true,color: "#000234"}).addTo(this.map);}})}},initMap (name) {getServiceInfo({url:window.baseWebUrl+"/rasterserver/image/getServiceBBox/"+name}).then(res=>{let center=JSON.parse(res.data.data)this.map = L.map('map', {center: {lon: (center[0]+center[2])/2, lat: (center[1]+center[3])/2},zoom: 10,minZoom: 0,maxZoom: 20,zoomControl: false,crs: L.CRS.CustomEPSG4326});this.layersContent = L.tileLayer(this.mapUrl,{tileSize:512}).addTo(this.map);if (this.$route.query.control) {this.zoomControl = L.control.zoom({position: 'bottomright' });this.map.addControl(this.zoomControl);// 2.加载测量距离和测量面积的控件L.Measure = {linearMeasurement: "测距", //测量两点间距离areaMeasurement: "测面", //测量区域面积start: "起点",meter: "m",kilometer: "km",squareMeter: "m²",squareKilometers: "km²"};L.control.measure({position: "topright",title: "测量控件",collapsed: true,color: "#000234"}).addTo(this.map);}}) }}}</script><style>#map{width:210vh;height:99vh;margin: 2px auto;}</style>
4、执行效果如下：
