mapboxgl 中热力图的实现以及给热力图点增加鼠标移上 popup 效果

文章目录

    • 概要
    • 效果预览
    • 技术思路
    • 技术细节
    • 小结

概要

本篇文章还是关于最近做到的 mapboxgl 地图展开的。
借鉴官方示例:https://iclient.supermap.io/examples/mapboxgl/editor.html#heatMapLayer

效果预览

请添加图片描述

技术思路

  1. 将接口数据渲染到地图中形成热力图。
  2. 还需要将热力图中渲染的点做鼠标移上显示详情 popup 的效果。

注意:因为热力图本身不可以添加鼠标以上效果,所以还是使用了点,将鼠标以上效果加给点,然后把点的透明度设置为0,大小和热力图中点相同,即可完成上图中效果。

技术细节

  1. 地图的加载不再赘述,之前文章中写到了。
  2. 所需要规范的点数据
    其中point是自定义的,传啥都可以, createPopupStyle 就是生成 popup 的 html
featuresList.push({'type': 'Feature','properties': {...point,'description': that.createPopupStyle(point)},'geometry': {'type': 'Point','coordinates': [Number(point.lng), Number(point.lat)]}})
  1. 新建热力图
/*** 添加热力图*/
createHeatPoints(featuresList) {const that = thisconst map = this.map      let heatMapLayer = new mapboxgl.supermap.HeatMapLayer("heatMap",{"map": map,"id": "heatmap","radius": 50,// 设置图层透明度:(参数方式)"opacity": 0.6,// featureWeight指定以哪个属性值为热力权重值创建热力图:"featureWeight": "value",});let heatPoints = {"type": "FeatureCollection","features": featuresList};heatMapLayer.addFeatures(heatPoints);//        设置图层透明度:(函数方式)//        heatMapLayer.setOpacity(0.5);map.addLayer(heatMapLayer);      
},
  1. 添加透明度为0的点以及鼠标移上效果
/*** 添加坐标点及鼠标移上效果*/
addPoints(featuresList) {      const map = this.mapmap.addSource('places', {'type': 'geojson','data': {'type': 'FeatureCollection','features': featuresList}})// 加载 circle 定位圆let img = {name: 'circle_img',sdf: true}this.addCircleImage(img)map.addLayer({'id': 'places','type': 'symbol','source': 'places','layout': {'icon-image': img.name, // 图标ID'icon-size': 0.4, // 图标的大小// 'icon-size': ['get', 'imgSize'], // 图标的大小'icon-anchor': 'center', // 图标的位置// 'text-field': ['get', 'num'],},'paint': {'text-color': '#333','icon-color': 'rgba(0,0,0,0)'},});// Create a popup, but don't add it to the map yet.const popup = new mapboxgl.Popup({closeButton: false,closeOnClick: false});map.on('mouseenter', 'places', (e) => {// Change the cursor style as a UI indicator.map.getCanvas().style.cursor = 'pointer';// Copy coordinates array.const coordinates = e.features[0].geometry.coordinates.slice();const description = e.features[0].properties.description;// Ensure that if the map is zoomed out such that multiple// copies of the feature are visible, the popup appears// over the copy being pointed to.while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;}// Populate the popup and set its coordinates// based on the feature found.popup.setLngLat(coordinates).setHTML(description).addTo(map);});map.on('mouseleave', 'places', () => {map.getCanvas().style.cursor = '';popup.remove();});
},
  1. 引入图片使用方法
    注意:vue中引入图片要使用require引入,路径不能以传参的形式传入,最好写相对路径。不然都会报错。
/**
* 引入图片* img obj : name, sdf*/
addCircleImage(img) {const map = this.mapmap.loadImage(require('./circle.png'), (error, image) => {if (error) throw error;if (!map.hasImage(img.name)) map.addImage(img.name, image, {sdf: img.sdf || false});})
}

小结

本方法主要还是使用点和热力图重叠同时显示效果。

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

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

相关文章

Postman使用

Postman使用 Pre-request Script 参考: Scripting in Postman 可以请求、集合或文件夹中添加Pre-request Script,在请求运行之前执行JavaScript 如设置变量值、参数、Header和正文数据,也可以使用Pre-request Script来调试代码&#xff0…

RabbitMQ核心概念记录

本文来记录下RabbitMQ核心概念 文章目录 什么叫消息队列为何用消息队列RabbitMQ简介RabbitMQ基本概念RabbitMQ 特点具体特点包括 Rabbitmq的工作过程RabbitMQ集群RabbitMQ 的集群节点包括Rabbit 模式大概分为以下三种单一模式普通模式镜像模式 本文小结 什么叫消息队列 消息&am…

数据的价值:隐藏在数字背后的巨大财富

在当今数字化的时代,数据已经成为了一种宝贵的资源,它的价值被越来越多的人所认识。数据不仅可以帮助企业更好地了解市场和消费者,提高决策的准确性,还可以为社会带来更多的便利和创新。企业、组织和个人可以利用数据来更好地了解…

告别封号风险,海外社媒多账号如何运营?

相信作海外社媒运营的小伙伴都知道,想要管理好一个甚至多个社交媒体帐户,需要精力漫长的养号期,投入大量的金钱精力区保证每个账号的安全。但是,还是会有概率导致封号,从而白费力气。接下来让我们深入探讨营销人员面临…

安全生产人员定位系统助企业实现智能化管理,提高生产安全性和效率

安全生产人员定位系统是基于物联网技术的系统,通过集成各种传感器和通信技术,实时监测员工的位置和活动状态。该系统可以帮助企业管理者了解员工的工作状态,及时发现潜在的安全隐患,从而采取相应的措施,保障员工的安全…

<JavaEE> TCP 的通信机制(四) -- 流量控制 和 拥塞控制

目录 TCP的通信机制的核心特性 五、流量控制 1)什么是“流量控制”? 2)如何做到“流量控制”? 3)“流量控制”的作用 六、拥塞控制 1)什么是“拥塞控制”? 2)如何做到“拥塞…

C# 让数据保留小数后两位,不足的补充0

在C#中,可以使用Math.Floor、Math.Ceiling或者Math.Round方法结合字符串格式化来实现小数点后两位的保留,并在不足的情况下补充0。 以下是一个例子: double value 1.2345; string formattedValue value.ToString("0.00"); // 输…

C#/WPF 只允许一个实例程序运行并将已运行程序置顶

使用用互斥量(System.Threading.Mutex)&#xff1a; 同步基元&#xff0c;它只向一个线程授予对共享资源的独占访问权。在程序启动时候&#xff0c;请求一个互斥体&#xff0c;如果能获取对指定互斥的访问权&#xff0c;就职运行一个实例。 实例代码&#xff1a; /// <…

python/pytorch读取数据集

MNIST数据集 MNIST数据集包含了6万张手写数字&#xff08;[1,28,28]尺寸&#xff09;&#xff0c;以特殊格式存储。本文首先将MNIST数据集另存为png格式&#xff0c;然后再读取png格式图片&#xff0c;开展后续训练 另存为png格式 import torch from torch.utils.data impor…

gRPC-Go基础(2)protobuf基础

文章目录 0. 简介1. Message2. Message中的字段3. 枚举类型4. Map类型5. Oneof类型6. Any类型7. Struct类型 0. 简介 前面讲过protobuf工具protoc的使用&#xff0c;本章我们将简单介绍一下protobuf的语法和相关细节。 1. Message protobuf实际上是一套类似于Json或者XML的数…

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

6.4 交互API 6.4.3 操作菜单API 使用wx.showActionSheet接口可以显示操作菜单&#xff0c;该接口接受Object参&#xff0c;该参属性如下&#xff1a; itemList&#xff1a;string[],数组的每一项代表一个菜单选项&#xff0c;最多支持6个选项 itemColor&#xff1a;按钮的文…

开源项目推荐:Frooodle/Stirling-PDF

简介一个本地的处理 PDF 的工具&#xff0c;界面是 Web UI&#xff0c;可以支持 Docker 部署。各种主要的 PDF 操作都可以支持。比如拆分、合并、转换格式、重新排列、添加图片、旋转、压缩等等。这个本地托管的网络应用最初完全由 ChatGPT 制作&#xff0c;后来逐渐发展&#…

2023 年中国金融级分布式数据库市场报告:TiDB 位列领导者梯队,创新能力与增长指数表现突出

近日&#xff0c;沙利文联合头豹研究院发布了中国数据库系列报告之《2023 年中国金融级分布式数据库市场报告》。 报告认为&#xff0c;金融行业对于分布式数据库信任度与认可度正在逐步提高&#xff0c;中国金融级分布式数据库市场正处于成熟落地的高增长阶段&#xff0c;行业…

Flink项目实战篇 基于Flink的城市交通监控平台(上)

系列文章目录 Flink项目实战篇 基于Flink的城市交通监控平台&#xff08;上&#xff09; Flink项目实战篇 基于Flink的城市交通监控平台&#xff08;下&#xff09; 文章目录 系列文章目录1. 项目整体介绍1.1 项目架构1.2 项目数据流1.3 项目主要模块 2. 项目数据字典2.1 卡口…

Python+OpenCV 零基础学习笔记(1):anaconda+vscode+jupyter环境配置

文章目录 前言相关链接环境配置&#xff1a;AnacondaPython配置OpenCVOpencv-contrib:Opencv扩展 Notebook:python代码笔记vscode配置配置AnacondaJupyter文件导出 前言 作为一个C# 上位机&#xff0c;我认为上位机的终点就是机器视觉运动控制。最近学了会Halcon发现机器视觉还…

云计算:OpenStack 配置二层物理网卡为三层桥的接口

目录 一、理论 1.OpenStack 二、实验 1. Linux系统修改网卡 2.OpenStack 配置二层物理网卡为三层桥的接口 一、理论 1.OpenStack &#xff08;1&#xff09;概念 OpenStack是一个开源的云计算管理平台项目&#xff0c;是一系列软件开源项目的组合。由NASA(美国国家航空…

IntelliJ IDEA Apache Dubbo,IDEA 官方插件正式发布!

作者&#xff1a;刘军 最受欢迎的 Java 集成开发环境 IntelliJ IDEA 与开源微服务框架 Apache Dubbo 社区强强合作&#xff0c;给广大微服务开发者带来了福音。与 IntelliJ IDEA 2023.2 版本一起&#xff0c;Jetbrains 官方发布了一款全新插件 - Apache Dubbo in Spring Frame…

Qt sender()函数

sender函数原型&#xff1a; QObject *sender() const; 如果在由信号激活的插槽中调用该函数&#xff0c;返回指向发送信号的对象的指针&#xff0c;否则返回0&#xff0c;该指针仅在从该对象的线程上下文调用此函数的槽执行期间有效。 主要代码如下&#xff1a; 其中运用了Q…

创建springboot项目

SpringBoot 就相当于不需要配置文件的SpringSpringMVC。 常用的框架和第三方库都已经配置好了。 maven安装配置 管理项目依赖库的 maven的安装教程网上有很多&#xff0c;这里简单记录一下。 官网下载maven后并解压。 在其目录下添加一个目录repository 然后在conf目录下…

学习笔记 k8s常用kubectl命令

k8s常用kubectl命令 pod 相关强制删除pod查看 Pod 中指定容器的日志pod 扩容 etcd 备份集群设置集群上下文配置文件切换集群 节点cordondrain pod 相关 强制删除pod pod 状态terminal了&#xff0c;需要强制删除 kubectl delete pod <pod_name> --grace-period0 --force…