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

sqy7922

于 2021-07-15 13:38:14 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/sql65432/article/details/118757309

本文介绍了如何在Vue项目中利用Leaflet加载WMTS地图影像，并实现点击地图拾取坐标点的功能。主要步骤包括：npm安装Leaflet库，引入到main.js，创建专门的js文件配置WMTS加载，设置代理以解决跨域问题，最后在Vue组件中展示地图并添加点击事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 (v

最低0.47元/天解锁文章

200万优质内容无限畅学