react项目arcgis地图初始化以及点聚合按实体状态分类实现

准备工作

首先，要初始化arcgis地图就需要地图api和地图服务，地图api大家可以去我的gitee下载:arcgisapi_3.2（开源的）
下载后是这样的，如图所示:

可以发现，里面既有api文档，也有其他文件，ConfigTool.exe我们后面会用到，另外两个markdown不用管。
地图服务推荐网址：点击前往
点进去自己选一个就行

nginx代理

为什么要用nginx代理呢，那是因为api文件过大，不适合放进项目里。
圆规正传，上图：

没错，arcgis-api就是我用git拉取的api文件夹，我放在了D盘，你们随意放，nginx的用法我这里就不说了，因为这篇文章不是介绍nginx的。
server {
listen 7877;
server_name localhost;

    charset utf-8;

    location / {
		root  "D:\\acgisdemo";
    }
    error_page   500 502 503 504  /50x.html;
}

配置api文件

还记得上面我提到的ConfigTool.exe工具吗，现在正是用它的时候了，首先打开工具，一路点确定不用管，然后你会看到以下界面：

按照我的方法去配置，如图所示：

为什么要配置这个呢？因为api里默认的是127.0.0.1，不配置的话在其他的同一个局域网的电脑访问就会报错，总之这么配就对了。

开始初始化

现在开始初始化：
下面展示一些 内联代码片。

// 首先把css引入，我是在public文件夹下的index.html下引入的
<script>
      var link;
      var css1 = 'http://'+window.location.hostname+':7877/arcgis_js_api/3_2/dijit/themes/tundra/tundra.css';
      //7877是nginx开的端口
      var css2 = 'http://'+window.location.hostname+':7877/arcgis_js_api/3_2/esri/css/esri.css';
      var cssArr = [css1,css2];
      var head = document.getElementsByTagName('head')[0];
      for (var i=0;i<cssArr.length;i++){
   
        link = document.createElement('link');
        link.type='text/css';
        link.rel = 'stylesheet';
        link.href = cssArr[i];
        head.appendChild(link);
      }
    </script>

//其次要在用到地图的js/jsx文件引进模块
import esriLoader from 'esri-loader'

//最后初始化地图
const mapURL = {
   
      url : "http://"+window.location.hostname+":7877/arcgis_js_api/3_2/init.js"
    };
    var myMap,clusterLayer;
esriLoader.loadModules([
      "esri/map", "esri/toolbars/draw",
      "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol","esri/symbols/PictureMarkerSymbol","esri/geometry/Point","esri/layers/GraphicsLayer",
      "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", "esri/SpatialReference","esri/InfoTemplate",
      "esri/graphic","esri/geometry/Extent",
      "dojo/_base/Color", "dojo/dom", "dojo/on", "esri/request", "dojo/_base/array","esri/renderers/ClassBreaksRenderer","esri/geometry/webMercatorUtils","ClusterLayer", "esri/dijit/PopupTemplate","dojo/domReady!"
    ], mapURL).then(([Map,Draw,SimpleMarkerSymbol,SimpleLineSymbol,PictureMarkerSymbol,Point,GraphicsLayer,PictureFillSymbol,CartographicLineSymbol,SpatialReference,InfoTemplate,Graphic,Extent,Color,dom,on,esriRequest,arrayUtils,ClassBreaksRenderer,webMercatorUtils,ClusterLayer,PopupTemplate])=>{
   
      myMap = new Map("acgisMap",{
   
        zoom: 10//地图层级
      });
      //地图服务是我上面给出的网址里选的，大家随意选
      var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer");
      myMap.addLayer(myTiledMapServiceLayer);
    });

效果如图 ：

实现点聚合

我这里连着初始化，一起把代码贴上来吧

/**
   * 
   * @param {地图服务} mapServer 
   * @param {坐标系编号，访问地图服务地址，一般里面会写清楚，我这里用的是102100，WGS 1984 Web-Mercator坐标系} coordinates 
   * @param {初始化中心点经度} centerLon 
   * @param {初始化中心点纬度} centerLat 
   * @param {初始化地图层级} dZoom 
   * @param {这个是判断是否有不在线摄像机的标志，没有此需求的不必关心这个} flag 
   */
  initAcgisMap:function(mapServer,coordinates,centerLon,centerLat,dZoom,flag){
   
    //api
    const mapURL = {
   
      url : "http://"+window.location.hostname+":7877/arcgis_js_api/3_2/init.js"
    };
    var myMap,webMercator,clusterLayer;
    var photoInfo = [];
    esriLoader.loadModules([
      "esri/map", "esri/toolbars/draw",
      "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol","esri/symbols/PictureMarkerSymbol","esri/geometry/Point","esri/layers/GraphicsLayer",
      "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", "esri/SpatialReference","esri/InfoTemplate",
      "esri/graphic","esri/geometry/Extent",
      "dojo/_base/Color", "dojo/dom", "dojo/on", "esri/request", "dojo/_base/array","esri/renderers/ClassBreaksRenderer","esri/geometry/webMercatorUtils","ClusterLayer", "esri/dijit/PopupTemplate","dojo/domReady!"
    ], mapURL).then(([Map,Draw,SimpleMarkerSymbol,SimpleLineSymbol,PictureMarkerSymbol,Point,GraphicsLayer,PictureFillSymbol,CartographicLineSymbol,SpatialReference,InfoTemplate,Graphic,Extent,Color,dom,on,esriRequest,arrayUtils,ClassBreaksRenderer,webMercatorUtils,ClusterLayer,PopupTemplate])=>{
   
      myMap = new Map("acgisMap",{
   
        zoom: dZoom
      });
      var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(mapServer);
      myMap.addLayer(myTiledMapServiceLayer);
      //点击地图上摄像机时触发
      dojo.connect(myMap, "onClick", showCoordinatesAndAddPoint);
      //改变地图层级开始时触发
      dojo.connect(myMap, "onZoomStart", function(anchor,extent,zoomFactor,level){
   
        startZoom = level;
      });
      //改变地图层级结束时触发
      dojo.connect(myMap, "onZoomEnd", function(anchor,extent,zoomFactor,level){
   
        if(startZoom > level){
   
          isCluster = true;
        }
        if(!isCluster){
   
          return;
        }
        clusterLayer.changeExtentEvent();
      });
      //地图初始化完成后触发
      dojo.connect(myMap, "onLoad",function() {
   
        if(graphicLoad()){
   
          addClusterLayer(allCamaraData);
        }
        var height = parseInt($('#acgisMap_zoom_slider').css('height'));
        $('#acgisMap_zoom_slider').css({
   
          left:'77%',
          top:window.innerHeight-60-height+'px'
        });
        if(flag){
   
          layer.msg('摄像机总数有'+cammreNum+'个，其中不在范围内的有'+errorcNum+'个');
        }
      });
      //点击摄像机方法
      function showCoordinatesAndAddPoint(evt) {
   
        //get mapPoint from event
        if(evt.graphic){
   
          var graphic=evt.graphic;
          var initialExtent = new Extent({
    "xmin": graphic._extent.xmin, "ymin": graphic._extent.ymin, "xmax": graphic._extent.xmax, "ymax": graphic._extent.ymax, "spatialReference": {
    "wkid": coordinates } });
          myMap.setExtent(initialExtent);
          if(graphic.symbol &&　graphic.symbol.url){
   
            if(graphic.symbol.url.indexOf('map_camera_cluster')