前端开发arcGIS jsAPI简易归纳（2D基础1）

喜欢ヅ旅行 2021-10-06 02:28 725阅读 0赞

## 开发arcgis主要步骤： ##

#### 获取API——选择地图——添加图层——更改样式——配置弹出窗口——保存地图 ####

获取api的方式：[https://developers.arcgis.com/javascript/latest/guide/get-api/][https_developers.arcgis.com_javascript_latest_guide_get-api]（可以先使用CDN方法进行引入练习）

//最简单的操作代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.13/"></script>
        <style>
            #viewDiv{ 
                padding: 0;
                margin: 0;
                height: 500px;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="viewDiv"></div>
    
        <script>
            require([ //加载所需要的模块（API）
                "esri/Map",
                "esri/views/MapView",
                // 选择或者切换底图模块
                "esri/widgets/BasemapToggle",
                "esri/widgets/BasemapGallery",
                //添加图层模块
                "esri/layers/FeatureLayer",
            ], function(Map, MapView, BasemapToggle, BasemapGallery,FeatureLayer) { //引入
            var map = new Map({ //新建底图
                basemap: "topo-vector",//底图的值，不同值底图模式不同
                // ground: "world-elevation" // 3D图
            });
            var view = new MapView({ //地图配置
                container: "viewDiv",//dom节点
                map: map,
                center: [-118.80500, 34.02700], // 中心点
                zoom: 13 // 缩放比例
            });
            // 切换底图
            var basemap = new BasemapToggle({ 
                 view: view,
                 nextBasemap: "satellite" //底图的值
            });
             view.ui.add(basemap, "bottom-right");
            // 添加全部底图组进行选择
             var basemapGallery = new BasemapGallery({ 
                 view: view,
                 source: { 
                 portal: { 
                     url: "https://www.arcgis.com",
                     useVectorBasemaps: true  // Load vector tile basemaps
                 }
                 }
             });
             view.ui.add(basemapGallery, "top-right");
            // 弹窗配置
            var popupTrailheads = { 
                "title": "{TRL_NAME}",
                "content": "<b>City:</b> {CITY_JUR}<br><b>Cross Street:</b> {X_STREET}<br><b>Parking:</b> {PARKING}<br><b>Elevation:</b> {ELEV_FT} ft"
            }
            // 图层配置
            var trailheads = new FeatureLayer({ 
                url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0",
                outFields: ["TRL_NAME","CITY_JUR","X_STREET","PARKING","ELEV_FT"],
                popupTemplate: popupTrailheads
            });
            map.add(trailheads);
        });
        </script>
    </body>
    </html>

# **常用API（针对引入api后的function部分代码）** #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70]

## 1. esri ##

*  **esri/Map（地图）**  
    底图模式：[https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html][https_developers.arcgis.com_javascript_latest_api-reference_esri-Map.html]

var myMap = new Map({ 
        basemap: 'streets'   
    });

*  **esri/Basemap（底图）**

//创建自定义底图：
    var basemap = new Basemap({ 
      baseLayers: [
        new MapImageLayer({ 	//
          url: "服务器地图地址",
          title: "Basemap"
        })
      ],
      title: "basemap",
      id: "basemap"
    });
    var map = new Map({ 
      basemap: basemap
    });

*  **esri/geometry（几何）**  
    可以使用模块形式导入（详情见下方geometry模块）

import {  Point, Polygon, Polyline } from "esri/geometry";

*  **esri/Graphic（图形化）**  
    现实世界地理现象的矢量表示。可以包含几何图形，符号和属性。图形显示在GraphicsLaye中r（esri/layers/GraphicsLayer 见下方图层详情）。

*  **esri/PopupTemplate（弹出层）**  
    定义特定Layer或Graphic的Popup的内容

var popupTrailheads = { 
        "title": "{TRL_NAME}", //标题
        //HTML表示形式。语法{fieldName}或{expression/expressionName}执行参数替换
        "content": "<b>City:</b> {CITY_JUR}<br><b>Cross Street:</b> {X_STREET}<br><b>Parking:</b> {PARKING}<br><b>Elevation:</b> {ELEV_FT} ft"
     }

## 2.视图（esri/views） ##

*  **esri/views/MapView （显示Map实例的2D视图）**

## 3.图层（esri/layers） ##

*  **esri/layers/FeatureLayer（从地图服务或要素服务创建的单个图层）**

const layer = new FeatureLayer({ 
      	url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0" //层，非空间表或服务的REST端点的URL。
        outFields :[服务中要包含在每个功能中的一组字段名称。]
    });

*  **esri/layers/BaseDynamicLayer（创建动态地图图层）**  
    动态层显示基于请求（包括图像的范围和大小）在服务器上动态生成的图像

*  **esri/layers/TileLayer（从缓存访问图块，而不是动态渲染图像）**

require(["esri/layers/TileLayer"], function(TileLayer) { 
      var layer = new TileLayer({ 
        url: "https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer"
      });
    });

*  **esri/layers/GraphicsLayer（包含一个或多个客户端Graphics）**  
    每个图形都呈现在SceneView或MapView内部的LayerView中。

require(["esri/layers/GraphicsLayer", "esri/Graphic"], function(GraphicsLayer, Graphic){ 
      var graphicA = new Graphic({  
        geometry: new Polyline({ ...}), 
        symbol: new SimpleLineSymbol({ ...}) 
      });
      var graphicB = new Graphic({  
        geometry: new Point({ ...}),
        symbol: new SimpleMarkerSymbol({ ...})
      });
      var graphicC = new Graphic({ 
        geometry: new Polygon({ ...}),
        symbol: new SimpleFillSymbol({ ...})
      });
      var graphicD = new Graphic();
      var graphicE = new Graphic();
    
      var layer = new GraphicsLayer({ 
        graphics: [graphicA], 
      });
      
      layer.graphics.add(graphicB);
      
      layer.add(graphicC);
      
      layer.addMany([graphicD, graphicE]);
    
      map.add(layer);
    });
    
    属性表：
    levationInfo：指定如何在垂直轴（z）上放置图形。
    graphics：图层中的图形集合。
    loaded：指示图层实例是否已加载。
    
    方法表：
    add() / addMany()：将图形/ 图形数组添加到图层 
    remove() / removeAll() / removeMany()：从图层中删除图形。
    
    事件：
    layer.on("layerview-create", function(event){   //layerview-create-error，layerview-destroy
      event.layerView;
    });

*  **esri/layers/ImageryLayer（将图像服务资源表示为一层）**

var layer = new ImageryLayer({ 
      url: "https://landsat2.arcgis.com/arcgis/rest/services/Landsat8_Views/ImageServer"
    });

## 4. 符号（esri/symbols） ##

*  **esri/symbols/Symbol （所有符号的基类）**  
    ![只能在GraphicsLayer或View.graphics中的单个图形上直接设置符号。及esri/Graphic的属性][GraphicsLayer_View.graphics_esri_Graphic]

属性：
    type（类型）:" simple-marker | picture-marker | simple-line | simple-fill | picture-fill | text | shield-label-symbol ",
    color:"颜色",
    
    // 以简单的形状和颜色渲染 点。
    var symbol = { 
      type: "simple-marker",  
      style: "square",//符号类型
      color: "blue",
      size: "8px",  // 大小
      outline: {   // 标记符号的轮廓
        color: [ 255, 255, 0 ],
        width: 3  
    };
    
     //使用图像渲染点图形
    var symbol = { 
      type: "picture-marker",
      url: "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",
      width: "64px",//宽
      height: "64px"//高
    };
    注意：
    	符号的高度和宽度限制为不超过200像素。
    	IE11不支持渲染SVG文档。
    	SVG文档必须包含宽度和高度的定义，才能在Firefox中正确加载。
    	不支持动画的gif / png图像
    
     // 渲染折线几何
    var symbol = { 
      type: "simple-line",
      color: "lightblue",
      width: "2px",
      style: "short-dot" //线条类型，下方有图
    };
    
     // 渲染2D多边形
    var symbol = { 
      type: "simple-fill", 
      color: [ 51,51, 204, 0.9 ],
      style: "solid",
      outline: {   
        color: "white",
        width: 1
      }
    };
    
     // 用于定义图形，可以更改标签图形的color，font，halo和其他属性
    var textSymbol = { 
      type: "text", 
      color: "white",
      haloColor: "black", //文字符号光晕的颜色。
      haloSize: "1px", //文字符号光环的大小。
      text: "You are here",
      xoffset: 3, //x轴偏移量
      yoffset: 3, //y轴偏移量
      font: {   // 字体信息
        size: 12,
        family: "Josefin Slab",
        weight: "bold"
      }
    };

![simple-line类型的线类型][simple-line]

## 5. 几何图形（esri/geometry） ##

*  **esri/geometry/Geometry（几何）**  
    主要体现在 Point，Polyline或Polygon （点线面）。

属性：
    type（类型）："point（点）"|"multipoint（多点）"|"polyline（折线）"|"polygon（多边形）"|"extent"|"mesh"，
    extent：“几何图形的范围”，
    
    //点的常见属性
    latitude：“（点纬度）”，
    longitude：“（点经度）”，
    
    //线的常见属性
    paths：“组成折线的路径或线段的数组”，
    
    //面的常见属性
    rings：“点的数组”

[https_developers.arcgis.com_javascript_latest_guide_get-api]: https://developers.arcgis.com/javascript/latest/guide/get-api/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70]: /images/20211006/3a9c3043114a4e1a80e02c996a324455.png
[https_developers.arcgis.com_javascript_latest_api-reference_esri-Map.html]: https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html
[GraphicsLayer_View.graphics_esri_Graphic]: /images/20211006/dd52a6f9c4cd4e11bfc47c77e276fb30.png
[simple-line]: /images/20211006/416c59596e22490dba10450156b9f838.png