首页 > 其他分享 >Arcgis api for JS | GraphicsLayer图层生成热力图

Arcgis api for JS | GraphicsLayer图层生成热力图

时间:2023-02-11 02:22:04浏览次数:59  
标签:ratio GraphicsLayer color FeatureLayer 力图 Arcgis api arcgis

ArcGIS API渲染热力图是在FeatureLayer里,怎么渲染呢?

原来热力图有个专门的渲染器:HeatmapRenderer,将样式赋给该渲染器,然后渲染器、点数据等参与FeatureLayer的构造,就可以了。

现在有GraphicsLayer的点图层数据(必须全部是点图形),如何快速转化为热力图图层?

代码如下

// Date:2023-02-11 02:12
// arcgis api version 4.25
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
const createHeatMap = () => {
  //热力图渲染
  let heatmapRenderer = {
    type: "heatmap",
    colorStops: [
      { ratio: 0, color: "rgba(0, 255, 150, 0)" },
      { ratio: 0.6, color: "rgb(250, 250, 0)" },
      { ratio: 0.85, color: "rgb(250, 150, 0)" },
      { ratio: 0.95, color: "rgb(255, 50, 0)" },
    ],
    blurRadius: 10,
    maxPixelIntensity: 10,
    minPixelIntensity: 0,
  };
  let layer = G.map.layers.items[0];// GraphicsLayer点类型图层
  if(!layer)return;
  heatMapLayer = new FeatureLayer({
    source: layer.graphics,
    fields: [
      {
        name: "ObjectID",
        alias: "ObjectID",
        type: "oid",
      },
    ],
    objectIdField: "ObjectID",
    geometryType: "point",
    renderer:heatmapRenderer
  });
  map.add(heatMapLayer)
};

参考文章
arcgis api for js4.x 热力图渲染(vue,支持 点、线、面三种类型)
arcgis js api:热力图
ArcGIS API for Javascript 4.X扩展heatmap.js实现热力图
HeatmapRenderer
官方简单示例

标签:ratio,GraphicsLayer,color,FeatureLayer,力图,Arcgis,api,arcgis
From: https://www.cnblogs.com/echohye/p/17110795.html

相关文章

  • 微信 API 中调用客服消息接口提示错误返回限制
    错误的信息如下:errcode=45015,errmsg=responseoutoftimelimitorsubscriptioniscanceledrid:5f8fd8b7-0f8aa1a9-4b6215a5微信的文档看着这微信不清不楚的文......
  • sqlalchemy_fastapi_demo
    fastapi_sqlalchemy"""SQLAlchemy"""#SQlAlchemyfromsqlalchemyimportColumn,Integer,String,DateTime,func,selectfromsqlalchemy.ormimportdeclarati......
  • 在Flask中构建API接口的相关概念
    在Flask中构建API接口的相关概念重定向行为斜杠以下两个路由的不同之处在于是否使用尾部的斜杠。第一个路由的URL尾部有一个斜杠,看起来就像一个文件夹,访问一个没有斜杠......
  • Apipost参数描述的填写和参数描述库的使用
    请求参数的描述填写对于header、query以及form-data和urlencode的body参数,我们在如下地方填写参数描述:如图中所示,对于一个填写过的参数,我们可以在新建接口可以通过点击参数......
  • 基于Python的天气API
    ██████╗███████╗██████╗██╗██╗███████╗██╔═══██╗██╔════╝██╔══██╗╚██╗██╔╝██╔═══......
  • 执行kubectl api-resources 报错error: unable to retrieve the complete list of ser
    1、故障现象:error:unabletoretrievethecompletelistofserverAPIs:metrics.k8s.io/v1beta1:theserveriscurrentlyunabletohandletherequest2、分析原因......
  • RestTemplate调用天地图api
    代码ClientHttpRequestFactoryrequestFactory=newHttpComponentsClientHttpRequestFactory(HttpClients.createDefault());RestTemplateclient=newRest......
  • Apipost参数描述的填写和参数描述库的使用
    请求参数的描述填写对于header、query以及form-data和urlencode的body参数,我们在如下地方填写参数描述:如图中所示,对于一个填写过的参数,我们可以在新建接口可以通过点击......
  • 企业工商信息数据API接口
    #新人福利#近年来,AI、大数据、智能数字化等新经济领域也开始出现大批初创企业,这些新入局者需要有效对接市场,就此就需要优质的企业工商信息来布局,借力一些大数据工具无疑是......
  • vue3单页抽取api
    编写apiimportaxiosfrom'~/util/axios'constfindByPage=(data)=>{returnaxios.post("/emo/page",data)}constlogin=(data)=>{returnhttp.p......