vue 使用leaflet绘制平面图（二）

首先在vue中使用，需要安装相关依赖

npm install leaflet

基于前面使用leaflet绘制平面图（一）的代码，修改得一下内容，相对与html会出现一些问题例如：标记图标未显示，需要声明icon

import * as L from 'leaflet'
import icon from 'leaflet/dist/images/marker-icon.png'
import iconShadow from 'leaflet/dist/images/marker-shadow.png'

完整代码如下

<template><div id="imageMap" />
</template>
<script>import 'leaflet/dist/leaflet.css'
import 'leaflet/dist/leaflet'
import 'leaflet/dist/leaflet-src'
import 'leaflet/dist/leaflet-src.esm'
import * as L from 'leaflet'
import icon from 'leaflet/dist/images/marker-icon.png'
import iconShadow from 'leaflet/dist/images/marker-shadow.png'
const DefaultIcon = L.icon({iconUrl: icon,shadowUrl: iconShadow
})
L.Marker.prototype.options.icon = DefaultIconexport default {name: 'ImageMap',data() {return {imageMap: ''}},mounted() {this.initDate()},methods: {initDate() {var map = L.map('imageMap', {minZoom: 1,maxZoom: 4,center: [0, 0],zoom: 1,crs: L.CRS.Simple // 这表明leaflet使用1：1映射，在屏幕像素和经纬度坐标系统之间。换句话说，我们的图片是平的，不是全球的，我们在投影一张平面图片。})// 定义了图片尺寸和它的路径，路径可以引用网络链接var w = 4000var h = 3000var url = 'http://192.168.0.121:33334/u/202112/15135947bnp3.jpg'// 把图片通过地图的方式放出来，所以需要一个像素坐标到经纬度坐标（系统）的转换。 把西南，东北角的像素坐标逆映射为经纬度坐标网。var southWest = map.unproject([0, h], map.getMaxZoom() - 1)var northEast = map.unproject([w, 0], map.getMaxZoom() - 1)var bounds = new L.LatLngBounds(southWest, northEast)L.imageOverlay(url, bounds).addTo(map)L.marker([0, 0]).addTo(map).bindPopup('<b>文字提示</b><br />I am a popup.').openPopup()L.marker([-230, 156]).addTo(map).bindPopup('<b>文字提示</b><br />I am a popup.').openPopup()L.marker([-230, 320]).addTo(map).bindPopup('<b>文字提示</b><br />I am a popup.').openPopup()L.marker([-120, 116]).addTo(map).bindPopup('<b>文字提示</b><br />I am a popup.').openPopup()L.marker([-190, 356]).addTo(map).bindPopup('<b>文字提示</b><br />I am a popup.').openPopup()L.marker([-100, 56]).addTo(map).bindPopup('<b>文字提示</b><br />I am a popup.').openPopup()L.marker([-80, 400]).addTo(map).bindPopup('<b>文字提示</b><br />I am a popup.').openPopup()L.polygon([[-239, 77],[-239, 133],[-141, 148],[-141, 110]]).addTo(map).bindPopup('I am a polygon.')map.setMaxBounds(bounds)}}
}
</script>
<style>
#imageMap {width: 100%;height: 100%;border: 1px solid #ccc;margin-bottom: 10px;
}
</style>

vue 使用leaflet绘制平面图（二）相关推荐

使用leaflet绘制平面图学习笔记（一）
介绍:Leaflet 是一个为建设移动设备友好的互动地图,而开发的现代的.开源的 JavaScript 库.它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发,虽然代码仅有 38 ...
【R语言】使用leaflet绘制沈阳地铁线路图——R实训第六次作业
参考: 一.惭愧惭愧,基本都是抄自这个大牛学长,自己做了一部分改进--R语言绘制沈阳地铁线路图二.这个发布的时间比学长还要早(学长可能也借鉴过)--上海地铁数据可视化三.这个是真正的大牛,从他的文 ...
vue使用maptalks绘制地图教程
vue使用maptalks绘制地图教程一.加载最简单的地图二.加载更多地图样式版本: vue:2.7.14 vue-cli:3.2.1 maptalks:1.0.0 一.加载最简单的地图在gi ...
【Python】函数图像绘制：二维图像、三维图像、散点图、心形图
[Python]函数图像绘制:二维图像.三维图像.散点图.心形图所有需要用的包二维图像三维图像散点图绘制心形图绘制所有需要用的包 from mpl_toolkits.mplot3d imp ...
二维数组更改vue_使用vue中的v-for遍历二维数组的方法
如下所示: {{itemss}} 其中,data数据为: this.data = [ [ { type: '', name: '资产', start: '期末余额', end: '期初余额' }, { ...
【Qt】2D绘图之绘制图像(二)
00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 绘制QImage图像 04. 绘制QPixmap图像 05. 绘制QPicture图像 06. 综合对比 07. 附录 0 ...
【Vue学习】—Vue UI组件库（二十八）
[Vue学习]-Vue UI组件库(二十八) 一.移动端常用的UI组件库二.PC端常用的UI组件库三.具体使用自行查看文档,这里就不做概述了
【Vue2.0】—Vue脚手架配置代理（二十二）
[Vue2.0]-Vue脚手架配置代理(二十二) 方法一方法二
在WPF中自定义你的绘制（二）
在WPF中自定义你的绘制(二) 原文:在WPF中自定义你的绘制(二) 在WPF中自定义你的绘制(二) ...

vue 使用leaflet绘制平面图（二）

vue 使用leaflet绘制平面图（二）相关推荐

最新文章

热门文章