HeatMap实现过程

最新推荐文章于 2024-09-25 14:12:08 发布

切莫浮沙筑高台

最新推荐文章于 2024-09-25 14:12:08 发布

阅读量4.9k

点赞数

分类专栏： GIS 文章标签： heatmap web gis

本文链接：https://blog.csdn.net/shanhuashuiqing11/article/details/79684148

版权

GIS 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

参考文档

heatm.js
官网
 API
示例
arcgis js
arcgis热力图实现示例

主要实现过程

设置透明度与渐变色是一个关键的地方

Description
This is a custom DynamicMapServiceLayer for Heatmap.js to work with the ArcGIS Javascript API.

Instructions
Include the heatmap.js and heatLayer.js files in your HTML document.
        <script type="text/javascript" src="src/heatmap.js"></script>
        <script type="text/javascript" src="src/heatmap-arcgis.js"></script>

Add a div with an ID to hold he canvas element
<div id="heatLayer"></div>
Create the heatmap with it's settings and assign it to a global variable.
        heatLayer = new HeatmapLayer({
            config: {
                "useLocalMaximum": true,
                "radius": 40,
                "gradient": {
                    0.45: "rgb(000,000,255)",
                    0.55: "rgb(000,255,255)",
                    0.65: "rgb(000,255,000)",
                    0.95: "rgb(255,255,000)",
                    1.00: "rgb(255,000,000)"
                }
            },
            "map": map,
            "domNodeId": "heatLayer",
            "opacity": 0.85
        });

Add the heatLayer to the map.
        map.addLayer(heatLayer);

Now you just need to add data points to the heatmap. In the example above, I am adding features from a feature layer of trees. Here's an example with two features.
        var data = [
            {
                attributes: {},
                geometry: {
                    spatialReference: {wkid: 102100}
                    type: "point"
                    x: -13625078.0408
                    y: 4548494.332400002
                }
            },
            {
                attributes: {},
                geometry: {
                    spatialReference: {wkid: 102100}
                    type: "point"
                    x: -13625078.0408
                    y: 4548494.332400002
                }
            }
        ];

        heatLayer.setData(data);

I created a function that executes on map pan that gets all the features from a featureLayer within the map's extent.
function getFeatures() {
    // set up query
    var query = new esri.tasks.Query();
    // only within extent
    query.geometry = map.extent;
    // give me all of them!
    query.where = "1=1";
    // make sure I get them back in my spatial reference
    query.outSpatialReference = map.spatialReference;
    // get em!
    featureLayer.queryFeatures(query, function (featureSet) {
        var data = [];
        // if we get results back
        if (featureSet && featureSet.features && featureSet.features.length > 0) {
            // set data to features
            data = featureSet.features;
        }
        // set heatmap data
        heatLayer.setData(data);
    });
}

描述
这是一个用于Heatmap.js的自定义DynamicMapServiceLayer，可用于ArcGIS Javascript API。

说明
在HTML文档中包含heatmap.js和heatLayer.js文件。
        <script type =“text / javascript”src =“src / heatmap.js”> </ script>
        <script type =“text / javascript”src =“src / heatmap-arcgis.js”> </ script>

添加一个带ID的div来保存他的画布元素
<div id =“heatLayer”> </ div>
用它的设置创建热图并将其分配给全局变量。
        heatLayer = new HeatmapLayer（{
            配置：{
                “useLocalMaximum”：true，
                “半径”：40，
                “渐变”：{
                    0.45：“rgb（000,000,255）”，
                    0.55：“rgb（000,255,255）”，
                    0.65：“rgb（000,255,000）”，
                    0.95：“rgb（255,255,000）”，
                    1.00：“rgb（255,000,000）”
                }
            }，
            “地图”：地图，
            “domNodeId”：“heatLayer”，
            “不透明度”：0.85
        }）;

将heatLayer添加到地图。
        map.addLayer（heatLayer）;

现在您只需要将数据点添加到热图。在上面的示例中，我将从树的要素图层添加要素。这里有两个功能的例子。
        var data = [
            {
                属性：{}，
                几何：{
                    spatialReference：{wkid：102100}
                    键入：“点”
                    x：-13625078.0408
                    y：4548494.332400002
                }
            }，
            {
                属性：{}，
                几何：{
                    spatialReference：{wkid：102100}
                    键入：“点”
                    x：-13625078.0408
                    y：4548494.332400002
                }
            }
        ]。

        heatLayer.setData（数据）;

我创建了一个在地图上执行的函数，它可以从地图范围内的featureLayer中获取所有要素。
函数getFeatures（）{
    //设置查询
    var query = new esri.tasks.Query（）;
    //只在范围内
    query.geometry = map.extent;
    //给我所有的人！
    query.where =“1 = 1”;
    //确保我将它们还原到我的空间参考中
    query.outSpatialReference = map.spatialReference;
    // 抓住他们！
    featureLayer.queryFeatures（query，function（featureSet）{
        var data = [];
        //如果我们得到结果
        if（featureSet && featureSet.features && featureSet.features.length> 0）{
            //将数据设置为要素
            data = featureSet.features;
        }
        //设置热图数据
        heatLayer.setData（数据）;
    }）;
}