高德地图上绘制热力图的方法

 百度地图和高德地图的JavaScript API都提供了热力图的绘制方法,都是将热力图作为新的图层,叠加到地图上。但是百度地图的经纬度体系与我们的经纬度存在偏差,高德的与我们相符,应当使用高德地图JavaScript API。

因为是JavaScript API,所以地图展示是在网页上的。以高德地图的API使用为例:

在html文件中添加高德地图必须的script,其中第一行的key可以在高德官网免费申请。

准备-入门-教程-地图 JS API 1.4 | 高德地图API准备本章向您介绍使用高德地图JSAPI开发应用之前的一些准备工作。注册账号并申请Key1.首先,注册开发者账号,成为高德icon-default.png?t=N7T8https://lbs.amap.com/api/javascript-api/guide/abc/prepare

https://lbs.amap.com/api/javascript-api/guide/abc/prepare

   <title>热力图</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://webapi.amap.com/maps?v=1.3&key=    898eb************"></script>

 html源码如下:

<!doctype html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>热力图</title><link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/><script src="http://webapi.amap.com/maps?v=1.3&key=	898eb9*******************"></script><script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script><script type="text/javascript" src="http://a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
</head>
<body>
<div id="container"></div>
<div class="button-group"><input type="button" class="button" value="显示热力图" οnclick="heatmap.show()"/><input type="button" class="button" value="关闭热力图" οnclick="heatmap.hide()"/>
</div>
<script>var map = new AMap.Map("container", {resizeEnable:false,center: [121.196087,31.05471],   //华政经纬度zoom: 11});if (!isSupportCanvas()) {alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')}var points =[
{"lat":31.05471,"lng":121.196087,"count":1},
{"lat":31.955631,"lng":121.457741,"count":1},
{"lat":31.993408,"lng":121.45536,"count":1},
{"lat":31.994091,"lng":121.454597,"count":1},
{"lat":31.994202,"lng":121.454788,"count":1},
{"lat":31.894291,"lng":121.46257,"count":1},
{"lat":31.892929,"lng":121.463181,"count":1},
{"lat":31.89317,"lng":121.462479,"count":1},
{"lat":31.969528,"lng":121.372078,"count":1},
{"lat":31.994122,"lng":121.45446,"count":1},
{"lat":31.993881,"lng":121.455231,"count":1},
{"lat":31.005829,"lng":121.452492,"count":1},
{"lat":32.020748,"lng":121.451881,"count":1},
{"lat":31.969421,"lng":121.372124,"count":1},
{"lat":31.994221,"lng":121.45443,"count":1},
{"lat":31.993809,"lng":121.455597,"count":1},
{"lat":31.993809,"lng":121.455597,"count":1},
{"lat":31.994202,"lng":121.454327,"count":1},
{"lat":31.99324,"lng":121.454758,"count":1},
{"lat":31.994221,"lng":121.454338,"count":1},
{"lat":31.992321,"lng":121.456612,"count":1},
{"lat":31.993241,"lng":121.454319,"count":1},
{"lat":31.89801,"lng":121.413247,"count":1},
{"lat":31.898361,"lng":121.415947,"count":1},
{"lat":31.897999,"lng":121.413278,"count":1},
{"lat":31.99371,"lng":121.454964,"count":1},
{"lat":31.993169,"lng":121.454559,"count":1},
{"lat":31.992512,"lng":121.454826,"count":1},
{"lat":31.993889,"lng":121.455231,"count":1},
{"lat":31.99318,"lng":121.455032,"count":1},
{"lat":31.895111,"lng":121.462273,"count":1},
{"lat":31.913422,"lng":121.415283,"count":1},
{"lat":31.993832,"lng":121.455311,"count":1},
{"lat":31.993649,"lng":121.454674,"count":1},
{"lat":31.951908,"lng":121.445137,"count":1},
{"lat":31.912979,"lng":121.415421,"count":1},
{"lat":31.993299,"lng":121.454857,"count":1},
{"lat":31.991989,"lng":121.454826,"count":1},
{"lat":31.912971,"lng":121.415466,"count":1},
{"lat":31.913052,"lng":121.415482,"count":1},
{"lat":31.912979,"lng":121.417778,"count":1},
{"lat":31.891682,"lng":121.463417,"count":1},
{"lat":31.894798,"lng":121.462471,"count":1},
{"lat":31.908428,"lng":121.427,"count":1},
{"lat":31.992981,"lng":121.454773,"count":1},
{"lat":31.99323,"lng":121.455132,"count":1},
{"lat":31.993591,"lng":121.455513,"count":1},
{"lat":31.89323,"lng":121.462997,"count":1},
{"lat":31.89323,"lng":121.462997,"count":1},
{"lat":32.249329,"lng":121.366669,"count":1},
{"lat":32.24934,"lng":121.366768,"count":1},
{"lat":31.991982,"lng":121.454826,"count":1},
{"lat":31.97134,"lng":121.45507,"count":1},
{"lat":31.999599,"lng":121.313296,"count":1},
{"lat":31.993131,"lng":121.454681,"count":1},
{"lat":31.993291,"lng":121.454437,"count":1},
{"lat":31.991989,"lng":121.454826,"count":1},
{"lat":31.890659,"lng":121.463791,"count":1},
{"lat":31.89325,"lng":121.463322,"count":1},
{"lat":31.894981,"lng":121.462181,"count":1},
{"lat":31.891472,"lng":121.463547,"count":1},
{"lat":31.99374,"lng":121.455177,"count":1},
{"lat":31.994202,"lng":121.454613,"count":1},
{"lat":31.977379,"lng":121.437683,"count":1},
{"lat":31.949791,"lng":121.462158,"count":1},
{"lat":31.895088,"lng":121.462219,"count":1},
{"lat":31.993192,"lng":121.455353,"count":1},
{"lat":31.993698,"lng":121.454941,"count":1},
{"lat":31.9921,"lng":121.454437,"count":1},
{"lat":31.89389,"lng":121.462334,"count":1},
{"lat":31.89238,"lng":121.463188,"count":1},
{"lat":31.99419,"lng":121.454514,"count":1},
{"lat":31.993328,"lng":121.455078,"count":1},
{"lat":31.993752,"lng":121.454773,"count":1},
{"lat":31.984779,"lng":121.467529,"count":1},
{"lat":31.890961,"lng":121.463692,"count":1},
{"lat":31.993858,"lng":121.455131,"count":1},
{"lat":31.99202,"lng":121.4552,"count":1},
{"lat":31.993729,"lng":121.455231,"count":1},
{"lat":31.994282,"lng":121.453819,"count":1},
{"lat":31.992649,"lng":121.455009,"count":1},
{"lat":31.99379,"lng":121.45462,"count":1},
{"lat":31.872292,"lng":121.316347,"count":1},
{"lat":31.870731,"lng":121.388618,"count":1},
{"lat":31.864349,"lng":121.377289,"count":1},
{"lat":31.719238,"lng":121.331802,"count":1},
{"lat":30.43782,"lng":121.455002,"count":1},
{"lat":30.03352,"lng":121.715134,"count":1},
{"lat":29.836868,"lng":121.090286,"count":1},
{"lat":30.246021,"lng":121.31308,"count":1},
{"lat":30.815498,"lng":121.230698,"count":1},
{"lat":31.99254,"lng":118.57972,"count":1},
{"lat":31.14229,"lng":121.38549,"count":1},
{"lat":31.993161,"lng":121.454727,"count":1},
{"lat":31.993118,"lng":121.455597,"count":1},
{"lat":31.946231,"lng":121.450321,"count":1},
{"lat":31.932121,"lng":121.45546,"count":1},
{"lat":31.99323,"lng":121.453157,"count":1},
{"lat":31.99295,"lng":121.455719,"count":1},
{"lat":31.99184,"lng":121.454819,"count":1},
{"lat":31.993241,"lng":121.454681,"count":1},
{"lat":31.99287,"lng":121.454742,"count":1},
{"lat":31.9931,"lng":121.455,"count":1},
{"lat":31.992741,"lng":121.455673,"count":1},
{"lat":31.994141,"lng":121.45491,"count":1},
{"lat":31.992229,"lng":121.454903,"count":1},
{"lat":31.99369,"lng":121.455383,"count":1},
{"lat":31.969921,"lng":121.49221,"count":1},
{"lat":31.997921,"lng":121.38343,"count":1},
{"lat":31.992619,"lng":121.453873,"count":1},
{"lat":31.992069,"lng":121.454826,"count":1},
{"lat":31.993679,"lng":121.454529,"count":1},
{"lat":32.065201,"lng":121.432068,"count":1},
{"lat":31.992149,"lng":121.454521,"count":1},
{"lat":31.99315,"lng":121.454559,"count":1},
{"lat":31.993851,"lng":121.45472,"count":1},
{"lat":31.993759,"lng":121.454529,"count":1},
{"lat":31.991508,"lng":121.45636,"count":1},
{"lat":31.993858,"lng":121.454979,"count":1},
{"lat":31.967789,"lng":121.452217,"count":1},
{"lat":31.99387,"lng":121.455193,"count":1},
{"lat":31.994179,"lng":121.454727,"count":1},
{"lat":31.992538,"lng":121.456459,"count":1},
{"lat":31.99382,"lng":121.454651,"count":1},
{"lat":31.994221,"lng":121.454872,"count":1},
{"lat":31.951038,"lng":121.471687,"count":1},
{"lat":31.99416,"lng":121.454552,"count":1},
{"lat":32.005821,"lng":121.457581,"count":1},
{"lat":31.97131,"lng":121.455131,"count":1},
{"lat":31.992691,"lng":121.456352,"count":1},
{"lat":31.99379,"lng":121.455048,"count":1},
{"lat":31.99328,"lng":121.454681,"count":1},
{"lat":31.893532,"lng":121.462914,"count":1},
{"lat":31.994129,"lng":121.455147,"count":1},
{"lat":31.99292,"lng":121.455643,"count":1},
{"lat":31.99292,"lng":121.455643,"count":1},
{"lat":31.99366,"lng":121.454567,"count":1},
{"lat":32.008179,"lng":121.460098,"count":1},
{"lat":31.993721,"lng":121.454727,"count":1},
{"lat":32.044231,"lng":121.280792,"count":1},
{"lat":31.971821,"lng":121.37314,"count":1},
{"lat":31.969509,"lng":121.370231,"count":1},
{"lat":31.993831,"lng":121.454659,"count":1},
{"lat":31.89526,"lng":121.466301,"count":1},
{"lat":31.894329,"lng":121.462463,"count":1},
{"lat":31.893089,"lng":121.46302,"count":1},
{"lat":31.894791,"lng":121.46228,"count":1},
{"lat":31.994221,"lng":121.454521,"count":1},
{"lat":31.89296,"lng":121.463112,"count":1},
{"lat":31.97855,"lng":121.369019,"count":1},
{"lat":31.99416,"lng":121.454102,"count":1},
{"lat":31.99411,"lng":121.454422,"count":1},
{"lat":31.894711,"lng":121.46257,"count":1},
{"lat":31.890781,"lng":121.463707,"count":1},
{"lat":31.994129,"lng":121.454422,"count":1}];//详细的参数,可以查看heatmap.js的文档 http://www.patrick-wied.at/static/heatmapjs/docs.html//参数说明如下:/* visible 热力图是否显示,默认为true* opacity 热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity* radius 势力图的每个点的半径大小   * gradient  {JSON} 热力图的渐变区间 . gradient如下所示* {.2:'rgb(0, 255, 255)',.5:'rgb(0, 110, 255)',.8:'rgb(100, 0, 255)'}其中 key 表示插值的位置, 0-1 value 为颜色值 */var heatmap;map.plugin(["AMap.Heatmap"], function() {//初始化heatmap对象heatmap = new AMap.Heatmap(map, {radius: 15, //给定半径opacity: [0, 0.8]/*,gradient:{0.5: 'blue',0.65: 'rgb(121,211,248)',0.7: 'rgb(0, 255, 0)',0.9: '#ffea00',1.0: 'red'}*/});//设置数据集heatmap.setDataSet({data: points,max: 5});});//判断浏览区是否支持canvasfunction isSupportCanvas() {var elem = document.createElement('canvas');return !!(elem.getContext && elem.getContext('2d'));}
</script>
</body>
</html>

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

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

相关文章

COM初体验——新建文档并写入内容。

我想在程序里和Word交互。老师跟我说不要学COM&#xff0c;因为它已经过时了。但是我不想再把代码移植到C#上面&#xff0c;然后用VSTO——已经用了std::unordered_set&#xff01;因为我使用了Copilot&#xff0c;结合我的思考&#xff0c;写了下面的代码&#xff1a; #impor…

【Langchain Agent研究】SalesGPT项目介绍(四)

【Langchain Agent研究】SalesGPT项目介绍&#xff08;三&#xff09;-CSDN博客 github地址&#xff1a;GitHub - jerry1900/SalesGPT: Context-aware AI Sales Agent to automate sales outreach. 上节课&#xff0c;我们主要介绍了SalesGPT的类属性和它最重要的类方法f…

【教学类-47-01】20240206UIBOT+IDM下载儿童古诗+修改文件名

背景需求&#xff1a; 去年12月&#xff0c;我去了其他幼儿园参观&#xff0c;这是一个传统文化德育教育特色的学校&#xff0c;在“古典集市”展示活动中&#xff0c;小班中班大班孩子共同现场念诵《元日》《静夜思》包含了演唱版本和儿歌念诵版本。 我马上也要当班主任了&a…

微信小程序开发学习笔记《17》uni-app框架-tabBar

微信小程序开发学习笔记《17》uni-app框架-tabBar 博主正在学习微信小程序开发&#xff0c;希望记录自己学习过程同时与广大网友共同学习讨论。建议仔细阅读uni-app对应官方文档 一、创建tabBar分支 运行如下的命令&#xff0c;基于master分支在本地创建tabBar子分支&#x…

Netty Review - 服务端channel注册流程源码解析

文章目录 PreNetty主从Reactor线程模型服务端channel注册流程源码解读入口 serverBootstrap.bind(port)执行队列中的任务 &#xff1a; AbstractUnsafe#register0注册 doRegister() 源码流程图 Pre Netty Review - ServerBootstrap源码解析 Netty Review - NioServerSocketCh…

TCP高频知识点

本篇文章主要讲述一下在面试过程中TCP的高频知识点 1.TCP三次握手流程图: 客户端发送一个SYN&#xff08;同步&#xff09;报文段给服务器&#xff0c;选择一个初始序列号&#xff0c;并设置SYN标志位为1。服务器接收到客户端的SYN报文段后&#xff0c;回复一个ACK&#xff08…

OJ刷题:杨氏矩阵【建议收藏】

看见这个题目&#xff0c;很多人的第一反应是遍历整个数组查找数字&#xff0c;但是这种方法不仅效率低&#xff0c;而且远远不能满足题目要求。下面介绍一种高效的查找方法&#xff1a; 代码实现&#xff1a; #include <stdio.h>int Yang_Find_Num(int arr[][3], int …

steam游戏搬砖项目靠谱吗?有没有风险?

作为一款fps射击游戏&#xff0c;csgo在近几年可谓是火出圈&#xff0c;作为一款全球竞技游戏&#xff0c;深受玩家喜爱追捧&#xff0c;玩家追求的就是公平公正&#xff0c;各凭本事&#xff0c;像其他游戏可能还会有皮肤等装备属性加成&#xff0c;在csgo里面是不存在的。 纯…

K8sGPT 的使用

K8sGPT 介绍 k8sgpt 是一个扫描 Kubernetes 集群、诊断和分类问题的工具。它将 SRE 经验编入其分析器中&#xff0c;并帮助提取最相关的信息&#xff0c;通过人工智能来丰富它。它还可以与 OpenAI、Azure、Cohere、Amazon Bedrock 和本地模型结合使用。 K8sGPT Github 地址 …

Vue插槽

Vue插槽 一、插槽-默认插槽1.作用2.需求3.问题4.插槽的基本语法5.代码示例6.总结 二、插槽-后备内容&#xff08;默认值&#xff09;1.问题2.插槽的后备内容3.语法4.效果5.代码示例 三、插槽-具名插槽1.需求2.具名插槽语法3.v-slot的简写4.代码示例5.总结 四、作用域插槽1.插槽…

安卓价值1-如何在电脑上运行ADB

ADB&#xff08;Android Debug Bridge&#xff09;是Android平台的调试工具&#xff0c;它是一个命令行工具&#xff0c;用于与连接到计算机的Android设备进行通信和控制。ADB提供了一系列命令&#xff0c;允许开发人员执行各种操作&#xff0c;包括但不限于&#xff1a; 1. 安…

在python中JSON数据格式的使用

什么是JSON&#xff1f; JSON是一种数据格式&#xff0c;由美国程序设计师DouglasCrockford创建的&#xff0c;JSON全名是JavaScript Object Notation,由JSON英文全文字义我们可以推敲JSON的缘由&#xff0c;最初是为JavaScript开发的。这种数据格式由于简单好用被大量应用在We…

DS Wannabe之5-AM Project: DS 30day int prep day15

Q1. What is Autoencoder? 自编码器是什么&#xff1f; 自编码器是一种特殊类型的神经网络&#xff0c;它通过无监督学习尝试复现其输入数据。它通常包含两部分&#xff1a;编码器和解码器。编码器压缩输入数据成为一个低维度的中间表示&#xff0c;解码器则从这个中间表示重…

数据库被人破解,删除数据,勒索

事情是这样的&#xff0c;我买了一台服务器自己部署项目玩儿玩儿&#xff0c;我的数据库运行在3306端口&#xff0c;密码没改&#xff0c;就是默认的123456&#xff0c;诡异的事情发生了&#xff0c;用了一段时间之后&#xff0c;数据库突然连接不上了&#xff0c;我一通操作猛…

Python爬虫——解析库安装(1)

目录 1.lxml安装2.Beautiful Soup安装3.pyquery 的安装 我创建了一个社区&#xff0c;欢迎大家一起学习交流。社区名称&#xff1a;Spider学习交流 注&#xff1a;该系列教程已经默认用户安装了Pycharm和Anaconda&#xff0c;未安装的可以参考我之前的博客有将如何安装。同时默…

【开源】SpringBoot框架开发企业项目合同信息系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 合同审批模块2.3 合同签订模块2.4 合同预警模块2.5 数据可视化模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 合同审批表3.2.2 合同签订表3.2.3 合同预警表 四、系统展示五、核心代码5.1 查询合同…

Linux多线程[二]

引入知识 进程在线程内部执行是OS的系统调度单位。 内核中针对地址空间&#xff0c;有一种特殊的结构&#xff0c;VM_area_struct。这个用来控制虚拟内存中每个malloc等申请的空间&#xff0c;来区别每个malloc的是对应的堆区哪一段。OS可以做到资源的精细度划分。 对于磁盘…

嵌入式软件设计入门:从零开始学习嵌入式软件设计

&#xff08;本文为简单介绍&#xff0c;个人观点仅供参考&#xff09; 首先,让我们了解一下嵌入式软件的定义。嵌入式软件是指运行在嵌入式系统中的特定用途软件,它通常被用来控制硬件设备、处理实时数据和实现特定功能。与桌面应用程序相比,嵌入式软件需要具备更高的实时性、…

反无人机系统技术分析,无人机反制技术理论基础,无人机技术详解

近年来&#xff0c;经过大疆、parrot、3d robotics等公司不断的努力&#xff0c;具有强大功能的消费级无人机价格不断降低&#xff0c;操作简便性不断提高&#xff0c;无人机正快速地从尖端的军用设备转入大众市场&#xff0c;成为普通民众手中的玩具。 然而&#xff0c;随着消…

Python算法题集_翻转二叉树

Python算法题集_翻转二叉树 题226&#xff1a;翻转二叉树1. 示例说明2. 题目解析- 题意分解- 优化思路- 测量工具 3. 代码展开1) 标准求解【DFS递归】2) 改进版一【BFS迭代&#xff0c;节点循环】3) 改进版二【BFS迭代&#xff0c;列表循环】 4. 最优算法 本文为Python算法题集…