vue中使用leaflet加载地图影像并拾取坐标点

1.npm 安装leaflet

npm install leaflet.pm
npm install leaflet

2.在main.js中引入

import L from "leaflet";
import "leaflet/dist/leaflet.css";import './components/common/leaflet-tilelayer-wmts-src';import 'leaflet.pm'
import 'leaflet.pm/dist/leaflet.pm.css'Vue.L = Vue.prototype.$L = L

3.WMTS加载影像，在components文件下新建一个js文件，内容如下

L.TileLayer.WMTS = L.TileLayer.extend({defaultWmtsParams: {service: 'WMTS',request: 'GetTile',version: '1.0.0',layer: '',style: '',tilematrixset: '',format: 'image/jpeg'},initialize: function (url, options) { // (String, Object)this._url = url;var lOptions= {};var cOptions = Object.keys(options);cOptions.forEach(element=>{lOptions[element.toLowerCase()]=options[element];});var wmtsParams = L.extend({}, this.defaultWmtsParams);var tileSize = lOptions.tileSize || this.options.tileSize;if (lOptions.detectRetina && L.Browser.retina) {wmtsParams.width = wmtsParams.height = tileSize * 2;} else {wmtsParams.width = wmtsParams.height = tileSize;}for (var i in lOptions) {// all keys that are in defaultWmtsParams options go to WMTS paramsif (wmtsParams.hasOwnProperty(i) && i!="matrixIds") {wmtsParams[i] = lOptions[i];}}this.wmtsParams = wmtsParams;this.matrixIds = options.matrixIds||this.getDefaultMatrix();L.setOptions(this, options);},onAdd: function (map) {this._crs = this.options.crs || map.options.crs;L.TileLayer.prototype.onAdd.call(this, map);},getTileUrl: function (coords) { // (Point, Number) -> Stringvar tileSize = this.options.tileSize;var nwPoint = coords.multiplyBy(tileSize);nwPoint.x+=1;nwPoint.y-=1;var sePoint = nwPoint.add(new L.Point(tileSize, tileSize));var zoom = this._tileZoom;var nw = this._crs.project(this._map.unproject(nwPoint, zoom));var se = this._crs.project(this._map.unproject(sePoint, zoom));var tilewidth = se.x-nw.x;var ident = this.matrixIds[zoom].identifier;var tilematrix = this.wmtsParams.tilematrixset + ":" + ident;var X0 = this.matrixIds[zoom].topLeftCorner.lng;var Y0 = this.matrixIds[zoom].topLeftCorner.lat;var tilecol=Math.floor((nw.x-X0)/tilewidth);var tilerow=-Math.floor((nw.y-Y0)/tilewidth);var url = L.Util.template(this._url, {s: this._getSubdomain(coords)});return url + L.Util.getParamString(this.wmtsParams, url) + "&tilematrix=" + tilematrix + "&tilerow=" + tilerow +"&tilecol=" + tilecol;},setParams: function (params, noRedraw) {L.extend(this.wmtsParams, params);if (!noRedraw) {this.redraw();}return this;},getDefaultMatrix : function () {/*** the matrix3857 represents the projection * for in the IGN WMTS for the google coordinates.*/var matrixIds3857 = new Array(22);for (var i= 0; i<22; i++) {matrixIds3857[i]= {identifier    : "" + i,topLeftCorner : new L.LatLng(20037508.3428,-20037508.3428)};}return matrixIds3857;}
});L.tileLayer.wmts = function (url, options) {return new L.TileLayer.WMTS(url, options);
};

4.在config文件夹的index.js中的dev ->proxyTable:{}中配置代理方法，如下：


module.exports = {dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/mapServePath': {target: 'http://192.168.0.85:8080', // 目标接口域名changeOrigin: true, // 是否启用跨域pathRewrite: { //'^/mapServePath': ''}}},

5.在vue页面中加载使用，代码如下：

<template><div id="map"></div></template><script>export default {name: "mapView",data() {return {};},mounted() {var map = L.map('map', {center: [29.827091,120.939465],//[30.759234,120.268814],zoom: 17,crs: L.CRS.EPSG4326});var matrixIds = [];for (var i = 0; i < 22; ++i) {matrixIds[i] = {identifier: "" + i,topLeftCorner: new L.LatLng(90, -180)};}var ign = new L.TileLayer.WMTS("mapServePath/geoserver/gwc/service/wmts", {layer: 'zhangCunData:zhangCunImagery', //张村图层名称tilematrixSet: 'EPSG:4326', //GeoServer使用的网格名称width: 20,height: 20,format: 'image/png',maxZoom: 22,minZoom: 10,matrixIds: matrixIds,})map.addLayer(ign);//点击地图进行打点var mypop = L.popup();map.on('click', function(e) {// this.lat = e.latlng.lat //纬度// this.lng = e.latlng.lng //经度var content = '你点击了这个点：<br>';content += e.latlng.toString();console.log(content);mypop.setLatLng(e.latlng).setContent(content).openOn(map); });}};
</script><style>
#map {width: 100%;height: 1000px;
}
</style>

以上操作之后，就可以成功加载影像图，并在地图上拾取坐标点了！

参考链接如下：
https://blog.csdn.net/qq_40423339/article/details/106080464
https://malagis.com/leaflet-note-10-click-show-lan-lat.html

vue中使用leaflet加载地图影像并拾取坐标点相关推荐

Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Vue中使用Openlayers加载Geoserver发布的ImageWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Vue中使用Openlayers加载Geoserver发布的TileWMS时单击获取shp文件的坐标信息
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
Vue中使用Openlayers加载Geoserver发布的TileWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
vue中通过js加载图片显现
在vue开发中会遇到这样的问题:有时需要在img中加载多个静态资源的图片,如果我们将src的路径整个定义成一个变量,会发现img加载不出来正个图片的路径,其实此时需要require()来加载静态资源的 ...
bug解决-Vue中img图片加载失败解决方案
Vue 中img图片加载失败解决方案 bug:assets文件下的图片动态取得话,显示不出来. 解决方法:把图片放到public文件夹下 public是直接原封不动打包到dist里面
vue 使用leaflet 加载地图服务（可切换天地图影像地图）（一）
// 下载 npm install leaflet // 引入 main.js import L from "leaflet"; import "leaflet/dist ...
leaflet加载天地图影像、地形、矢量底图
第一步: 到天地图官网(国家地理信息公共服务平台天地图)注册账号,然后登陆,再点击图中的开发资源,在点击后会弹出选择框,再点击地图api(天地图API).这里直接点击我给的两个链接就行. 就会出现如 ...
vue 中实现异步加载模块
前提:使用vue官方脚手架搭建(webpack) 使用 vue-cli构建的项目,在默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体,这样打包使单页面的应用的体积比 ...
vue中echarts初次加载图很小的问题
在vue的mounted中如果初始化数据的话,dom元素还没有完全加载完成,这时候echarts还是px和%混用,会造成加载出来的echarts很小处理方式,加载完成之后重绘一下: $(docume ...

vue中使用leaflet加载地图影像并拾取坐标点

vue中使用leaflet加载地图影像并拾取坐标点相关推荐

最新文章

热门文章