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

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

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

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

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

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

  1.  var canvas = document.getElementsByTagName('canvas')[0];
  2.  var heatmap = createWebGLHeatmap({
  3.             canvas: canvas,
  4.             intensityToAlpha: true
  5. });
  6. var reforeNode = document.getElementById("map_gc");
  7. document.getElementById("map_layers").insertBefore(heatmap.canvas, reforeNode);





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

    附完整代码

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"/>
  6.     <!--The viewport meta tag is used to improve the presentation and behavior
  7.     of the samples on iOS devices-->
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <title>heatmap.js ArcGIS JavaScript API Heatmap Layer</title>
  10.     <link rel="shortcut icon"
  11.           type="image/png" href="http://www.patrick-wied.at/img/favicon.png"/>
  12.     <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
  13.     <style>
  14.         body, html {
  15.             margin: 0;
  16.             padding: 0;
  17.             width: 99.9%;
  18.             height: 99.9%;
  19.             font-family: Arial;
  20.         }
  22.         #map {
  23.             width: 100%;
  24.             height: 100%;
  25.             margin: 0;
  26.             padding: 0;
  27.             border: 0px dashed black;
  28.             background-color: rgb(0, 38, 48);
  29.         }
  31.     </style>
  32. </head>
  33. <body>
  34. <div id="map">
  36. </div>
  37. </body>
  39. <script src="https://js.arcgis.com/3.24/"></script>
  40. <script type="text/javascript" src="heatmap/webgl-heatmap.js"></script>
  41. <script type="text/javascript">
  42.     var map;
  43.     require([
  44.         "esri/map",
  45.         "dojo/on",
  46.         "dojo/dom",
  47.         "esri/layers/ArcGISTiledMapServiceLayer",
  48.         "esri/tasks/query",
  49.         "esri/tasks/QueryTask",
  50.         "esri/geometry/screenUtils",
  51.         "esri/geometry/Extent",
  52.         "esri/geometry/Point",
  53.         "dojo/domReady!"
  54.     ], function (
  55.         Map,
  56.         on,
  57.         dom,
  58.         ArcGISTiledMapServiceLayer,
  59.         Query,
  60.         QueryTask,
  61.         screenUtils,
  62.         Extent,
  63.         Point
  64.     ) {
  65.         // Variables
  66.         var valueField = 'Focal'
  67.         // get the features within the current extent from the feature layer
  68.         function getFeatures() {
  69.             var q = new Query();
  70.             var url = 'http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Earthquakes_Since_1970/FeatureServer/0'
  71.             var queryTask = new QueryTask(url);
  72.             q.geometry = map.extent;
  73.             q.where = "1=1";
  74.             q.outFields = [valueField ]
  75.             q.orderByFields = [valueField ];
  76.             q.returnGeometry = true
  77.             q.geometryPrecision = 10;
  78.             q.outSpatialReference = map.spatialReference;
  79.             queryTask.execute(q, function (re) {
  80.                 console.log(re.features.length)
  81.                 if (re.features.length) {
  82.                     console.time('end')
  83.                     console.log(re.features)
  84.                     setdata(re.features);
  85.                     console.timeEnd('end')
  86.                 }
  87.             });
  89.         }
  91.         var mapExtent = new Extent({
  92.             xmax:22189975.059293926,
  93.             xmin: -15302081.56646192,
  94.             ymax: 8961447.604325403,
  95.             ymin: -9569334.036901515,
  96.             spatialReference: {wkid: 102100}
  97.         })
  99.         map = new Map("map", {
  100.             basemap: "gray",
  101.             extent: mapExtent,
  102.             sliderStyle: "small",
  103.             logo: false
  104.         });
  106.         map.resize();
  107.         var canvas = document.createElement('canvas');
  108.         canvas.id = "heatLayer";
  109.         canvas.style.zIndex = 99
  110.         canvas.style.position = "absolute";
  111.         canvas.style.width="100%"
  112.         canvas.style.height="100%"
  113.         var heatmap = createWebGLHeatmap({
  114.             canvas: canvas,
  115.             //gradientTexture: 'heatmap-gradient2.png',
  116.             intensityToAlpha: true
  117.         });
  118.         var reforeNode = document.getElementById("map_gc");
  119.         document.getElementById("map_layers").insertBefore(heatmap.canvas, reforeNode);
  120.         var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
  121.             window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  122.         var update = function () {
  123.             //heatmap.addPoint(100, 100, 100, 10/255);
  124.             heatmap.adjustSize(); // can be commented out for statically sized heatmaps, resize clears the map
  125.             heatmap.update(); // adds the buffered points
  126.             heatmap.display(); // adds the buffered points
  128.             raf(update);
  129.         }
  130.         raf(update);
  131.         //getFeatures()
  132.         getFeatures()
  134.         map.on('zoom-end', function (e) {
  135.             getFeatures()
  136.         });
  137.         map.on('zoom-start', function (e) {
  138.             heatmap.clear();
  139.         });
  141.         map.on('pan-start', function (e) {
  142.             heatmap.clear();
  143.         });
  145.         map.on('pan-end', getFeatures);
  147.         map.on('dragstart', function (e) {
  148.             heatmap.clear();
  150.         });
  152.         map.on('dragend', getFeatures);
  154.         map.on('mousewheel', function (e) {
  155.             heatmap.clear();
  156.             getFeatures()
  157.         })
  159.         function setdata(features) {
  160.             var i, da, m, dataPoint, heatmapdata, attributes, screenGeometry
  161.             heatmapdata = []
  162.             da = []
  163.             for (i = 0; i < features.length; i++) {
  164.                 da.push();
  165.             }
  166.             m = features[features.length - 1].attributes[valueField ]
  167.             for (i = 0; i < features.length; i++) {
  168.                 var geo = features[i].geometry.normalize();
  169.                 dataPoint = new Point(geo.x, geo.y, map.spatialReference);
  170.                 attributes = features[i].attributes;
  171.                 var va = attributes[valueField ]
  172.                 //var normalizedExtent = map.extent._normalize();
  173.                 screenGeometry = map.toScreen(dataPoint);
  174.                 //screenUtils.toScreenGeometry(normalizedExtent, map.width, map.height, dataPoint);
  175.                 if (attributes && attributes.hasOwnProperty(valueField )) {
  176.                     heatmapdata.push({
  177.                         x: screenGeometry.x,
  178.                         y: screenGeometry.y,
  179.                         size: 30,
  180.                         intensity: va / m
  181.                     });
  182.                 } else {
  183.                     heatmapdata.push({
  184.                         x: screenGeometry.x,
  185.                         y: screenGeometry.y,
  186.                         size: 30,
  187.                         intensity: 0
  188.                     });
  189.                 }
  190.             }
  191.             heatmap.clear();
  192.             heatmap.addPoints(heatmapdata);
  194.         }
  195.     });
  197. </script>
  198. </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. 基于.net的分布式系统限流组件

    在互联网应用中,流量洪峰是常有的事情.在应对流量洪峰时,通用的处理模式一般有排队.限流,这样可以非常直接有效的保护系统,防止系统被打爆.另外,通过限流技术手段,可以让整个系统的运行更加平稳.今天要与大 ...

  2. Windows安装TensorFlow

    1.下载安装Anaconda 官方地址:https://www.continuum.io/downloads/镜像地址:https://mirrors.tuna.tsinghua.edu.cn/ana ...

  3. CF泛做

    CF Rd478 Div2 A Aramic script 题意:给定几个字符串,去重后,求种类 思路:直接map乱搞 #include<bits/stdc++.h> using name ...

  4. SSM-Spring-18：Spring中aspectJ的XML版

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- aspectJ的xml版是开发中最常用的: 下面直接已案例入手,毕竟繁琐的日子不多了 案例:两个接口,俩个实现 ...

  5. Linux kernel的中断子系统之（九）：tasklet

    返回目录:<ARM-Linux中断系统>. 总结: 二介绍了tasklet存在的意义. 三介绍了通过tasklet_struct来抽想一个tasklet,每个CPU维护一个tasklet链 ...

  6. Volley 图片加载相关源码解析

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/47721631: 本文出自:[张鸿洋的博客] 一 概述 最近在完善图片加载方面的 ...

  7. 跟我学ASP.NET MVC之二：第一个ASP.NET MVC程序

    摘要: 本篇文章带你一步一步创建一个简单的ASP.NET MVC程序.  创建新ASP.NET MVC工程 点击“OK”按钮后,打开下面的窗口: 这里选择“Empty”模板以及“MVC”选项.这次不创 ...

  8. 用secureCRT连接虚拟机中的Ubuntu系统，出现“远程主机拒绝连接”错误

    因为我的Ubuntu中未安装ssh服务,终端下运行命令: sudo apt-get install openssh-server 之后重启一下sshd服务: sudo service sshd res ...

  9. OpenCV-Python学习01

    import tensorflow as tf 1 # -*- coding: utf-8 -*- 2 """ 3 Created on Tue Dec 31 19:16 ...

  10. 【毕业原版】-《贝德福特大学毕业证书》Bedfordhire一模一样原件

    ☞贝德福特大学毕业证书[微/Q:865121257◆WeChat:CC6669834]UC毕业证书/联系人Alice[查看点击百度快照查看][留信网学历认证&博士&硕士&海归& ...