arcgis api for javascript 点聚合

最新推荐文章于 2024-07-05 14:01:47 发布

kaleid_liner

最新推荐文章于 2024-07-05 14:01:47 发布

阅读量1.9k

点赞数 4

分类专栏： arcgis

本文链接：https://blog.csdn.net/qq_36735409/article/details/79668760

版权

这篇博客介绍了如何使用 ArcGIS API for JavaScript 实现点聚合功能，提供了相关的 HTML 代码示例以及 ClusterLayer.js 的修改版，并分享了包含1000个照片数据的1000-photos.json文件的链接。

摘要由CSDN通过智能技术生成

html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Cluster</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
    <style>
        html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
        #map{ margin: 0; padding: 0; }

        /* center the image in the popup */
        .esriViewPopup .gallery { margin: 0 auto !important; }
    </style>

    <script>
        // helpful for understanding dojoConfig.packages vs. dojoConfig.paths:
        // http://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/
        var dojoConfig = {
            paths: {
                extras: location.pathname.replace(/\/[^/]+$/, "") + "/extras"
            }
        };
    </script>
    <script src="https://js.arcgis.com/3.23/"></script>
    <script>
        var map;
        require([
            "dojo/parser",
            "dojo/ready",
            "dojo/_base/array",
            "esri/Color",
            "dojo/dom-style",
            "dojo/query",

            "esri/map",
            "esri/request",
            "esri/graphic",
            "esri/geometry/Extent",

            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/PictureMarkerSymbol",
            "esri/renderers/ClassBreaksRenderer",

            "esri/layers/GraphicsLayer",
            "esri/SpatialReference",
            "esri/dijit/PopupTemplate",
            "esri/geometry/Point",
            "esri/geometry/webMercatorUtils",

            "extras/ClusterLayer",

            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dojo/domReady!"
        ], function(
                parser, ready, arrayUtils, Color, domStyle, query,
                Map, esriRequest, Graphic, Extent,
                SimpleMarkerSymbol, SimpleFillSymbol, PictureMarkerSymbol, ClassBreaksRenderer,
                GraphicsLayer, SpatialReference, PopupTemplate, Point, webMercatorUtils,
                ClusterLayer
        ) {
            ready(function() {
                parser.parse();

                var clusterLayer;
                var popupOptions = {
                    "markerSymbol": new SimpleMarkerSymbol("circle", 20, null, new Color([0, 0, 0, 0.25])),
                    "marginLeft": "20",
                    "marginTop": "20"
                };
                map = new Map("map", {
                    basemap: "oceans",
                    center: [-117.789, 33.543],
                    zoom: 13
                });

                map.on("load", function() {
                    // hide the popup's ZoomTo link as it doesn't make sense for cluster features
                    domStyle.set(query("a.action.zoomTo")[0], "display", "none");

                    // get the latest 1000 photos from instagram/laguna beach
                    var photos = esriRequest({
                        url: "data/1000-photos.json",
                        handleAs: "json"
                    });
                    photos.then(addClusters, error);
                });

                function addClusters(resp) {
                    var photoInfo = {};
                    var wgs = new SpatialReference({
                        "wkid": 4326
                    });
                    photoInfo.data = arrayUtils.map(resp, function(p) {
                        var latlng = new  Point(parseFloat(p.lng), parseFloat(p.lat), wgs);
                        var webMercator = webMercatorUtils.geographicToWebMercator(latlng);
                        var attributes = {
                            "Caption": p.caption,
                            "Name": p.full_name,
                            "Image": p.image,
                            "Link": p.link
                        };
                        return {
                            "x": webMercator.x,
                            "y": webMercator.y,
                            "attributes": attributes
                        };
                    });

                    // popupTemplate to work with attributes specific to this dataset
                    var popupTemplate = new PopupTemplate({

最低0.47元/天解锁文章

kaleid_liner

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
arcgis api for javascript 点聚合

目录：html代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"&gt;
复制链接

扫一扫

专栏目录