arcgis api for js 生成热点图

效果图

因为底图是蓝色的 没有改颜色 可能看不太清
在这里插入图片描述
首先声明一个GraphicLayer的图层,图层是客户端类型图层,与ArcGIS Server发布的图层没有任何联系,利用发布的图层生成热力图可以参考这篇然后生命工具类 Draw,根据点选的不同进行绘画,然后将绘画的图形进行渲染即可

主要代码
var data=[
                { x: "116.88739", y: "37.07553"},
                { x: "116.91090", y: "36.69125"},
                { x: "116.84069", y: "37.05630"},
                { x: "116.79400", y: "36.95468"},
                { x: "116.76379", y: "36.78988"},
                { x: "116.89288", y: "36.76791"},
                { x: "116.95605", y: "36.79537"},
                { x: "117.30238", y: "36.72474"},
                { x: "117.30238", y: "36.72474"},
                { x: "117.30238", y: "36.72474"},
                { x: "117.14282", y: "36.95674"},
                { x: "117.14282", y: "36.95674"},
                { x: "116.99862", y: "36.95262"},
                { x: "117.08377", y: "36.96223"},
                { x: "116.94232", y: "36.63195"},
                { x: "116.81735", y: "37.02609"},
                { x: "116.97528", y: "36.64981"},
                { x: "117.04943", y: "37.04188"},
                { x: "117.08377", y: "36.96223"},
                { x: "117.14282", y: "36.95674"},
                { x: "117.08377", y: "36.96223"},
                { x: "117.12222", y: "37.03295"},
                { x: "117.12222", y: "37.03295"},
                { x: "117.12222", y: "37.03295"},
                { x: "117.17715", y: "37.29663"},
                { x: "116.69109", y: "36.79409"},
                { x: "117.12285", y: "36.67474"},
                { x: "117.12285", y: "36.67474"},
                { x: "116.86816", y: "36.80293"},
                { x: "116.93408", y: "36.78919"},
                { x: "117.00823", y: "36.78233"},
                { x: "117.07237", y: "36.68769"},
                { x: "117.12334", y: "36.67321"},
                { x: "117.06148", y: "36.65346"}
            ]
		 var showHeatMap=function(arr) {
                    var layerDefinition = {
                        "geometryType": "esriGeometryPoint",
                        "fields": [{
                            "name": "xxx",  //字段名称xxx
                            "type": "esriFieldTypeInteger"  //字段数据类型
                          }   //可以在数组里添加多个字段
                        ]
                    };
                    var featureCollection = {
                        "layerDefinition": layerDefinition,
                        "featureSet": {
                            "features": null,
                            "geometryType": "esriGeometryPoint" //FeatureLayer只能添加一种geometry,GraphicsLayer可以添加多种
                        }
                    };
                    var heatMapLayer = new FeatureLayer(featureCollection, {
                        mode: FeatureLayer.MODE_SNAPSHOT,
                        outFields: ["*"],
                        opacity: 1
                    });
                    heatMapLayer['id'] = "heatMap";
                   map.addLayer(heatMapLayer);
                    var heatmapRenderer = new HeatmapRenderer({
                       colorStops: [
                           { ratio: 0, color: "rgba(0, 0, 255,0)" },
                           { ratio: 0.5, color: "rgb(0, 0, 255)" },
                           { ratio: 0.7, color: "rgb(255, 0, 255)" },
                           { ratio: 0.9, color: "rgb(255, 0, 0)" }],
                       blurRadius: 8,
                       maxPixelIntensity: 100,
                       minPixelIntensity: 0,
                   });


                    for (let i = 0; i < arr.length; i++) {
                        var x = parseFloat(arr[i].x);
                        var y = parseFloat(arr[i].y);
                        var point = new Point(x, y, map.spatialReference);
                        let g = new Graphic(point, null, { xxx: i }, null);
                        heatMapLayer.add(g);
                    }
                   heatMapLayer.setRenderer(heatmapRenderer);
                }
启动
 showHeatMap(data);
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gis_KG

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值