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. 全面认识openstack：OpenStack架构详解

    OpenStack构架知识梳理   OpenStack既是一个社区,也是一个项目和一个开源软件,提供开放源码软件,建立公共和私有云,它提供了一个部署云的操作平台或工具集,其宗旨在于:帮助组织运行为虚拟 ...

  2. Netty中如何写大型数据

    因为网络饱和的可能性,如何在异步框架中高效地写大块的数据是一个特殊的问题.由于写操作是非阻塞的,所以即使没有写出所有的数据,写操作也会在完成时返回并通知ChannelFuture.当这种情况发生时,如 ...

  3. 多个RestTemplate对象示例

    @Configuration public class MyConfiguration { @LoadBalanced 5 @Bean RestTemplate loadBalanced() { re ...

  4. SSM-Spring-22：Spring+Mybatis+JavaWeb的整合

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 众所周知,框架Spring来整合别的框架,但是Mybatis出现的晚,Spring就没有给他提供支持,那怎么办 ...

  5. 如何在Android Studio中指定NDK位置？

    如何在Android Studio中指定NDK位置? 问题描述 NDK已经手工下载解包在本地: D:\Portable\android-ndk-r13b 每次创建支持C++项目时,都提示NDK没配置, ...

  6. Spring Cloud构建微服务架构（二）服务消费者

    Netflix Ribbon is an Inter Process Communication (IPC) cloud library. Ribbon primarily provides clie ...

  7. python 3.6 lxml标准库lxml的安装及etree的使用注意

    据我所知,python 3.5之后的lxml模块里面不再包含etree,那么要怎么解决这个问题呢? lxml模块下的etree函数的使用问题,部分lxml模块不再支持etree方法,因此只能想办法下载 ...

  8. Windows下Pytesser安装

    安装流程   详细步骤 安装PIL 32位机器:去到PIL官网进行安装 64位机器:建议使用Pillow代替PIL,PIL官网的安装包在64位机器下无法找到,安装Pillow也非常简单,使用pip就可 ...

  9. socketWriter.go

    package blog4go import ( "bytes" "fmt" "net" "sync" ) // Soc ...

  10. buffer_pool.go

    package nsqd import (     "bytes"     "sync" ) var bp sync.Pool func init() {    ...