当我们要制作一个热力图层,可以通过以下 3 步来实现:

引入类

在 require 中需引入

"esri/layers/FeatureLayer",
"esri/renderers/Renderer",

在 function 中加入

FeatureLayer,
Renderer,

新建热力图层

新建图层函数,包含了图层属性定义以及渲染器。

heatmFeaLayers = function(){
    //热力图渲染器
    var heatmapRenderer = new esri.renderer.HeatmapRenderer({
        colorStops: [
            {ratio: 0.45, color: "rgba(000,000,255,0)"},
            {ratio: 0.55, color: "rgb(000,255,255)"},
            {ratio: 0.65, color: "rgb(000,255,000)"},
            {ratio: 0.95, color: "rgb(255,255,000)"},
            {ratio: 1.00, color: "rgb(255,000,000)"},
        ],  
        blurRadius: 10,
        maxPixelIntensity: 10,
        minPixelIntensity: 1
    });
    var layerDefinition = {
        "geometryType": "esriGeometryPoint",
        "fields": [{
            "num": "num",
            editable: true,
            nullable: true,
            "type": "esriFieldTypeInteger",
            "alias": "数量"
        }]
    };
    var featureCollection = {
        layerDefinition: layerDefinition,
        featureSet: null
    };
    //创建 FeatureLayer 图层
    var featureLayer = new esri.layers.FeatureLayer(featureCollection, {
        mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
        outFields: ["*"],
        opacity: .8
    });
    //设置渲染方式
    featureLayer.setRenderer(heatmapRenderer);
    return featureLayer;
}

新建图层的时候就可以直接使用我们上面写好的函数。

heatmapfeatureLayer_1 = heatmFeaLayers();
map.addLayer(heatmapfeatureLayer_1);

将点添加至图层的图形中

将坐标制作为几何点加入图层中即可,可使用代码:

var point = new esri.geometry.Point(x, y, new esri.SpatialReference({wkid: 4326}));
heatmapfeatureLayer_1 .add(new esri.Graphic(point));

以上 3 步即可实现向地图中增加一个热力图层。

ArcGIS API For Javascript:新增热力图层的方法的更多相关文章

  1. ArcGIS api for javascript——动态创建图层列表

    描述 本例循环地图服务里的所有图层并增加每个图层到一个带checkbox的列表,checkbox能设置图层的显示或隐藏.动态创建列表的优势是所有的图层都会包含在列表中,即使服务器管理员删除或增加了图层 ...

  2. ArcGIS API for JavaScript(2)-ArcGIS Server发布要素图层服务

    1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...

  3. 转:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述

    原文地址:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述 ArcGIS JavaScript API允许在地图上绘制graphic(图形) ...

  4. arcgis api for JavaScript _加载三维图层(scene layer)

    arcgis api for JavaScript _加载三维图层(scene layer) arcgis api for JavaScript  4.x 版本增加对三维的支持. 关于三维图层(sce ...

  5. ArcGIS API For Javascript :读取 CSV 文件的方法

    我们临时会遇到一些测试数据,通常从数据库中以 CSV 格式导出.最简单实用的方法就是使用 ajax 去读取文件,记得引入 jQuery . 例如,在<ArcGIS JS API :新增一个热力图 ...

  6. 基于ArcGIS API for Javascript的地图编辑工具

    最近工作上需要用ArcGIS API for Javascript来开发一个浏览器上使用的地图编辑工具,分享一下一些相关的开发经验. 我开发的地图编辑工具是根据ESRI提供的例子修改而来的,参考的例子 ...

  7. ArcGIS API for JavaScript介绍

    ArcGIS API for JavaScript中的类是按照模块组织的,主要包含esri.esri/geometry.esri/renderers.esri/symbols.esri/symbols ...

  8. ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译

    内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...

  9. ArcGIS API for JavaScript FeatureLayer服务属性编辑

    首先说一下感想吧,刚入行时感觉深似海,掉到了GIS开发的陨石大坑里了,首先是学了小半年的Flex,用到了ArcGIS API for Flex,接着又是半年的ArcEngine开发,现在终于摸到了一点 ...

随机推荐

  1. opencv::霍夫变换-直线

    霍夫直线变换介绍 Hough Line Transform用来做直线检测 前提条件 – 边缘检测已经完成 平面空间到极坐标空间转换 对于任意一条直线上的所有点来说,变换到极坐标中,从[0~360]空间 ...

  2. Tomcat 的单机多实例配置

    有时候需要在一个服务器上部署多个Tomcat,通过不同的端口进行区分,比如,反向代理.但是不想简单的通过复制Tomcat来实现,这样既不方便以后的升级也不方便管理,那么这时候就需要配置Tomcat的单 ...

  3. HDU 1276 士兵队列训练问题(队列)

    题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=1276 题目: 士兵队列训练问题 Time Limit: 2000/1000 MS (Java/Othe ...

  4. 小程序预览pdf文件

    有个业务需求,需要在小程序查看客户已开的发票 发票地址: https://www.chinaeinv.com/p.jspa?cxxxxxxxxxxxx 刚开始是想利用webview当作外链进行跳转访问 ...

  5. Python的Argparse模块是什么?

            近日在阅读代码的过程中遇到了Argparse模块,记得前段时间已经看了,可是过了两周现在又忘了, 看来写代码一定要钻研到底搞清楚其中原委才行,本文主要参考Python3.6系列官方文档 ...

  6. FreeSql 已支持 .NetFramework 4.0、ODBC 访问

    FreeSql 开源发布快一年了,目前主仓库代码量 64118 行,用 git 命令统计的命令如下: find . "(" -name "*.cs" " ...

  7. Java基础(42)AbstractSet类

    AbstractSet类的子类有HashSet(其子类是LinkedHashSet).EnumSet.TreeSet 1.HashSet public class HashSet<E> e ...

  8. (二)AS给button添加点击事件

    三种方法给Button添加点击事件 (一)通过button的id,添加继承View.OnClickListener的监听实现 <Button android:id="@+id/btn_ ...

  9. Unity混合天空盒

    对于不同天气下天空盒的实现. 天空盒时通过天空盒材质更改实现的,新建材质,选择shader/skybox/6sided,然后添加六个天空盒贴图就可以实现天空盒,如果想实现天气变化则需要至少两套贴图,并 ...

  10. django-模板之with标签(十二)

    就是给传过来的值取个别名.