天地图结合leaflet

qq_46302247

已于 2022-05-12 17:48:41 修改

阅读量2.7k

点赞数 2

文章标签： vue.js 前端 javascript

于 2022-05-12 17:29:04 首次发布

本文链接：https://blog.csdn.net/qq_46302247/article/details/124734031

版权

一、直接使用用天地图

1、引入天地图的 jsBridge

// index.html

<head>
	<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=xx"></script>
</head>

2、创建地图（必须给 mapDiv 设置宽高；initMap()要在mounted中调用）

//map.vue

<template>
    <div id="mapDiv"></div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      zoom: 15,
    };
  },
  mounted() {
    this.$nextTick(() => {
    	this.initMap();
    });
  },
  methods: {
    initMap() {
      let that = this;
      let imageURL =
        "http://t0.tianditu.gov.cn/img_w/wmts?" +
        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=xx";   //tk: 问前端主管要
        

      let lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
      let config = { layers: [lay] };
      that.map = new T.Map("mapDiv", config);
      that.map.centerAndZoom(new T.LngLat(120.63782, 27.49933), that.zoom);
    },
  },
};
</script>

<style>
#mapDiv {
  width: 100vw;
  height: 100vh;
}
</style>

在这里插入图片描述

可参考：https://blog.csdn.net/qq_40423339/article/details/106080464

二、用leaflet创建地图

1、安装leaflet插件

npm install leaflet

2、在 main.js 导入

import 'leaflet/dist/leaflet.css'
// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
import * as L from 'leaflet'
Vue.L = Vue.prototype.$L = L

3、创建地图

//map.vue

<template>
    <div id="mapDiv"></div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      zoom: 15,
    };
  },
  mounted() {
  	this.$nextTick(() => {
    	this.initMap();
    });
  },
  methods: {
    initMap() { 
	    this.map = L.map('mapDiv', {
	        layers: [L.tileLayer(
	         "http://t0.tianditu.gov.cn/img_w/wmts?" +
	        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
	        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=xx"  //tk: 问前端主管要
	        ),],
	        center: [27.49933,120.63782],
	        zoom: this.zoom
	    });
    },
  },
};
</script>

<style>
#mapDiv {
    width: 100vw;
    height: 100vh;
  }
</style>

在这里插入图片描述

三、使用leaflet.pm

1、安装leaflet.pm插件

npm install leaflet.pm

2、在 main.js 导入

import 'leaflet.pm'
import 'leaflet.pm/dist/leaflet.pm.css'

3、使用leaflet.pm

//map.vue

initMap() {
	...
	
	this.map.pm.addControls({
	  position: "topleft",
	  drawPolygon: false, // 添加绘制多边形
	  drawMarker: false, //添加按钮以绘制标记
	  drawCircleMarker: false, //添加按钮以绘制圆形标记
	  drawPolyline: false, //添加按钮绘制线条
	  drawRectangle: true, //添加按钮绘制矩形
	  drawCircle: false, //  添加按钮绘制圆圈
	  editMode: true, //  添加按钮编辑多边形
	  dragMode: true, //   添加按钮拖动多边形
	  cutPolygon: true, // 添加一个按钮以删除图层里面的部分内容
	  removalMode: true, // 清除图层
	});
	// 设置绘制后的线条颜色等
	this.map.pm.setPathOptions({
	  color: "orange",
	  fillColor: "green",
	  fillOpacity: 0.4,
	});
	this.map.pm.setLang("zh"); //设置语言  en, de, it, ru, ro, es, fr, pt_br, zh , nl
	
	// 监听绘制
     this.getlatLngs()
},
getlatLngs() {
	var that = this
	//pm:drawstart 开始第一个点的时候调用
	//pm:drawend  禁止绘制时调用
	//pm:create  创建完成时调用
	this.mapObj.on("pm:create", e => {
	  this.messureLayer.push(e) // 在添加图层时,将其添加在数组
	  let layer = e.layer
	  let shape = e.shape
	  ... //具体业务需求
});

在这里插入图片描述