arcgis通俗易懂教程（一）------入门教程

使用arcgis的流程
（官网翻译篇（https://blog.csdn.net/A11111AsUN/article/details/107358397））

代码实例

<link
  rel="stylesheet"
  href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></script>

<script>
  require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/FeatureLayer",
    "esri/renderers/DictionaryRenderer",
    "esri/widgets/Expand",
    "esri/widgets/Bookmarks",
    "esri/webmap/Bookmark"
  ], function(
    Map,
    MapView,
    FeatureLayer,
    DictionaryRenderer,
    Expand,
    Bookmarks,
    Bookmark
  ) {
    var map=new Map({
      basemap: "gray-vector"
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      extent: {
        spatialReference: {
          wkid: 102100
        },
        xmax: -13581772,
        xmin: -13584170,
        ymax: 4436367,
        ymin: 4435053
      }
    });

    const popupTemplate = {
      // autocasts as new PopupTemplate()
      title: "station: {Station_Name}",
      content: [
        {
          // It is also possible to set the fieldInfos outside of the content
          // directly in the popupTemplate. If no fieldInfos is specifically set
          // in the content, it defaults to whatever may be set within the popupTemplate.
          type: "fields",
          fieldInfos: [
            {
              fieldName: "Fuel_Type_Code",
              label: "Fuel type"
            },
            {
              fieldName: "EV_Network",
              label: "EV network"
            },
            {
              fieldName: "EV_Connector_Types",
              label: "EV connection types"
            },
            {
              fieldName: "Station_Name",
              label: "Station Name"
            }
          ]
        }
      ]
    };

    const scale = 36112;
    const layer_1 = new FeatureLayer({
      url:
        "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Alternative_Fuel_Station_March2018/FeatureServer",
      outFields: ["*"],
      popupTemplate: popupTemplate,
      renderer: new DictionaryRenderer({
        url:
          "https://jsapi.maps.arcgis.com/sharing/rest/content/items/30cfbf36efd64ccf92136201d9e852af",
        fieldMap: {
          fuel_type: "Fuel_Type_Code"
        },
        config: {
          show_label: "false"
        },
        visualVariables: [
          {
            type: "size",
            valueExpression: "$view.scale",
            stops: [
              { value: scale / 2, size: 20 },
              { value: scale * 2, size: 15 },
              { value: scale * 4, size: 10 },
              { value: scale * 8, size: 5 },
              { value: scale * 16, size: 2 },
              { value: scale * 32, size: 1 }
            ]
          }
        ]
      }),
      minScale: 0,
      maxScale: 10000
    });

    const layer_2 = new FeatureLayer({
      url:
        "https://services1.arcgis.com/4yjifSiIG17X0gW4/arcgis/rest/services/Alternative_Fuel_Station_March2018/FeatureServer",
      outFields: ["*"],
      popupTemplate: popupTemplate,
      renderer: new DictionaryRenderer({
        url:
          "https://jsapi.maps.arcgis.com/sharing/rest/content/items/30cfbf36efd64ccf92136201d9e852af",
        fieldMap: {
          fuel_type: "Fuel_Type_Code",
          connector_types: "EV_Connector_Types",
          network: "EV_Network",
          name: "Station_Name"
        },
        config: {
          show_label: "false"
        }
      }),
      minScale: 10000,
      maxScale: 0
    });

    map.addMany([layer_1, layer_2]);

   

    
  });
</script>

步骤解释

1、引入arcgis的js和css文件
2、创建一个组件，给该组件定义一个id
3、在js文件中，创建MapView(2D)或者ScreenView(3D)。在view中定义id组件为地图视图的容器
4、定义一个地图组件（new Map（））。在地图组件中引入基本图层
5、创建渲染图层，将渲染图层添加到地图中。