当我们要制作一个热力图层,可以通过以下 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. windows下cmd组合命令和管道命令

    组合命令:&& 管道命令:|

  2. mac安装MongoDB教程

    目录 介绍 下载安装 方法1 方法2 配置 配置PATH 创建log和data目录 启动 关闭 介绍 基于分布式文件存储的数据库,使用C++编写. 应用最广泛的非关系型数据库(NoSQL). NoSQ ...

  3. MAC idea&eclipse快捷键--笔记

    idea: 1. command+d 删除行 2. command+o 重写父类方法 3. option+command+v  自动补全变量 4. 将普通java项目变成maven项目 在项目名称上点 ...

  4. 史上最骚最全最详细的IO流教程,没有之一!

    目录 1.告白IO流的四点明确 2.File类 1.1 File概述 1.2 构造方法 1.3 常用方法 1.3.1 获取功能的方法 1.3.2 绝对路径和相对路径 1.3.3判断功能的方法 1.3. ...

  5. day27作业

    FTP需求 客户端可以注册登录 client:输入一个login sever:执行login 客户端登陆后可以选择文件夹上传与下载 client:输入一个upload,download sever:执 ...

  6. 函数基础(三) 装饰器\闭包 day 12

    目录 昨日回顾 可变长参数 * ** 函数对象 函数嵌套 名称空间和作用域 今日内容 闭包函数 装饰器 语法糖 装饰器模板 迭代器 昨日回顾 可变长参数 * *形参:接受多余的位置实参 *实参(可迭代 ...

  7. web前端面试题(含答案)

    HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用户所 ...

  8. 关于explorer.exe文件或目录已损坏的问题

    2019-5-8 今天由于断电导致电脑异常关机,就出现了开机后屏幕是黑的,只显示鼠标,然后会有警告:explorer.exe目录或文件已损坏. 网上也有各种解决办法,但是都没有清楚,导致捣鼓了半天,首 ...

  9. JS旋转和css旋转

    js旋转 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <styl ...

  10. SpringCloud配置中心集成Gitlab(十五)

    一 开始配置config服务 config-server pom.xml <dependency> <groupId>org.springframework.cloud< ...