Vue项目中使用Mapbox完成GIS可视化

2023-11-01

1.项目准备

首先准备好Vue项目,然后安装mapbox依赖:

npm install --save mapbox-gl

项目结构:
在这里插入图片描述

首先需要引用mapbox的css样式,虽然在index.html里面直接引用cdn也有效果,但是不建议直接修改index.html,后面会出现很多路径问题
推荐的方法是:首先将css样式下载到本地,然后再需要使用mapbox的组件里import样式:

@import "assets/css/mapboxgl.css";
@import "assets/css/mapboxgl2.css";

或者:

@import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css')

为了方便维护mapbox相关代码,推荐将绘图的代码单独封装在js文件中导出使用:

import * as mapdrawer from "../assets/js/drawMapFigure";

2.mapbox初始化

mapbox官网api文档:api文档
在mapbox的绘图js文件中,需要使用mapboxgl对象的时候,手动导入mapboxgl对象:

需要注意的是:在vue项目中,js配置文件中无法使用import语句来导入mapbox或者echarts之类的,原因是因为node文件中暂时还不支持import/export语法。正确方式是使用require语句进行引用。

在这里插入图片描述
然后再组件的mounted方法里添加对地图的初始化,和相关的数据请求和绘图,就完成了地图的简单可视化:
在这里插入图片描述
在切换路由时通常需要清除地图的资源,由于mapbox的remove方法是异步操作,所以在vue的beforeUnmounted或者beforeDestroy的生命周期函数中无法达到清除完资源再跳转的目的。解决的方法是使用beforeRouteLeave函数,监听路由跳转,等到地图销毁执行完成后再跳转:
在这里插入图片描述

3.绘制网络图

为了提升绘制效率,将网络图拆分成节点图层和边图层,绘制的时候首先添加边图层再添加节点图层。
边的绘制采用绘制geo路径的方法,但是只设置两个点。参考官网示例:添加 GeoJSON 线
官网的方式只能一次绘制一条线,为了批量绘制,这里我们将dataSource替换成FeatureCollection
在这里插入图片描述
然后再使用mapbox的addSource方法添加数据源,addLayer添加边图层,在自定义边的宽度等属性的时候,可以使用get语法来获取原数据中的properties属性,例如:

"line-width": ["get", "link_width"],

绘制节点图层的方式和边类似,最终的效果如下:
在这里插入图片描述

4.节点的点击实时变色效果

捕获地图上的点击事件方法可以参考官网示例:点击弹窗
通过e.features属性可以获取当前点击对象的数据属性,例如坐标和properties等。想要实现多选和双击取消效果,就必须要给每个节点设置一个状态属性,通过检测当前状态来决定是变色操作还是还原颜色。
为了记录节点的颜色状态同时保存节点的原始颜色,我们可以在节点数据的properties里额外添加一个original_color属性记录节点的原始颜色。通过比较当前颜色与原始颜色是否一致就能够判断当前节点的选中状态,从而决定点击事件的具体操作。
节点数据样例:
在这里插入图片描述
经过测试,mapbox的图层数据与图层不是动态绑定的,也就是说获取并修改当前节点的颜色并不能改变图层上节点的颜色,网上查阅了几篇博客发现可以使用setData方法更新数据同时动态更新图层。

https://blog.csdn.net/qq_40696108/article/details/109765643
http://cn.voidcc.com/question/p-qbhkyoki-bma.html

其中,queryRenderedFeatures方法获取到的数据对象其实和e.features是相同的,不过e.features只能获取到当前对象的部分数据。setData方法传入的参数需要完整的geo类型的数据,也就是只能一次更新图层的全部数据。为了实现更新当前对象的同时保留其他节点的改变状态,理论上在每一次点击事件后,都应该去获取上一次被修改图层的数据,然后修改当前选中对象,再次更新数据。

我们知道设置图层的数据源方法是addSource,对应的获取图层数据源的方法是getSource,通过map.getSource("data_id")._options.data获取到的数据就是相同格式的图层的数据源。每次修改数据前先获取图层数据,然后再更新。逻辑上是没有问题的,但是实际测试的时候发现使用setData更新数据后再使用getSource获取到的数据是没有经过修改的数据。官方文档没有详细的说明,个人猜测addSource方法添加的数据是一次性的,setData不能修改addSource方法添加的数据。

不过有了思路换一种方式缓存数据就能实现,我们可以在data中缓存图层数据并在更新图层的时候同步修改数据,始终保持数据与图层的同步。

5.地图窗口滑动效果

在做GIS可视化时,地图视图跳转快速定位以及路线的实时追踪是非常常见的业务需求。实现的核心方法是flyTo,基本参数及案例参见官网。
https://docs.mapbox.com/mapbox-gl-js/example/flyto-options/

// This can be any easing function: it takes a number between
// 0 and 1 and returns another number between 0 and 1.
easing: (t) => t,

其中这个easing参数里的t表示的是镜头飞行的进度,可以用于监听飞行事件以及触发自定义事件。不过有一点需要注意的是这个flyTo是一个异步事件,在执行这个事件时地图的loaded状态为false,因此如果在这个事件之后写带有map.on("load",()=>{})之类的事件时不会执行的。

为了实现飞行结束马上绘制相关的图形,就需要监听地图的事件执行状态,经过测试上述的easing函数不能完成这个功能,因为在easing中的t为1时,地图的loaded仍然为false。查阅了很多文章,发现地图还有一个idle状态,可以通过监听该状态完成此项功能。

在渲染完地图最后一帧并进入“空闲(idle)”状态之后触发,“空闲(idle)”状态是指:
无运行中的相机转换
所有即时请求的切片已加载完毕
所有淡入淡出/过渡动画都已完成

6.鹰眼地图(小地图)

用户在放大地图或者切换定位时很容易丢失地理位置的全局概念,这时就需要有一个鹰眼地图实时显示用户当前浏览的区域在全局地图的位置状况,同时也可以使用鹰眼地图控制浏览的地图窗口。
鹰眼地图的原理其实就是再次创建一个mapbox的地图实例,通过监听关联绑定的父地图上的缩放和窗口移动事件来同步小地图的状态。具体实现十分复杂,github上有成熟的实现就不造轮子了。
详情参见相关源码:
mapbox中添加鹰眼
minMap 源码
源代码中的Minmap是通过将构造函数绑定到mapbox对象上进行托管的,这样在使用时还要考虑mapbox的引用顺序,耦合性太强,为了便于在vue项目中使用,我把源码中的构造函数使用es6的模块化进行导出,然后在创建地图的时候再统一的导入和使用。
小地图二次封装源码
使用方法:
首先导入minmap:

import Minimap from "./mapboxgl-control-minimap"
const mapboxgl = require("mapbox-gl");
mapboxgl.Minimap = Minimap;

初始化创建地图后,再实例化小地图,同时将小地图的实例对象绑定到地图的实例对象上,便于统一访问,同步更新视图

// 绑定小地图
  let min_map = initMapAndMinMap(map);
  //将小地图的实例对象绑定到地图的实例对象上
  map.min_map = min_map._miniMap;

初始化小地图工厂函数:

/**
 * 初始化小地图
 * map:小地图需要绑定的父地图实例对象
 */
function initMapAndMinMap(map) {
  let m_map = new mapboxgl.Minimap({
    center: [118.127193, 24.491097],
    zoom: 10.6,
    width: "370px",
    height: "350px",
    style: ""
  })
  // 将小地图绑定到父地图,同时指定位置
  map.addControl(m_map, 'bottom-right');
  return m_map;
}

小地图和原始地图的创建方式相同,都可以传入初始化参数控制样式和属性,可以覆盖的样式属性如下:

{
	//小地图的div id
  id: "mapboxgl-minimap",
  // 小地图初始宽高
  width: "320px",
  height: "180px",
  //地图风格
  style: "mapbox://styles/mapbox/streets-v8",
  //地图的初始展示经纬度中心
  center: [0, 0],
  //缩放等级
  zoom: 6,

  // should be a function; will be bound to Minimap
  zoomAdjust: null,

  // if parent map zoom >= 18 and minimap zoom >= 14, set minimap zoom to 16
  zoomLevels: [
    [18, 14, 16],
    [16, 12, 14],
    [14, 10, 12],
    [12, 8, 10],
    [10, 6, 8]
  ],
// 小地图边框样式
  lineColor: "#08F",
  lineWidth: 1,
  lineOpacity: 1,

  fillColor: "#F80",
  fillOpacity: 0.25,
// 交互操作开关
  dragPan: false,
  scrollZoom: false,
  boxZoom: false,
  dragRotate: false,
  keyboard: false,
  doubleClickZoom: false,
  touchZoomRotate: false
}

由于小地图也是mapbox的实例对象,因此我们可以通过获取小地图的实例对象,在小地图上调用和父地图相同的绘制函数,可以实现同步绘制网络或者轨迹等等。

7.绘制带箭头的路线

原理和代码参见:绘制轨迹箭头
效果:
在这里插入图片描述

To be continued…

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue项目中使用Mapbox完成GIS可视化 的相关文章

  • 统计指定数字的个数

    编写函数统计指定数字的个数 前言 学习python的日常 提示 以下是本篇文章正文内容 下面案例可供参考 题目 本题要求实现一个统计整数中指定数字的个数的简单函数 CountDigit number digit 其中number是整数 di
  • webstorm中怎么搜索文件

    Ctrl N 文件搜索 Ctrl SHIFT R 关键字搜索

随机推荐

  • windows搭建ftp服务器、抓取虚拟机数据包、局域网流量监听

    先保证三台主机在同一局域网下 可以相互ping通 控制面板 gt 程序 gt 程序和功能 gt 启用或关闭windows功能 Web管理工具也要选上 进入管理工具 配置登录用户的权限 访问成功 使用kali登录ftp服务器 用户名 anon
  • MySQL服务器断电无法启动处理过程

    问题描述 2021 09 14 09 02 42 f24 InnoDB Operating system error number 1117 in a file operation InnoDB Some operating system
  • SpringBoot之统一返回格式与统一异常处理

    文章目录 导入Jar包 配置统一结果返回 配置全局异常处理 效果测试 在任何接口返回数据时 正确的返回格式 code 状态码 data 数据 message 接口响应信息 一般接口需要的就是这三个数据 code 200 data succe
  • WEB项目中出现The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved in ei问题的解决方法

    web项目出现如上问题 据查是版本问题 JSTL 1 0 的声明是 JSTL1 1 的声明是 项目中 已经是 jstl 1 2 版本了 页面中也全部是用这种方式 javaee5之后就只有 jstl jar 这一个jar包了 没有standa
  • FLASH:一种高效的Transformer设计

    背景 近年来 Transformer凭借其优秀的设计 在文本 图像 语音等方向大杀四方 但是由于其attention的二次复杂度限制了其在长序列上的应用 本文提出了一种快 速度快 省 省显存 的模型FLASH Fast Linear Att
  • Allegro 干货知识分享--如何在Allegro中添加泪滴

    背景介绍 有时候在PCB绘制完成后需要对PCB进行添加泪滴的操作 添加泪滴的作用主要是 信号传输时平滑阻抗 减少阻抗的急剧跳变 避免高频信号传输时由于线宽突然变小而造成反射 焊接时可以保护焊盘 避免多次焊接时焊盘的脱落 生产时可以避免蚀刻不
  • Java与C#比较,哪个语言更是适合你?

    Java与C 比较 哪个语言更是适合你 先来说一说Java和c 的一些语言细节上的区别 第1个方面是数据类型方面 c 支持nullable数据类型 而Java不支持 c 支持指针类型 而Java不支持 c 支持无符号整形型 而Java不支持
  • 给一串字符串,打乱字符串顺序

    import java util Random public class Pratice 给一串字符串 打乱字符串顺序 修改字符串有两个思路 1 subString 2 字符数组 public static void main String
  • 4.0寸86盒显示屏调试(三)

    读取了个把星期也没读取出正确的ID号 最终放弃了读取 考虑是不是液晶屏根本没有输出功能 在使用SPI驱动以后 也没有显示白屏或者任何可以让人感觉驱动正确的现象 最终也放弃了在SPI上搞出个现象 转而使用RGB协议直驱 但还是没有结果 最后还
  • 百奥赛图财报解读:CRO业务枝繁叶茂,“千鼠万抗”遍地生花

    命运对勇士说 你无法抵御风暴 勇士回应 我就是风暴 这段对话是对中国创新药行业最好的诠释 回顾中国创新药近十年高速发展期 上千家创新药公司先后诞生 行业被资本推动一路 狂飙 根据医药魔方数据 创新药一级市场报道的融资额从2013年的36亿元
  • 计算机毕业设计-基于SSM的音乐播放器管理系统

    项目摘要 随着社会的发展 计算机的优势和普及使得音乐播放器管理系统的开发成为必需 音乐播放器管理系统主要是借助计算机 通过对首页 音乐推荐 付费音乐 论坛信息 个人中心 后台管理等信息进行管理 减少管理员的工作 同时也方便广大用户对个人所需
  • openGL增强表面细节--高度贴图

    openGL系列文章目录 文章目录 openGL系列文章目录 前言 一 高度贴图原理 二 代码实现 1 c 主程序 2 着色器程序 运行效果 源码下载 前言 现在我们扩展法线贴图的概念 从纹理图像用于扰动法向量到扰乱顶点位置本身 实 际上
  • 深度学习环境配置5——windows下的torch-cpu=1.2.0环境配置

    深度学习环境配置5 windows下的torch cpu 1 2 0环境配置 注意事项 一 2021 10 8更新 学习前言 各个版本pytorch的配置教程 环境内容 环境配置 一 Anaconda安装 1 Anaconda的下载 2 A
  • SystemServer启动服务

    一 启动流程 SystemServer的在Android体系中所处的地位 SystemServer由Zygote fork生成的 进程名为system server 该进程承载着framework的核心服务 startSystemServe
  • 超强语义分割算法!基于语义流的快速而准确的场景解析

    论文地址 https arxiv org abs 2002 10120 代码地址 https github com donnyyou torchcv 该论文提出了一种有效且快速的场景解析方法 通常 提高场景解析或语义分割性能的常用方法是获得
  • C语言图形库——EasyX基本贴图

    在C语言的学习过程中 接触最多的就是黑乎乎的DOS窗口 这也是在消磨学习者的兴趣 学到最后可能还不知道C语言到底能做什么 难道就是输入输出数据吗 当然不是 C的用处很广泛 这里不做讨论 我们能不能用C语言做些好玩的东西 当然可以 我们可以做
  • 玩转oled屏(基于SPI协议)

    玩转OLED屏 一 简介 一 SPI协议简介 二 OLED简介 二 OLED滚动显示长字符 一 常用OLED滚屏命令 1 水平左 右移 2 垂直和水平移动 二 取字模 三 OLED屏滑动演示 三 OLED显示温湿度 总结 一 简介 一 SP
  • 爬虫漫游指南:加速乐__jsl_clearance破解

    爬虫漫游指南 JS破解之加速乐 本文会介绍加速乐cookie中的 jsl clearance的生成方式 纯粹技术讨论 如果侵害到任何人的利益 请联系本人邮箱yu haojia foxmail com 会立刻删除 如何识别加速乐 使用加速乐的
  • @RefreshScope工作原理

    本文主要从两个层次来分析 RefreshScope 1 加了 RefreshScope注解的bean是如何注入到IOC容器中的 2 触发 RefreshScope后IOC容器是如何工作的 注 本文不讨论 RefreshScope是如何触发的
  • Vue项目中使用Mapbox完成GIS可视化

    1 项目准备 首先准备好Vue项目 然后安装mapbox依赖 npm install save mapbox gl 项目结构 首先需要引用mapbox的css样式 虽然在index html里面直接引用cdn也有效果 但是不建议直接修改in