ArcGIS JavaScript 核心概念

原文来自于
Maps and Views:https://developers.arcgis.com/javascript/latest/guide/maps-and-views/

介绍

地图(Map)是用于管理对图层(layers )底图(basemaps)的引用的容器。视图(Views)用于显示地图图层并处理用户交互,弹出窗口,窗口小部件和地图位置。

类关系示意图.png

关于地图

地图是从Map类创建的。Map对象始终传递给View对象。有两个View类用于显示地图:MapView用于2D地图 和 SceneView类用于3D地图。

创建地图

创建地图的一种方法是:Map类在指定一个底图(basemap)和可选的图层集合(layers)时创建类的新实例。

const myMap = new Map({                // 创建一个Map对象
  basemap: "streets-vector",
  layers: additionalLayers             // 可选,添加其他图层集合
});

const mapView = new MapView({          // 新建View对象,Map对象添加到View对象中
  map: myMap,
  container: "mapDiv"
});

详细了解可以添加到地图的不同类型的图层。

从Web地图或Web场景创建地图

创建地图的第二种方法是:加载Web地图(用于2D地图)或 Web场景(用于3D地图)。

Web地图和Web场景是包含地图或场景设置的JSON结构。这包括底图,图层,图层样式,弹出窗口,图例,标签等的设置。它们通常与ArcGIS Online地图查看器或ArcGIS Online场景查看器以交互方式创建。ArcGIS Online或ArcGIS Enterprise为其分配唯一ID并将其存储为门户项目。

WebMap类和WebScene类可分别通过其独特的ID来访问加载Web地图和Web场景。标识项目的ID可以用在地图查看器和场景查看器或者项目页面中中的URL的参数。默认门户网站是ArcGIS Online,URL是https://www.arcgis.com。如果使用ArcGIS Enterprise,则必须指定门户URL。

例: https://www.arcgis.com/home/item.html?id=41281c51f9de45edaf1c8ed44bb10e30

WebMapWebScene对象加载Web地图和Web场景时,所有设置都会自动应用于MapScene。例如,设置底图和图层,应用图层样式,并为每个图层定义弹出窗口。

注意:配置MapScene的最快方法是,以交互方式创建Web地图和Web场景并通过唯一ID加载它们。在创建Web地图”和显示Web地图教程中了解如何创建和加载Web地图。

  • 用WebMap创建地图

const webMap = new WebMap({                        // 定义Web地图实例
  portalItem: {
    id: "41281c51f9de45edaf1c8ed44bb10e30",
    portal: "https://www.arcgis.com"               // 默认值:ArcGIS门户网站
  }
});

const view = new MapView({
  map: webMap,                                     // 加载Web地图
  container: "viewDiv"
});

在显示Web地图教程中了解更多信息。

  • 用WebScene创建场景

const webScene = new WebScene({                    // Define the web scene reference
  portalItem: {
    id: "579f97b2f3b94d4a8e48a5f140a6639b",
    portal: "https://www.arcgis.com"               // Default: The ArcGIS Online Portal
  }
});

const view = new SceneView({                       // Load the web scene
  map: webScene,
  container: "viewDiv"
});

在显示Web场景教程中了解更多信息。

关于视图

视图的主要作用是显示图层,弹出窗口和UI小部件,处理用户交互,以及指定地图应该关注的世界的哪个部分(即地图的“范围”)。

创建视图

有单独的类用于为地图和场景创建视图:MapViewSceneView类。MapView用于显示对象的2D视图,和SceneView用于显示3D视图Map

要使地图可见,视图对象需要一个Map对象,并且container属性正确引用div元素的id属性。

const mapView = new MapView({          // Create MapView object
  map: myMap,
  container: "mapViewDiv"
});

const sceneView = new SceneView({      // Create SceneView object
  map: myMap,
  container: "sceneViewDiv"
});

设置地图的显示内容

创建视图SceneViewMapView时可以通过在设置中心点center和(缩放级别zoom或比例尺scale)属性来设置的初始位置。

const view = new MapView({
  center: [ -112, 38 ],          // 地图的中心 经度/纬度
  zoom: 13                      // 将细节的缩放级别(LOD 细节层次(en:Level of detail))设置为13
});

注意:通过以编程方式更新属性,视图初始位置也可以改变。

使用SceneView(3D)时,可以通过定义镜头camera属性来设置观察者的位置。

var view = new SceneView({
  camera: {
    position: [
       -122, // 经度lon
         38, // 纬度lat
      50000  // 海拔(米)
    ],
    heading: 95, // 相机的罗盘角度
    tilt: 65 // 相机相对于地面的倾斜
  }
});

了解如何在创建入门应用程序教程中创建2D和3D视图。

将视图设置为新位置的动画

goTo方法还可以更改视图MapView的位置,而且提供了平滑过渡的附加选项。该技术通常用于地图中心从一个位置“飞行”到另一个位置或者缩放到搜索结果。

goTo方法可以接受GeometryGraphicViewpoint对象。其他选项可以控制动画。

view.goTo({                            // 自定义动画移动到设定的点
  target: {
      center: [ -114, 39 ]
    }, {
      duration: 5000
  });
});

与视图交互

该视图还负责处理用户交互和显示弹出窗口。该视图为用户交互提供了多个事件处理程序,例如鼠标单击,键盘输入,触摸屏交互,操纵杆和其他输入设备。

当用户单击地图时,默认行为是显示已在图层中预先配置的任何弹出窗口。可以使用以下代码,通过监听click事件并使用该hitTest()方法查找用户单击的功能。

view.popup.autoOpenEnabled = false;  // 禁用默认弹出行为

view.on("click", function(event) { // 监听点击事件
  view.hitTest(event).then(function (hitTestResults){ // 用户单击的功能实现
    if(hitTestResults.results) {
      view.popup.open({ // 打开一个弹出窗口以显示结果
        location: event.mapPoint,
        title: "Hit Test Results",
        content: hitTestResults.results.length + "Features Found"
      });
    }
  })
});

了解有关视图事件和手动配置弹出窗口的详细信息。

将小部件和UI组件添加到视图中

视图也是用于添加窗口小部件和HTML元素的容器。在view.ui提供了一个DefaultUI其用于显示视图的缺省窗口小部件。还可以使用view.ui.add方法将其他窗口小部件和HTML元素添加到视图中。下面的代码片段演示了添加搜索地址或地点的小部件。

  var searchWidget = new Search({
    view: view
  });

  // 将搜索小部件添加到视图的右上角
  view.ui.add(searchWidget, {
    position: "top-right"
  });

了解有关向视图添加小部件的详细信息。

你可能感兴趣的:(ArcGIS JavaScript 核心概念)