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

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

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

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

代码如下

// Date:2023-02-11 02:12
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
官方简单示例
ArcGIS API For JavaScript官方文档之热力图渲染

posted @   槑孒  阅读(390)  评论(5编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
点击右上角即可分享
微信分享提示