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

    参考了一下网上webgl热力图，能达到更流畅的绘制的要求。(参考webgl-heatmap和heatmap-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. react native 1跳2 2跳3 3跳4 4pop回2

    网上有介绍导航的很多了 就不一一说了   直接说一个小功能 popToRoute pop回指定页面  第一次写 组织能力不是特别好 直接贴代码 例如 我们有四个页面  从第四个pop到第二个页面  先 ...

  2. 树莓派+花生棒+leanote搭建自己的笔记服务器

    背景 对于一个程序猿来说.女朋友可以(暂时)没有,但是不能没有一个很好的记笔记的应用.因为记笔记可以帮助自己积累学习提升自己.每一次回头看自己记得笔记,你都会有新的理解. 也许有人会说,用有道云啊,有 ...

  3. 【转】Fundebug上线微信小游戏错误监控！支持自动截屏！

    摘要: Fundebug竭诚为你的小游戏保驾护航. 想必大家都玩过"跳一跳"吧?刷排行榜的感觉是不是很好啊!还有"知乎答题王"呢,在智力上碾压老铁简直太棒了! ...

  4. 静态成员函数与pthread_create，纯虚函数匹配使用实例

    最近在浏览朋友写的代码,发现有一个细节非常值得学习,在这里将代码贴出来简单分享一下: #ifndef THREAD_H_ #define THREAD_H_ #include <pthread. ...

  5. 影响 MySQL Server 性能的相关因素

    MySQL 最多的使用场景是WEB 应用,那么我们就以一个WEB 应用系统为例,逐个分析其系统构成,进行经验总结,分析出数据库应用系统中各个环境对性能的影响. 商业需求对性能的影响 这里我们就拿一个看 ...

  6. Tiny4412 烧写uboot到emmc步骤

    将uboot写入emmc,并通过EMMC驱动,不在只用SD卡启动 烧写uboot的之前用如下命令查看EMMC卡信息及分区信息: mmcinfo 0: 查看mmc卡信息, 0表示SD卡:1表示emmc卡 ...

  7. java 各数据类型之间的转换

    String —> Date SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");Date ...

  8. .net 工程中引用出现感叹号

    在工程中引用出现感叹号,有两个原因 原因1:  这是由于之前引用的Dll文件不见了. 解决方案: 右键有感叹号的项,然后选择 “属性” 里边有一个路径属性 这个路径就是之前这个Dll文件的路径,现在这 ...

  9. Eclipse报错Resource '/.org.eclipse.jdt.core.external.folders/.link5' already exists.

    Eclipse查看源码出现source not found,重新Build Path选择jdk的jar包时,出现Resource '/.org.eclipse.jdt.core.external.fo ...

  10. 安装python软件找不到setuptools的解决方案

    在新装的centos系统中,用源码安装supervisor提示如下: [root@1e supervisor-3.0]# python setup.py install Traceback (most ...