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

最新推荐文章于 2024-10-12 15:36:14 发布

老梅的前端旅程

最新推荐文章于 2024-10-12 15:36:14 发布

阅读量1.9k

点赞数 3

分类专栏：前端开发文章标签： arcgis

本文链接：https://blog.csdn.net/weixin_42618191/article/details/102725299

版权

前端开发专栏收录该内容

10 篇文章 2 订阅

订阅专栏

开发arcgis主要步骤：

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

获取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部分代码）

在这里插入图片描述

1. esri

esri/Map（地图）
底图模式：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 见下方图层详情）。

var polyline = {	//一条线
  type: "polyline",
    paths: [
      [-111.30, 52.68],
      [-98, 49.5],
      [-93.94, 29.89]
    ]
};
var polylineSymbol = { //一个图形
  type: "simple-line",
  color: [226, 119, 40],
  width: 4
};
var polylineAtt = {
  Name: "Keystone Pipeline",
  Owner: "TransCanada"
};
//四大属性：
var polylineGraphic = new Graphic({
   geometry: polyline,   //在实际坐标中定义图形的几何形状或位置。
   symbol: polylineSymbol ,   // 定义如何在视图中呈现的图形。
   attributes: polylineAtt ,   // 字段的名称/值对以及与图形关联的字段值。
   popupTemplate: { //允许用户在弹出窗口中访问图形的属性。
     title: "{Name}",
     content: [
        {
          type: "fields",
          fieldInfos: [
            {
              fieldName: "Name"
            },
            {
              fieldName: "Owner"
            },
            {
              fieldName: "Length"
            }
          ]
        }
      ]
   }
});
//添加图形。view是MapView实例
view.graphics.add(polylineGraphic);

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视图）

var view = new MapView({
  map: myMap,  // Map实例
  container: "viewDiv"  ,// DOM元素
  center :["中心"，"坐标"],
  zoom:"缩放比例",
});

view.when(function(){ //执行仅在加载地图后才能运行的过程
 // 地图视图和地图中的所有资源都已加载
}, function(error){
 // 当视图加载不正确时
 console.log("The view's resources failed to load: ", error);
});

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（创建动态地图图层）
动态层显示基于请求（包括图像的范围和大小）在服务器上动态生成的图像

var MyCustomDynamicLayer = BaseDynamicLayer.createSubclass({  // 创建图层
 properties: {
   getMapUrl: null,   //指定WMS服务的URL
   getMapParameters: null  //指定从服务器获取图像时将使用的查询参数
 },
 getImageUrl: function (extent, width, height) {  //获取图片地址
   var urlVariables = this._prepareQuery(this.getMapParameters, extent, width, height);
   var queryString = this._joinUrlVariables(urlVariables);
   return this.getMapUrl + "?" + queryString;
 },
});

// 属性表：
maxScale/minScale :  图层在视图中可见的最大比例尺（最大缩放比例）/最小
refreshInterval：刷新间隔

//方法表：
fetchImage（）：此方法获取指定范围和大小的图像
getImageUrl（）：

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 （所有符号的基类）

属性：
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类型的线类型

5. 几何图形（esri/geometry）

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

属性：
type（类型）："point（点）"|"multipoint（多点）"|"polyline（折线）"|"polygon（多边形）"|"extent"|"mesh"，
extent：“几何图形的范围”，

//点的常见属性
latitude：“（点纬度）”，
longitude：“（点经度）”，

//线的常见属性
paths：“组成折线的路径或线段的数组”，

//面的常见属性
rings：“点的数组”