Vue 3 中使用 InMap 绘制热力图

Alt

本文由ScriptEcho平台提供技术支持

项目地址:传送门

Vue 3 中使用 InMap 绘制热力图

应用场景介绍

InMap 是一款强大的地图组件库,它提供了一系列丰富的可视化功能,包括热力图。热力图可以将数据点在地图上以颜色编码的方式可视化,从而直观地展示数据的分布和密度。

代码基本功能介绍

这段代码使用 Vue 3 和 InMap 实现了热力图功能。它加载了必要的 JavaScript 库,并创建了一个 InMap 地图对象。然后,它创建了一个点覆盖层,将数据点渲染为热力图。用户可以单击热力图上的点以获取更多信息。

功能实现步骤及关键代码分析说明

1. 加载 JavaScript 库
const loadJavascript = (jsUrl) => {return new Promise((resolve, reject) => {const script = document.createElement('script')script.type = 'text/javascript'script.onload = () => {console.log('JS脚本加载完成:', jsUrl)resolve()}script.onerror = (err) => {console.error('JS脚本加载失败:', jsUrl)reject(err)}script.src = jsUrldocument.body.appendChild(script)})
}

这段代码使用 Promise 异步加载必要的 JavaScript 库。它创建了一个 script 元素,并为其设置 type、src 和事件处理程序。然后,它将 script 元素添加到 body 元素中,触发加载过程。

2. 创建地图对象
var map = new inMap.Map({center: [105.403119, 38.028658],zoom: {value: 5,show: true,max: 18,min: 5,},id: 'allmap',skin: 'Blueness',zoom: {show: true,},
})

这段代码使用 InMap.Map 构造函数创建一个地图对象。它指定了地图的中心点、缩放级别、皮肤和 ID。

3. 创建点覆盖层
var overlay = new inMap.PointOverlay({tooltip: {show: true,formatter: '{count}',},legend: {show: true,itle: '标题',},style: {normal: {backgroundColor: 'rgba(200, 200, 50, 1)', // 填充颜色shadowColor: 'rgba(255, 255, 255, 1)', // 投影颜色shadowBlur: 35, // 投影模糊级数globalCompositeOperation: 'lighter', // 颜色叠加方式size: 5, // 半径},},data: data.map(function (item, index) {item.name = '散点' + indexitem.count = item.count || indexreturn item}),event: {onMouseClick: function (item, event) {//能获取当前点的信息},},
})

这段代码使用 InMap.PointOverlay 构造函数创建一个点覆盖层。它指定了覆盖层的提示信息、图例、样式和数据。

4. 将覆盖层添加到地图中
map.add(overlay)

这段代码将点覆盖层添加到地图中。

总结与展望

开发这段代码的过程让我对 InMap 的功能有了更深入的了解。我学到了如何使用 InMap 加载 JavaScript 库、创建地图对象、创建点覆盖层以及将覆盖层添加到地图中。

未来,我计划扩展此代码以支持更多功能,例如:

  • 使用不同的数据源

  • 自适应缩放级别

  • 自定义热力图样式

    更多组件:



    获取更多Echos

    本文由ScriptEcho平台提供技术支持

    项目地址:传送门

    扫码加入AI生成前端微信讨论群:

扫码加入群聊

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

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

相关文章

论文阅读_字节的语音生成模型_Seed-TTS

英文名称: Seed-TTS: A Family of High-Quality Versatile Speech Generation Models 中文名称: Seed-TTS:高质量多功能语音生成模型系列 链接: http://arxiv.org/abs/2406.02430v1 代码: https://github.com/BytedanceSpeech/seed-tts-eval (评测工具) 演示网站&am…

找出所有点到一个点的距离的最小值

这个题的看一眼有点像树形dp&#xff0c;但是要怎么去优化我们转移方程呢 这是为什么呢&#xff0c;我们的树形dp很难考虑来之前的答案&#xff0c;那么d[y] 怎么办&#xff0c;我们可以先以1为根计算出以1为根的答案 #define _CRT_SECURE_NO_WARNINGS #include<bits/stdc.…

js 计算小数精度问题 ,引入decimal.js库 解决

安装 npm install --save decimal.js 引入 import Decimal from "decimal.js" 使用 new Decimal function adddDecimals (...decimals) { let sum new Decimal(0) decimals.forEach(decimal > { sum sum.plus(decimal) }) return sum.toNumber() } const res …

HarmonyOS应用开发者基础认证,Next版本发布后最新题库(7.29更新)

判断题 10题 10分 1、在http模块中&#xff0c;多个请求可以使用同一个httpRequest对象&#xff0c;httpRequest对象可以复用。&#xff08;错误&#xff09; 2、订阅dataReceiverProgress响应事件是用来接收HTTP流式响应数据。&#xff08;错误&#xff09; 3、UIAbility是系…

【刷题汇总 -- 笨小猴、 主持人调度(一)、分割等和子集】

C日常刷题积累 今日刷题汇总 - day0251、笨小猴1.1、题目1.2、思路1.3、程序实现 2、主持人调度&#xff08;一&#xff09;2.1、题目2.2、思路2.3、程序实现 3、分割等和子集3.1、题目3.2、思路3.3、程序实现 -- 0/1背包问题 4、题目链接 今日刷题汇总 - day025 1、笨小猴 1…

【MIT 6.5840(6.824)学习笔记】Raft

1 脑裂 许多容错系统使用一个单主节点来决定主副本。 MapReduce&#xff1a;由单主节点控制计算复制。GFS&#xff1a;主备复制数据&#xff0c;并由单主节点确定主拷贝的位置。VMware FT&#xff1a;主虚机和备份虚机之间复制指令&#xff0c;需要单点的Test-and-Set服务确认…

【JavaEE】通过Linux部署Web项目到云服务器上

一.配置部署所需的环境. 1.1 什么是部署? 要想知道什么是部署, 就要先了解我们在日常开发的过程中所设计到的几种环境: 开发环境: 软件开发环境指的是开发人员在创建、测试和部署软件应用程序时所需的一系列硬件、软件、工具和流程的集合。它是为了支持软件开发过程而构建的…

[算法]归并排序(C语言实现)

一、归并排序的定义 归并排序&#xff08;Merge sort&#xff09;是建立在归并操作上的一种有效的排序算法。该算法是采用分治法&#xff08;Divide and Conquer&#xff09;的一个非常典型的应用。 二、归并排序的算法原理 归并排序的算法可以用递归法和非递归法来实现…

python中的类函数和静态函数

在python的类中&#xff0c;存在成员函数、类函数和静态函数。其中成员函数比较好理解&#xff0c;就是在类中普通函数&#xff0c;而类函数和静态化函数可能理解起来有点小难度。 class Dog:DEFAULT_COLOR The color for this dog is {}.def __init__(self, name, age, colo…

Git基本原理讲解、常见命令、Git版本回退、Git抛弃本地分支拉取仓库最新分支、如何将本地文件推送至github、.gitignore文件的使用

借此机会写篇博客汇总一下自己去公司实习之后遇到的一些常见关于Git的操作。 Git基本认识 Git把数据看作是对小型文件系统的一组快照&#xff0c;每次提交更新&#xff0c;或在Git中保存项目状态时&#xff0c;Git主要对当时的全部文件制作一个快照并保存这个快照的索引。同时…

【ROS 最简单教程 002/300】ROS 环境安装 (虚拟机版): Noetic

&#x1f497; 有遇到安装问题可以留言呀 ~ 当时踩了挺多坑&#xff0c;能帮忙解决的我会尽力 &#xff01; 1. 安装操作系统环境 Linux ❄️ VM / VirtualBox Ubuntu20.04 &#x1f449; 保姆级图文安装教程指路&#xff0c;有经验的话 可以用如下资源自行安装 ITEMREFERENCE…

vue3实战(通用后台管理系统)问题总结

npm install less vue-router element-plus -s elementplus 路由引入组件第二种写法&#xff1a; 使用动态的import( )语法(推荐使用)&#xff08;路由懒加载&#xff09; component:()>import(路径)component:()>import(/views/Main.vue)打包之后的文件将会异常的大&a…

PLSQL 无法使用normal模式登录ORACLE

1、确认用户具有连接数据库的权限。可以通过查询DBA_SYS_PRIVS来确认用户是否具有CREATE SESSION权限。 SELECT * FROM DBA_SYS_PRIVS WHERE PRIVILEGE CREATE SESSION AND GRANTEE 用户名; 2、需要DBA授予相应的权限&#xff1a;GRANT CREATE SESSION TO 用户名; 3、测试…

《昇思25天学习打卡营第25天|第28天》

今天是打卡的第二十八天&#xff0c;实践应用篇中的计算机视觉中Vision Transformer图像分类。 从Vision Transformer&#xff08;ViT&#xff09;简介开始了解&#xff0c;模型结构&#xff0c;模型特点&#xff0c;实验的环境准备和数据读取&#xff0c;模型解析&#xff08…

容器对比虚拟机有哪些不足?

引言 在当今的云计算和微服务架构中&#xff0c;容器技术已成为不可或缺的一部分。它以其轻量级、高效和快速部署的特性&#xff0c;赢得了广大开发者和运维人员的青睐。然而&#xff0c;正如任何技术都有其两面性&#xff0c;容器技术也不例外。本文将对容器技术在安全性、隔离…

深入探索PHP框架:Symfony框架全面解析

1. 引言 在现代Web开发领域&#xff0c;PHP作为一种广泛使用的服务器端脚本语言&#xff0c;其框架的选择对于项目的成功至关重要。PHP框架不仅能够提高开发效率&#xff0c;还能确保代码的质量和可维护性。本文将深入探讨Symfony框架&#xff0c;这是一个功能强大且灵活的PHP…

Teamcenter RAC开发,创建Item的两种方式

1、如果描述不必填&#xff0c;采用胖客户端的创建方式 newItem itemType.create(newItemId, "", targetTypeComp.getTypeName(), item_name, // "test1", null, null2、如果描述必填&#xff0c;则需要采用SOA的创…

用PyPDF2库对pdf文件进行操作

目录 基本原理与基础语句PdfReader类PdfWriter类文件写入 对pdf文件进行插入操作对pdf文件进行删除页操作对pdf文件进行分割操作 基本原理与基础语句 PdfReader类 pdf_file PyPDF2.PdfReader(filenmae) 通过PdfReader函数可以读取pdf文件并生成一个PdfReader类 该类具有以下…

C++11中的右值引用以及移动构造等

目录 一、右值引用 1.左值引用和右值引用 2.左值引用与右值引用比较 3.右值引用使用场景和意义 1️⃣ 传返回值 2️⃣ STL中的应用 4.完美转发 模板中的&& 万能引用&#xff08;引用折叠&#xff09; 二、 新的类功能 1.默认成员函数 2.类成员变量初始化 3.…

线程池学习(一)

1.线程池有什么作用 降低资源消耗&#xff1a;通过池化技术重复利⽤已创建的线程&#xff0c;降低线程创建和销毁造成的损耗。 提⾼响应速度&#xff1a;任务到达时&#xff0c;⽆需等待线程创建即可⽴即执⾏。 提⾼线程的可管理性&#xff1a;线程是稀缺资源&#xff0c;如果…