ArcGIS Js Api 3.x 热力图在数据量达到三万左右的时候,绘制速度不尽人意,数据量再大些,缩放时候就会很卡,非常影响客户体验。

    参考了一下网上webgl热力图,能达到更流畅的绘制的要求。(参考webgl-heatmapheatmap-layer-js)webgl热力图使用很简单,只需要把屏幕坐标和权重设置到好就行,如下示例

heatmap.addPoints([{x:x, y:y, size:size, intensity:intensity}]);

    依靠这个插件进行下热力图扩展,热力图插件和地图绑定首先要将地图坐标点转换出屏幕坐标就好了,设置好事件去联动请求数据。

var dataPoint = new Point(geo.x, geo.y, map.spatialReference);
screenGeometry = map.toScreen(dataPoint);

    绑定好数据还要做的就是将热力图的画布元素放入合适位置(整好叠在地图上,尺寸一致),不影响地图本身操作。

 var canvas = document.getElementsByTagName('canvas')[0];
var heatmap = createWebGLHeatmap({
canvas: canvas,
intensityToAlpha: true
});
var reforeNode = document.getElementById("map_gc");
document.getElementById("map_layers").insertBefore(heatmap.canvas, reforeNode);





    写好了扩展,生成十万的随机数据进行测试,与自带的热力图进行一下对比。自带热力图: 435.635ms;webgl热力图扩展:126.260ms。说明webgl速度更快,同时使用过程不存在地图卡顿,性能提升显著

    附完整代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"/>
<!--The viewport meta tag is used to improve the presentation and behavior
of the samples on iOS devices-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>heatmap.js ArcGIS JavaScript API Heatmap Layer</title>
<link rel="shortcut icon"
type="image/png" href="http://www.patrick-wied.at/img/favicon.png"/>
<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
<style>
body, html {
margin: 0;
padding: 0;
width: 99.9%;
height: 99.9%;
font-family: Arial;
} #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0px dashed black;
background-color: rgb(0, 38, 48);
} </style>
</head>
<body>
<div id="map"> </div>
</body> <script src="https://js.arcgis.com/3.24/"></script>
<script type="text/javascript" src="heatmap/webgl-heatmap.js"></script>
<script type="text/javascript">
var map;
require([
"esri/map",
"dojo/on",
"dojo/dom",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/geometry/screenUtils",
"esri/geometry/Extent",
"esri/geometry/Point",
"dojo/domReady!"
], function (
Map,
on,
dom,
ArcGISTiledMapServiceLayer,
Query,
QueryTask,
screenUtils,
Extent,
Point
) {
// Variables
var valueField = 'Focal'
// get the features within the current extent from the feature layer
function getFeatures() {
var q = new Query();
var url = 'http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Earthquakes_Since_1970/FeatureServer/0'
var queryTask = new QueryTask(url);
q.geometry = map.extent;
q.where = "1=1";
q.outFields = [valueField ]
q.orderByFields = [valueField ];
q.returnGeometry = true
q.geometryPrecision = 10;
q.outSpatialReference = map.spatialReference;
queryTask.execute(q, function (re) {
console.log(re.features.length)
if (re.features.length) {
console.time('end')
console.log(re.features)
setdata(re.features);
console.timeEnd('end')
}
}); } var mapExtent = new Extent({
xmax:22189975.059293926,
xmin: -15302081.56646192,
ymax: 8961447.604325403,
ymin: -9569334.036901515,
spatialReference: {wkid: 102100}
}) map = new Map("map", {
basemap: "gray",
extent: mapExtent,
sliderStyle: "small",
logo: false
}); map.resize();
var canvas = document.createElement('canvas');
canvas.id = "heatLayer";
canvas.style.zIndex = 99
canvas.style.position = "absolute";
canvas.style.width="100%"
canvas.style.height="100%"
var heatmap = createWebGLHeatmap({
canvas: canvas,
//gradientTexture: 'heatmap-gradient2.png',
intensityToAlpha: true
});
var reforeNode = document.getElementById("map_gc");
document.getElementById("map_layers").insertBefore(heatmap.canvas, reforeNode);
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var update = function () {
//heatmap.addPoint(100, 100, 100, 10/255);
heatmap.adjustSize(); // can be commented out for statically sized heatmaps, resize clears the map
heatmap.update(); // adds the buffered points
heatmap.display(); // adds the buffered points raf(update);
}
raf(update);
//getFeatures()
getFeatures() map.on('zoom-end', function (e) {
getFeatures()
});
map.on('zoom-start', function (e) {
heatmap.clear();
}); map.on('pan-start', function (e) {
heatmap.clear();
}); map.on('pan-end', getFeatures); map.on('dragstart', function (e) {
heatmap.clear(); }); map.on('dragend', getFeatures); map.on('mousewheel', function (e) {
heatmap.clear();
getFeatures()
}) function setdata(features) {
var i, da, m, dataPoint, heatmapdata, attributes, screenGeometry
heatmapdata = []
da = []
for (i = 0; i < features.length; i++) {
da.push();
}
m = features[features.length - 1].attributes[valueField ]
for (i = 0; i < features.length; i++) {
var geo = features[i].geometry.normalize();
dataPoint = new Point(geo.x, geo.y, map.spatialReference);
attributes = features[i].attributes;
var va = attributes[valueField ]
//var normalizedExtent = map.extent._normalize();
screenGeometry = map.toScreen(dataPoint);
//screenUtils.toScreenGeometry(normalizedExtent, map.width, map.height, dataPoint);
if (attributes && attributes.hasOwnProperty(valueField )) {
heatmapdata.push({
x: screenGeometry.x,
y: screenGeometry.y,
size: 30,
intensity: va / m
});
} else {
heatmapdata.push({
x: screenGeometry.x,
y: screenGeometry.y,
size: 30,
intensity: 0
});
}
}
heatmap.clear();
heatmap.addPoints(heatmapdata); }
}); </script>
</html>

小贴士:开启大数据量绘制需要修改webgl-heatmap.js中的this.maxPointCount值(默认是10240),这样就可以为所欲为了。。。

ArcGIS JS 3.x使用webgl绘制热力图的更多相关文章

  1. 如何用webgl(three.js)搭建不规则建筑模型,客流量热力图模拟

    本节课主要讲解如何用webgl(three.js)搭建一个建筑模型,客流量热力图模拟 使用技术说明: 这里主要用到了three.js,echart.js以及一些其它的js 与css技术,利用webso ...

  2. 基于ArcGIS JS API的在线专题地图实现

    0 引言     专题地图是突出而深入的表示一种或几种要素或现象,即按照地图主题的要求,集中表示与主题有关内容的地图.专题地图的专题要素多种多样,分类方法也多种多样,根据专题地图表现数据的特点可分为定 ...

  3. ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测

    一.开篇 在博客注册了三年,今天才决定写第一篇博客,警告自己不要懒!!! 二.关于ArcGIS JS 版本选择 在写这篇博客时ArcGIS JS 4.0正式版已经发布.它和3.x版本的不同是,Map不 ...

  4. 利用javascript和WebGL绘制地球 【翻译】

    利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...

  5. geoserver图层属性查询及查询结果转换为arcgis js api能使用的格式

    一个项目使用了ArcGIS JS API开发GIS展示层,但GIS服务使用了Geoserver,这时加载Geoserver数据和查询数据就和之前完全不一样了,以下介绍下我使用ArcGIS JS API ...

  6. WebGL 绘制Line的bug(二)

    上一篇文章简单介绍了WebGL绘制Line的bug,不少朋友给我发了私信,看来这个问题大家都遇上过哈.今天这篇文章会讲述解决这个问题的work around. 基本思路 上一篇文章结尾简单提了下解决的 ...

  7. ArcGIS JS 学习笔记3 实现百度风格的BubblePopup

    1. 开篇 模仿是最好的学习,这次我们继续山寨百度,通过自定义Infowindow来实现百度风格的BubblePopup 2.准备 2.1 Copy模板 先打开百度地图,按下f12吧BubblePop ...

  8. ArcGIS JS Demo

    最近在用 ArcGIS 写了一个Demo 效果如下: 1. 引用 ArcGIS JS API arcgis_js_api/init.js 2. 引用 样式 arcgis_js_api/js/esri/ ...

  9. WebGL绘制有端头的线

    关于WebGL绘制线原理不明白的小伙伴,可以看看我之前的文章WebGL绘制有宽度的线.这一篇我们主要来介绍端头的绘制,先看效果图. 端头一般被称为lineCap,主要有以下三种形式: butt最简单等 ...

随机推荐

  1. C语言 > 数组和指针

    C语言 数组和指针 const: 关于指针和const需要注意一些规则.首先,把const数据或非const数据的地址初始化为指向const的指针或为其赋值是合法的. 然而,只能把非const数据的地 ...

  2. C Primer Plus 第6章 C控制语句:循环 编程练习

    记录下写的最后几题. 14. #include <stdio.h> int main() { double value[8]; double value2[8]; int index; f ...

  3. Maven学习(三)-- 使用Maven构建项目

    摘自:http://www.cnblogs.com/xdp-gacl/p/4240930.html maven作为一个高度自动化构建工具,本身提供了构建项目的功能,下面就来体验一下使用maven构建项 ...

  4. JS方法:数字转换为千分位字符

    /** * 数字转为千分位字符 * @param {Number} num * @param {Number} point 保留几位小数,默认2位 */ function parseToThousan ...

  5. 向Oracle数据库插入中文乱码解决方法

    解决方法:    第一步:sqlplus下执行:select userenv('language') from dual;//查看oracle字符集     注:如果oracle字符集与后台代码设置的 ...

  6. Linux时间子系统之二:Alarm Timer

    一.前言 严格来讲Alarm Timer也算POSIX Timer一部分,包含两种类型CLOCK_REALTIME_ALARM和CLOCK_BOOTTIME_ALARM.分别是在CLOCK_REALT ...

  7. 在Windows下同时安装Python2.x和Python3.x

    前言: Python现在是两个版本共存,Python2.x和Python3.x都同时在更新.但是Python2.x和Python3.x的区别还是很多的(以后我可能会写一篇文章列举一下Python2.x ...

  8. 【转】linux系统中如何进入退出vim编辑器,方法及区别

    在linux家族中,vim编辑器是系统自带的文本编辑器,其功能强大自不必说了. 偶有小白,刚接触linux,要修改某个文本文件,不可能像WINDOWS那样操作,更有甚者,进入VI编辑器后,无法退出以致 ...

  9. HTML5 CSS3 诱人的实例 :canvas 模拟实现电子彩票刮刮乐

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的, ...

  10. 通过jenkins持续集成 github中的代码到 服务器。

    前言 最近自己在探索springboot框架,了解到 jenkins 具有 自动我github 上带项目部署到 tomcat 中.于是决定先搭建一个jenkins 环境在继续研究. Jenkins简介 ...