Leaflet + Vue使用案例

区域边界及级联

1.获取区域边界JSON数据,下载后放到项目里

https://datav.aliyun.com/portal/school/atlas/area_selector

data() {return {areaFeaturesData: null, // 南通市json数据areaLayer: null, // 区域边界图层isCheckClick: false,currentArea: null, // 当前json所属区划codeareaLayerStyle: {'color': 'red', // 边框颜色'weight': 2, // 边框粗细'opacity': 0.4, // 透明度'fillColor': 'red', // 区域填充颜色'fillOpacity': 0.1 // 区域填充颜色的透明}}}methods: {
// 获取JSON文件中的json数据
this.$axios.get(`/json/sjkbmap/area.json`).then((data) => {this.areaFeaturesData = data.datathis.initAreaForJson()})
initAreaForJson() { // 初始化区域边界Jsonthis.areaLayer = L.geoJSON(this.areaFeaturesData, {style: this.areaLayerStyle, onEachFeature: this.onEachFeature}).addTo(this.map)this.bindAreaLayerEvent()
}onEachFeature(feature, layer) { // 设置鼠标移动到对应区域时悬浮显示内容var a = '名称:' + obj.name + '<br>无人机:' + (obj.wrjsl ? obj.wrjsl : 0)layer.bindTooltip(a, {sticky: true, className: 'leaflet-custom-tooltip'})
}bindAreaLayerEvent() {  // 绑定区域边界事件(移入区域时,对应区域高亮、移出取消高亮、点击对应区域时级联显示点击的区域及子区域)// 监听鼠标移动事件this.areaLayer.on('mouseover', (data) => {console.log('mouseover')// 鼠标移到区域范围内时高亮var feature = data.layerfeature.setStyle({'color': 'blue', // 边框颜色'weight': 2, // 边框粗细'opacity': 0.4, // 透明度'fillColor': 'blue', // 区域填充颜色'fillOpacity': 0.6 // 区域填充颜色的透明})})this.areaLayer.on('mouseout', () => {// 移出区域范围取消高亮this.areaLayer.setStyle(this.areaLayerStyle)})this.areaLayer.on('click', (data) => {this.currentArea = {code: data.layer.feature.properties.adcode,pointArr: data.layer.feature.geometry.coordinates}this.areaLayer.clearLayers()var areaJson = nullthis.areaFeaturesData.features.forEach((item, index) => {if (item.properties.adcode === data.layer.feature.properties.adcode) {areaJson = item}})var center = [areaJson.properties.center[1], areaJson.properties.center[0]]this.map.setView(center, '10')this.areaLayer = L.geoJSON(areaJson, {style: this.areaLayerStyle}).addTo(this.map)this.bindAreaLayerEvent()})}
}

右键菜单

js、css文件下载地址:

链接:https://pan.baidu.com/s/1pX_ZmEA2il_k42cX25dhnQ 提取码:vz6r

import '@/components/leaflet/leaflet.contextmenu.js'
import '@/components/leaflet/leaflet.contextmenu.css'map.options: {preferCanvas: true,contextmenu: true,contextmenuWidth: 140,contextmenuItems: [{text: '刷新',iconCls: 'fa fa-undo',callback: this.refresh}]
}// 监听鼠标右键事件,然后动态添加菜单
this.map.on('contextmenu', (evt) => {
var that = this
var id = '1'
var contextmenu = evt.contextmenu
contextmenu.removeAllItems()    // 删除全部菜单
var contextmenuItems = {text: '刷新',iconCls: 'fa fa-undo',callback: function() {that.contextmenuEvent(id)	// 具体业务方法}
}
contextmenu.addItem(contextmenuItems)   // 添加菜单
})

热力图

// 热力图
npm i leaflet.heatimport 'leaflet.heat'/** 热力图 */
let heatDataList = []
for (let i = 0; i < 50; i++) {var v = {wd: '纬度',jd:‘经度’
}let group = [v.wd, v.jd]heatDataList.push(group)
}
// 生成热力图图层,并添加到地图中
var heat = L.heatLayer(heatDataList, {radius: 12,minOpacity: 0.7
}).addTo(this.map)//清空热力图
heat.setLatLngs([])

经纬度网格

方法一:
addLonLatLine() { // 添加网格线this.lonLatGridLineLayer = L.featureGroup().addTo(this.map)let zoom = this.map.getZoom()let bounds = this.map.getBounds()let north = bounds.getNorth()let east = bounds.getEast()// 经纬度间隔let d = 90 / Math.pow(2, zoom - 1)// 经线网格for (let index = -180; index <= 360; index += d) {// 判断当前视野内if (bounds.contains([north, index])) {// 绘制经线let lonLine = L.polyline([[-90, index],[90, index]],{ weight: 1, color: 'grey' })this.lonLatGridLineLayer.addLayer(lonLine)// 标注let text = index.toFixed(1) + '°'// 动态计算小数位数if (zoom > 10) {text = index.toFixed((zoom - 8) / 2) + '°'}let divIcon = L.divIcon({html: `<div style="white-space: nowrap;color:black;">${text}</div>`,iconAnchor: [0, -5]})let textMarker = L.marker([north, index], { icon: divIcon })this.lonLatGridLineLayer.addLayer(textMarker)if (d > 90) {d = 90}// 纬线网格for (let index = -90; index <= 90; index += d) {if (bounds.contains([index, east])) {let lonLine = L.polyline([[index, -180],[index, 360]],{ weight: 1, color: 'grey' })this.lonLatGridLineLayer.addLayer(lonLine)// 标注let text = index.toFixed(1) + '°'if (zoom > 10) {text = index.toFixed((zoom - 8) / 2) + '°'}let divIcon = L.divIcon({html: `<div style="white-space: nowrap;color:black;">${text}</div>`,iconAnchor: [(text.length + 1) * 6, 0]})let textMarker = L.marker([index, east], { icon: divIcon })this.lonLatGridLineLayer.addLayer(textMarker)}}}}}方法二:
1.npm install leaflet-lonlat-gridlines
2.import {LeafletDrawLonlatLine} from "leaflet-lonlat-gridlines";
3.
this.lonLatGridLines = new LeafletDrawLonlatLine(this.map)
// 经纬线设置为蓝色
this.lonLatGridLines.setLineColor('blue')
// 经纬线度数文本颜色调整为红色
this.lonLatGridLines.setTextColor('red')
// 经纬线度数文本只显示北边(经度值)和东边(纬度值)
this.lonLatGridLines.setTextPosition('right')
// 初始化话的时候,触发一次绘制*/
this.lonLatGridLines.drawLonlatTileGrid()
// 添加绘制地图事件(即拖动地图时,清除上一次的图层的同时绘制新的图层)*/
this.lonLatGridLines.addDrawEvent()方法三:
代码地址:https://github.com/cloudybay/leaflet.latlng-graticule
import '@/components/leaflet/leaflet.latlng-graticule.js'
L.latlngGraticule({showLabel: true,opacity: 1,weight: 0.8,color: 'red',font: '20px Verdana',dashArray: [0, 0],lngLineCurved: 0,latLineCurved: 0,zoomInterval: [{start: 2, end: 2, interval: 60},{start: 3, end: 3, interval: 30},{start: 4, end: 4, interval: 15},{start: 5, end: 5, interval: 7.5},{start: 6, end: 6, interval: 4},{start: 7, end: 7, interval: 2},{start: 8, end: 8, interval: 1},{start: 9, end: 9, interval: 0.5},{start: 10, end: 10, interval: 0.25},{start: 11, end: 11, interval: 0.125},{start: 12, end: 12, interval: 0.0625},{start: 13, end: 13, interval: 0.033333333},{start: 14, end: 14, interval: 0.016666666666},{start: 15, end: 15, interval: 0.008333333},{start: 16, end: 16, interval: 0.004166667},{start: 17, end: 17, interval: 0.002083333},{start: 18, end: 18, interval: 0.001041667}]}).addTo(this.map)

台风

相关表sql文件及前端js、vue文件地址:

链接:https://pan.baidu.com/s/1LCUXo2J-WA5eXzZ7fFSLUQ
提取码:9kr5

1、引入
import LayerTyphoon from '@/components/leaflet-typhoon/LayerTyphoon.vue'2、定义
<LayerTyphoon ref="layerTyphoon" :map="map" :dataList="typhoonList"></LayerTyphoon>3、赋值台风数据信息
typhoonList = 台风信息

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/612311.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

期末查分系统(c,链表实现)

主要功能&#xff1a; 分为三个身份: 学生:可以通过学号查询个人分数 老师&#xff1a;可以看所有学生成绩&#xff0c;单科排名&#xff08;正序&#xff0c;倒序&#xff09;&#xff0c;统计绩点&#xff0c;查看绩点排名前百分之n的学生 管理员端&#xff1a;可以创建链…

用React给XXL-JOB开发一个新皮肤(二):目录规划和路由初始化

目录 一. 简述二. 目录规划三. Vite 配置 3.1. 配置路径别名3.2. 配置 less 四. 页面 4.1. 入口文件4.2. 骨架文件4.3. 普通页面 五. 路由配置六. 预览启动 一. 简述 上一篇文章我们介绍了项目初始化&#xff0c;此篇文章我们会先介绍下当前项目的目录规划&#xff0c;接着对…

Magics 教程

文章目录 基本流程基本操作页面的介绍基本操作 基本流程 基本操作 页面的介绍 右侧是工具页&#xff0c;可以直接进行调整&#xff0c;也可以在选项&帮助->自定义用户界面 那里进行相关的调整 基本操作 直接拖动鼠标左键&#xff1a;选中物体鼠标右键&#xff1a; 长按…

JVM工作原理与实战(十二):打破双亲委派机制-自定义类加载器

专栏导航 JVM工作原理与实战 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、打破双亲委派机制的方法 二、自定义类加载器 1.Tomcat自定义类加载器案例 2.自定义类加载器详解 3.案例解析 总结 前言 JVM作为Java程序的运行环境&#xff0c;其负责解释和执…

RAG:让大语言模型拥有特定的专属知识

作为一个在Chatbot领域摸爬滚打了7年的从业者&#xff0c;笔者可以诚实地说&#xff0c;在大语言模型的推动下&#xff0c;检索增强生成&#xff08;Retrieval Augmented Generation&#xff0c;RAG&#xff09;技术正在快速崛起。 RAG的搜索请求和生成式AI技术&#xff0c;为搜…

【教学类-45-06】正确 X-Y之间的三连加减题混合 (竖向排列)(44格:11题“++ ”11题“--”11题“ +-”11题“ -+” )

作品展示&#xff1a; 背景需求&#xff1a; 把以下四款3连题 混在一起&#xff0c;每种题目随机抽取11题&#xff0c;一共44格 出现问题&#xff1a; 1、- 、-里面有重复题 2、升序排列最好竖排展示 素材准备: ​ ​ 问题改正 1、单元格修改&#xff1a;确保竖列写入 …

【Docker项目实战】使用Docker部署nullboard任务管理工具

【Docker项目实战】使用Docker部署nullboard任务管理工具 一、nullboard介绍1.1 nullboard简介1.2 任务看板工具介绍 二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍2.3 注意事项 三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本 四…

C# WPF 数据绑定

需求 后台变量发生改变,前端对应的相关属性值也发生改变 实现 接口 INotifyPropertyChanged 用于通知客户端(通常绑定客户端)属性值已更改。 示例 示例一 官方示例代码如下 using System; using System.Collections.Generic; using System.ComponentModel; using Sys…

K8S容器编排基本使用

Kubernetes容器编排技术基本使用 1.部署模式发展历程 物理单机 – 虚拟机&#xff08;VMware&#xff09;-- IAAS&#xff08;基础设施即服务 比如够买jsp主机模式&#xff09;-- OPENSTACK&#xff08;多个机器分片使用思想&#xff09;-- docker&#xff08;容器化&#xf…

spring boot + mybatis + websocket + js实战

项目技术&#xff1a;spring boot mybatis websocket js 需求背景&#xff1a;当添加一个女孩时&#xff0c;页面的socket收到消息&#xff0c;打印最新的所有女生list&#xff0c;这样可以进一步在react/vue前端框架下&#xff0c;实现当A用户新增了某业务数据后&#xff…

迅为RK3568开发板Android11/12/Linux编译驱动到内核

在平时的驱动开发中&#xff0c;经常需要在内核中配置某种功能&#xff0c;为了方便大家开发和学习&#xff0c;本小 节讲解如何在内核中添加驱动。具体的讲解原理讲解请参考本手册的驱动教程。 Android11 源码如果想要修改内核&#xff0c;可以运行以下命令进行修改: cd ke…

Docker的基本管理

一 Docker概述 1.1 概述 Docker是一个开源的应用容器引擎&#xff0c;基于go语言开发并遵循了apache2.0协议开源。 Docker是在Linux容器里运行应用的开源工具&#xff0c;是一种轻量级的“虚拟机”。 Docker 的容器技术可以在一台主机上轻松为任何应用创建一个轻量级的、可移…

ffmpeg 视频分辨率修改 质量压缩

随着手机像素的提高&#xff0c;拍摄视频也越来越大&#xff0c;10秒的视频动辄 二三十兆&#xff0c;这给视频传输和播放都带来了 诸多不变。一般都需要 前端或或者后端 对视频进行压缩。由于我这边前端是 H5&#xff0c;所以只能后端进行压缩&#xff0c; 采用主流压缩库采用…

centOS系统yum安装和卸载mongodb

0.1 什么是mongodb&#xff1f; 0.2 Mongodb是一个基于分布式文件存储的数据库。由C语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。 0.3 Mongodb是一个介于关系数据库和非关系数据库之间的产品&#xff0c;是非关系数据库当中功能最丰富&#xff0c;最像关系数据…

现代密码学 考点复盘

现代密码学 考点汇总&#xff08;上&#xff09; 写在最前面考试范围一、给一个简单的方案&#xff0c;判断是否cca安全二、随机预言机模型之下的简单应用 考试题目1.证明CBC方案是CPA安全的2. 证明哈希函数的抗碰撞性3. CBC-MAC安全&#xff1a;证明CPA安全的对称密钥加密方案…

简单易懂的PyTorch 损失函数:优化机器学习模型的关键

目录 torch.nn子模块Loss Functions详解 nn.L1Loss 用途 用法 使用技巧 注意事项 代码示例 nn.MSELoss 用途 用法 使用技巧 注意事项 代码示例 nn.CrossEntropyLoss 用途 用法 使用技巧 注意事项 代码示例 使用类别索引 使用类别概率 nn.CTCLoss 用途 …

使用git submodule解决高耦合度问题

引言 在开发我的笔记系统时&#xff0c;我遇到了一个问题。问题是&#xff0c;在api-gate服务中&#xff0c;我需要验证用户的access_code&#xff0c;但是access_code的生成逻辑是在auth2服务中实现的。这个问题从架构设计的层面上看&#xff0c;就是一个高耦合度问题。高耦合…

大数据 - Doris系列《三》- 数据表设计之表的基本概念

目录 &#x1f436;3.1 字段类型 &#x1f436;3.2 表的基本概念 3.2.1 Row & Column 3.2.2 分区与分桶 &#x1f959;3.2.2.1 Partition 1. Range 分区 2. List 分区 进阶&#xff1a;复合分区与单分区的选择 3.2.3 PROPERTIES &#x1f959;3.2.3.1 分片副本数 &#x1f…

《微信小程序开发从入门到实战》学习七十八

6.10 录音API 6.10.2 音频输入源PI 使用wx.getAvaliableAudioSources可获取当前支持的音频输入源&#xff0c;自基础库2.1.0开始支持。示例代码如下&#xff1a; wx.getAvaliableAudioSources({ success(res){ console.log(res.audioSources) } }) res.audioSources是一个数…