Arcgis js api 点聚合

最新推荐文章于 2024-01-18 09:48:46 发布

gis小白的成长之路

最新推荐文章于 2024-01-18 09:48:46 发布

阅读量2.2k

点赞数 3

分类专栏： ARCGIS API 要素转json 文章标签： arcgis api 点聚合 clusterlayer

本文链接：https://blog.csdn.net/qq_36179257/article/details/115376394

版权

ARCGIS API 同时被 2 个专栏收录

21 篇文章 17 订阅

订阅专栏

要素转json

2 篇文章 0 订阅

订阅专栏

先来个效果图：
在这里插入图片描述
实现步骤：
1、获取本地json数据
2、通过json数据配置聚合图层的数据源
3、配置聚合图层的分级渲染效果

注意事项：
有点需要注意的是，直接引用官方API里的ClusterLayer.js会报错，可以把js下到本地，引用时候注意路径即可。
在这里插入图片描述
资源下载，包含聚合模块ClusterLayer.js、测试数据points.json、前端实现代码html。
传送门: 点聚合相关资源下载，下载后可直接运行。

前端实现代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Arcgis API 点聚合</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.35/esri/css/esri.css">
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      font-family: Arial;
    }

    #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      border: 0px dashed black;
      background-color: rgb(0, 38, 48);
    }

  </style>
</head>
<body> 
<div id="map">
</div>
</body>

<!-- 引入ARCGIS API -->
<script src="https://js.arcgis.com/3.35/"></script>
<script type="text/javascript">
  var map
  require([
    "esri/map",
    "esri/request",
    "esri/geometry/webMercatorUtils",
    "ClusterLayer.js",
    "esri/geometry/Point",
    "esri/dijit/PopupTemplate",
    "esri/layers/ArcGISTiledMapServiceLayer",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/PictureMarkerSymbol",
    "esri/renderers/ClassBreaksRenderer",
    "esri/geometry/Extent",
    "dojo/domReady!"
  ], function(
    Map,
    esriRequest,
    webMercatorUtils,
    ClusterLayer,
    Point,
    PopupTemplate,
    ArcGISTiledMapServiceLayer,
    SimpleMarkerSymbol,
    SimpleFillSymbol,
    PictureMarkerSymbol,
    ClassBreaksRenderer,
    Extent
  ) {

    //地图范围
    var mapExtent = new Extent({
      xmax: 113.799760210539,
      xmin: 106.57095767482662,
      ymax: 19.459116202966324,
      ymin: 17.27952992162579,
      spatialReference: {
        wkid: 4326
      }
    })
   
    map = new Map("map", {
      extent: mapExtent,
      sliderStyle: "small",
      logo: false,
    });

    map.on('load', function () {
      map.hideZoomSlider()
      map.hidePanArrows()
      map.disableDoubleClickZoom() //禁用双击缩放
      var photos = esriRequest({ //读取本地json数据
        url: "points.json",
        handleAs: "json"
      });
      photos.then(addClusters); 
    })
    //arcgis 在线地图
    var myTileLayer = new ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");
    map.addLayer(myTileLayer) 
    
    function addClusters(res) { //获取json数据后配置聚合图层
      let data = [] //聚合数据合集
      for (let i = 0; i < res.features.length; i++) {
        let lon = res.features[i].geometry.x
        let lat = res.features[i].geometry.y
        let name = "测试点" + i
        let attributes = { //点的属性
          "name": name,
          "lon": lon,
          "lat": lat
        }
        //因为底图是墨卡托投影坐标系，json数据是wgs84坐标系，需要转换
        let point = new Point(lon, lat)
        let webMercator = webMercatorUtils.geographicToWebMercator(point) //WGS84坐标转换为webMercator投影坐标
        let webPoint = {
          "x": webMercator.x,
          "y": webMercator.y,
          "attributes": attributes
        }  
        data.push(webPoint)
      }
      let popupTemplate = new PopupTemplate({ //弹窗
        "title": "",
        "fieldInfos": [{
          "fieldName": "name",
          "label": "名称:",
          visible: true
        },{
          "fieldName": "lon",
          "label": "经度:",
          visible: true
        },{
          "fieldName": "lat",
          "label": "纬度:",
          visible: true
        }]
      });
      let clusterLayer = new ClusterLayer({
        "data": data, //聚合的数据
        "distance": 100, //聚合距离
        "id": "clusters",
        "labelColor": "#fff", //标注颜色
        "labelOffset": 10, //标注偏移
        "resolution": map.extent.getWidth() / map.width,
        "singleColor": "#888", //单个点颜色
        "singleTemplate": popupTemplate //弹窗
      })
      //分级渲染
      let defaultSym = new SimpleMarkerSymbol().setSize(4); 
      let renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
      let picBaseUrl = "https://static.arcgis.com/images/Symbols/Shapes/";
      let blue = new PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15);
      let green = new PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 64, 64).setOffset(0, 15);
      let red = new PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 72, 72).setOffset(0, 15);
      renderer.addBreak(0, 10, blue);
      renderer.addBreak(10, 50, green);
      renderer.addBreak(50, 101, red);
      clusterLayer.setRenderer(renderer);
      map.addLayer(clusterLayer);
    }
  });
</script>
</html>

gis小白的成长之路

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
4
评论
Arcgis js api 点聚合

先来个效果图：实现步骤：1、获取本地json数据2、通过json数据配置聚合图层的数据源3、配置聚合图层的分级渲染效果注意事项：有点需要注意的是，直接引用官方API里的ClusterLayer.js会报错，可以把js下到本地，引用时候注意路径即可。资源下载，包含聚合模块ClusterLayer.js、测试数据points.json、前端实现代码html。传送门: 点聚合相关资源下载，下载后可直接运行。前端实现代码：<!DOCTYPE HTML PUBLIC "-//W3C//D
复制链接

扫一扫