当我们要制作一个热力图层,可以通过以下 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. 自力更生Collections.sort发现比较结果混乱?Comparator的锅还是强转类型导致?

    近日开发任务时间充裕一些,于是有时间回顾一下项目. 我关注到了项目中使用的七牛云的对象存储服务. 作为测试需要上传了一些图片,但七牛的控制台却无法将内容按照上传时间排序或者是按照日期查询,由于buck ...

  2. 使用css实现导航下方线条随导航移动效果

    HTML部分 <ul> <li><a href="">第一条</a></li> <li><a href ...

  3. 云计算 docker 容器使用命令

    docker 使用命令: docker version 查看docker版本号 vi /etc/docker/daemon.json { "registry-mirrors": [ ...

  4. lambda高级查询

    1.什么是lambda表达式:Lambda 表达式,是一种简化的匿名函数,可用于创建委托或表达式目录树.其次,也可以将 Lambda 表达式作为参数进行传递,或者将它作用于函数调用值调用后返回的一个函 ...

  5. vscode发博客插件更新v0.1.0(可能会相对好用点吧)

    距离上一次编写这个vscode在博客园发博客的插件已经过去好久了,那个时候vscode插件的功能也没有那么强大,期间有人提出问题来,也有人提出建议来,我一直没有抽出时间来维护,深感抱歉,直到有人加到我 ...

  6. SpringCloud之Zuul过滤器实现登录鉴权实战(十一)

    自定义zuul过滤器实现登录鉴权实战 1.新建filter包 2.新建类继承ZuulFilter,重写方法 3.在类顶部加注解@Comment让spring扫描 /** * @author WGR * ...

  7. Rest_Framework之频率组件部分

    一.RestFramework之频率组件源码部分 频率组件的源码部分和权限组件流程一模一样的,这里就不多说了,直接上源码的主要逻辑部分: def check_throttles(self, reque ...

  8. leetcode算法小题(3)

    问题描述: 判断一个数是否为回文数 class Solution {      public boolean isPalindrome(int x) {           if(x<0)    ...

  9. 中文预训练模型ERNIE2.0模型下载及安装

    2019年7月,百度ERNIE再升级,发布持续学习的语义理解框架ERNIE 2.0,及基于此框架的ERNIE 2.0预训练模型, 它利用百度海量数据和飞桨(PaddlePaddle)多机多卡高效训练优 ...

  10. Logstash 安装及简单实用(同步MySql数据到Elasticsearch)(Linux)

    1.下载logstash wget https://artifacts.elastic.co/downloads/logstash/logstash-6.6.0.tar.gz 2. 解压logstas ...