ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

ArcGIS API for JavaScript 3.x与Supercluser

2022-07-02 13:15:26  阅读:158  来源: 互联网

标签:count name point type JavaScript ArcGIS API props data


    以前的老项目还用着ArcGIS API for JavaScript 3.x,最近有数据更新要有几十万的数据要展示。
    仔细研究一番,发现ArcGIS API for JavaScript 3.41文档中写着仅限数据中的五万条,多了也不会聚合。
image.png
    看着官方不提供解决方案,我决定找找开源的方案,找到一个ArcGIS API for JavaScript 4.x与Supercluser结合的clusterlayer,不过不是想要的结果,于是我自己开发一个。
先基于supercluster创建数据聚合,一百万数据处理完0-9级聚合大概四秒钟。接着监听地图范围变化,这样就可以
使用FeatureLayer显示

var featureCollection = {
    "layerDefinition": null,
    "featureSet": {
        "features": [],
        "geometryType": "esriGeometryPoint"
    }
};
featureCollection.layerDefinition = {
    "geometryType": "esriGeometryPoint",
    "objectIdField": "CID",
    "drawingInfo": {
        "renderer": {
            "type": "simple",
            "symbol": {
                "color": [79,218,79,255],
                "type": "esriSMS",
                "size":30,
                "style": "esriSMSCircle",
                "outline": {
                    "color": [79,218,79,255],
                    "width": 1,
                    "type": "esriSLS",
                    "style": "esriSLSSolid"
                }
            }
        }
    },
    "fields": [{
        "name": "CID",
        "alias": "CID",
        "type": "esriFieldTypeOID"
    },
        {
            "name": "point_count",
            "alias": "point_count",
            "type": "esriFieldTypeInteger"
        },
        {
        "name": "point_count",
        "alias": "point_count",
        "type": "esriFieldTypeInteger"
    },
        {
            "name": "cluster_id",
            "alias": "cluster_id",
            "type": "esriFieldTypeInteger"
        },
        {
        "name": "point_count_abbreviated",
        "alias": "point_count_abbreviated",
        "type": "esriFieldTypeString"
    }
    ]
};

var popupTemplate = new PopupTemplate({
    title: "{point_count}",
    description: "{point_count_abbreviated}"
});

//create a feature layer based on the feature collection
let monumentLayer = new FeatureLayer(featureCollection, {
    id: 'flickrLayer',
    infoTemplate: popupTemplate
});

worker中请求数据并创建聚合,根据页面信息传递数据


index = new Supercluster({
    log: true,
    radius: 60,
    extent: 256,
    maxZoom: 9,
    minZoom: 0,
    //reduce: (accumulated, props) => { accumulated.sum += props.sum; },
    // properties to use for individual points when running the reducer
    map(props) {
        props.point_count = 1;
        props.point_count_abbreviated = '1';
        return props;
    },
}).load(data.features);


self.onmessage = function (e) {
    if (e.data.getClusterExpansionZoom) {
        postMessage({
            expansionZoom: index.getClusterExpansionZoom(e.data.getClusterExpansionZoom),
            center: e.data.center
        });
    } else if (e.data.bbox) {
        postMessage(index.getClusters(e.data.bbox, e.data.zoom));
    } else if (e.data.tile) {
        postMessage(index.getTile(e.data.tile[0], e.data.tile[1], e.data.tile[2]));
    }
};

image.png

完成效果

cluster (1).gif

参考资料:

https://developers.arcgis.com/javascript/3/jsapi/featurelayer-amd.html#setfeaturereduction

https://github.com/mapbox/supercluster

标签:count,name,point,type,JavaScript,ArcGIS,API,props,data
来源: https://www.cnblogs.com/polong/p/16437077.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有