ArcGIS使用（一）创建ArcGIS应用

ArcGIS官方文档：https://developers.arcgis.com/javascript/

 

第一章、认识和使用ArcGIS

1 ArcGIS for js 4.x

    使用的是4.15 版本,ArcGIS 每个版本之间有差别，3 和4 的差别有点大

    4 地图可以2D或3D显示，修改了绘图逻辑，地图和图层不在处理逻辑，而是由view处理视图专门用于可视化地图或场景中的  数据。地图包含要显示的实际数据或图层，而视图则处理显示的数据。

        4.x多了MapView,地图在MapView中显示：

var map = new Map({ basemap: "streets" }); 
var view = new MapView({ 
     container: "viewDiv",
     map: map, 
     center:[118.183013,39.638808], zoom: 6 });
map = new Map("map", { 
     center:[118.183013,39.638808],
     zoom: 13 , 
     minZoom: 4, 
     maxZoom: 11 });

所有map的相关操作都转换到了view

   图层操作方法有些改变：

3.x

map.addLayer(pointGraphicLayer, 20); map.removeLayer(pointGraphicLayer);

4.x

map.add(graphicsLayer) map.remove(graphicsLayer);

   有些类可以不用引入，直接使用：

var point = { type: "point", longitude: 118.183013, latitude: 39.638808 }; 
var simpleFillSymbol = { type: "simple-fill", 
                         color: [227, 139, 79, 0.8],
                         opacity 80% outline: { color: [255, 255, 0], width: 1 } 
                       };


var point = new Point(118.183013,39.638808); 
var simpleFillSymbol = new SimpleFillSymbol( 
            SimpleFillSymbol.STYLE_NONE,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, 
                         new Color([148, 236, 60]),2), 
                         new Color([255, 255, 179, 0])); 
var polygon =new Polygon ( [118.183013, 39.638808],
                           [118.333013, 39.828808], 
                           [118.543013, 39.878808] );

    模块和软件包更新：

更改的软件包名称，例如esri/dijitnow esri/widgets/。

短，更清晰的模块名称，例如TileLayer代替ArcGISTiledMapServiceLayer。

一贯套管模块名，所有模块现在有一个大写字母，含开始Map，Graphic和Query。

支持类已移至支持文件夹，以使API参考更加有条理，例如esri/layers/support和esri/tasks/support。

结构发生了esri/config变化。的属性esriConfig.defaults现在位于中esriConfig。例如，要设置默认几何服务

5.popupTemplate 新版本不再有infowwindow 了

2 创建应用

1.创建HTML页面：

2.添加对CSS和API的引用

该

3.加载模块

esri/Map -加载特定于创建地图的代码
esri/views/MapView -加载允许以2D模式查看地图的代码

使用第二个

3D场景：

 

3 底图

   在应用程序中使用的各种各样的底图。其中许多可以直接用字符串常量引用。

   底图属性light-gray-vector，dark-gray-vector，satellite，streets-relief-vector，和streets-navigation-vector

var map = new Map({basemap: "streets-navigation-vector"});

底图的选项有：streets,satellite，hybrid，topo，gray，dark-gray，oceans，osm，national-geographic。

构建应用程序以交互方式选择和显示ArcGIS Online 底图：

要构建可以在底图之间切换的应用程序，可以使用BasemapToggle或BasemapGallery窗口小部件。

该BasemapToggle小部件允许您在定义的两个底图之间切换，

而BasemapGallery小部件允许您从属于ArcGIS Online组的多个底图中进行选择。您可以使用Esri托管的一组底图，也可以使用专门为应用程序组成的一组底图

示例1：切换底图：

启用两个底图之间的选择的最简单方法之一是使用BasemapToggle小部件。在此步骤中，您将配置窗口小部件以在“地形”底图和“卫星”底图之间切换。

//require语句中，添加对BasemapToggle和BasemapGallery模块的引用
require([
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/BasemapToggle",
      "esri/widgets/BasemapGallery"
    ], function(Map, MapView, BasemapToggle, BasemapGallery) {

在main中的代码结尾处function，创建一个BasemapToggle小部件将view和nextBasemap属性设置为satellite

var basemapToggle = new BasemapToggle({
        view: view,
        nextBasemap: "satellite"
      });
//  然后将小部件添加到视图的，将其添加到视图的右下角DefaultUI。
  view.ui.add(basemapToggle, "bottom-right");

示例2：从ArcGIS Online 组中选择底图：

选择底图的另一种方法是使用BasemapGallery小部件。在此步骤中，您将使用小部件从ArcGIS Online组中加载底图，以便用户可以选择和显示底图。

在main中function，创建一个BasemapGallery小部件并将其配置为从中加载底图ArcGIS Online。将设置view为活动视图，并将设置source为ArcGIS Online门户。将设置url为https://wwww.arcgis.com并将其设置useVectorBasemaps为，true以便从矢量图块组中加载底图。如果将此值设置为该值，false将加载栅格图块底图组

var basemapGallery = new BasemapGallery({
        view: view,
        source: {
          portal: {
            url: "https://www.arcgis.com",
            useVectorBasemaps: true  
          }
        }
});
通过将小部件添加到视图的，将其添加到视图的右上角DefaultUI
view.ui.add(basemapGallery, "top-right");