定義全域性變數

var map
var view
var json = {}
var mapData = []

新增底圖

  require(["esri/map",
      "dojo/on",
      "dojo/dom",
      "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/geometry/Extent",
      "dojo/domReady!"],
  function (Map, on, dom, ArcGISDynamicMapServiceLayer, Extent) {
      map = new Map("mapId", {
         logo:false,
         showAttribution: false
      })
      // 新增底圖
      var imageLayer = new ArcGISDynamicMapServiceLayer("https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer", {id:"imageLayer"});
      map.addLayer(imageLayer)
      // 新增範圍
      var extent = new Extent({
         xmax: 116.720392,
         xmin: 116.102933,
         ymax: 40.011797,
         ymin: 39.809015,
         spatialReference: { wkid: 4326 }
      })
      map.setExtent(extent)
  });
 

在地圖可以通過介面資料自己構造geojson，或者直接通過後臺給的geojson渲染地圖。

下面我們分別實現

1.通過geojson

function addGeoJsonToMap(url){
   require(["esri/map",
       "./src/geojsonlayer.js",
       "esri/geometry/Point",
       "esri/SpatialReference",
       "dojo/on",
       "dojo/dom",
       "dojo/domReady!"],
    function (Map, geojsonlayer, Point, SpatialReference,on, dom) {
       // Create the layer
       var geoJsonLayer = new geojsonlayer({
          baseMap:map,
          url: url,
          onLayerLoaded:function(layer){
             showAllPopup(layer);
          }
        });
         // Add to map
        geoJsonLayer.dataType="geojson";
        map.addLayer(geoJsonLayer);
         //show all popups
         function showAllPopup(layer){
            if(layer.graphics[0].geometry.type=="point"){
              layer.graphics.forEach(function(item){
                var loc = map.toScreen(item.geometry);
                map.infoWindow.setFeatures([item]);
                map.infoWindow.show(loc);
              })
            }
       }
    });
}
addGeoJsonToMap("./geojson.json")
 

2.通過介面資料

function getFeatures (list) {
   var gras = []
   var json = {}
   var tempJson = {}
   for (var i = 0; i < list.length; i++) {
      tempJson = {
          "type":"Feature",
          "properties":{
             "Id": list[i].id,
             "name": list[i].id,
             "lon": list[i].lon,
             "lat": list[i].lat
           },
           "geometry":{
                "type":"Point",
                "coordinates":[Number(list[i].lon),Number(list[i].lat)]
            }
      }
      gras.push(tempJson)
  }
   json.features = gras
   json.type = 'FeatureCollection'
   // 執行渲染點和彈窗方法
   addGeoJsonToMap(json)
}    
 

實現原理就是3.x還沒有geojsonLayer,通過重新封裝geojsonlayer.js,並把PopupExtended.js嵌入其中，接收geojson資料轉為arcgis json然後通過構造graphic，用graphicLayer渲染就可以了。

實現效果原圖

具體原始碼請檢視

https://github.com/bobo-33/arcgis-for-js-popup