ArcGIS API for JavaScript学习（一）——MapView与SceneView（没写完）

MapView

MapView显示Map实例的2D视图。 必须创建一个MapView实例才能以2D形式渲染Map（及其操作层和基础层）。 要以3D形式渲染地图及其图层，请参见SceneView的文档。

为了使地图在DOM中对用户可见，必须创建一个MapView并至少引用两个对象：一个Map实例和一个DOM元素。 每个都分别在map和container属性中设置。
 

//创建一个MapView实例（用于2D查看）
var view = new MapView({
  map: myMap,  // 引用一个Map实例
  container: "viewDiv"  // 引用DOM元素的ID
  background: { // 自动广播新的Color Background（）
    color: "magenta" // 自动广播为新的Color（）
  }
});

在MapView中设置地图比例尺

view.scale = 24000; // 在视图上设置1：24,0000比例尺

设置初始范围

//通过center和zoom设置view范围
view.center = [-112, 38];// 将视图的中心点设置为指定的经度/纬度
view.zoom = 13;// 将缩放层次设置为13

//设置视图范围
view.extent = new Extent({
  xmin: -9177882,
  ymin: 4246761,
  xmax: -9176720,
  ymax: 4247967,
  spatialReference: {
    wkid: 102100
  }
});

通过调用MapView实例上的.when（）方法来执行在加载地图后才能运行的程序。

view.when(function(){
 // MapView和地图中的所有资源均已加载。 现在执行其他程序
}, function(error){
 // 当视图无法正确加载时，使用errback()函数进行处理
 console.log("The view's resources failed to load: ", error);
});

视图属性优先级

Property	Overrides
viewpoint	extent, center, scale, zoom
extent	center, scale, zoom
scale	zoom

 

 

 

 

 

使用goTo（）方法也可以进行动画处理，将MapView从一个范围更改或移动到另一个范围。

view.goTo({
  center: [-126, 49]
})
.catch(function(error) {
  if (error.name != "AbortError") {
     console.error(error);
  }
});


/***********************************************************************/

var pt = new Point({
  latitude: 49,
  longitude: -126
});

// 转到给定的点
view.goTo(pt);

/***********************************************************************/

var opts = {
  duration: 5000  // 动画时间为5秒
};

// 使用自定义持续时间指向15级
view.goTo({
  target: pt,
  zoom: 15
}, opts);

/***********************************************************************/

// 使用中心和缩放到同一点
view.goTo({
  center: [-126, 49],
  zoom: 15
});


/***********************************************************************/


//更新视图的center属性切换点位
var pt = new Point({
  x: 12804.24,
  y: -1894032.09,
  spatialReference: 2027
});
view.center = pt;

/***********************************************************************/

view.goTo({//之前使用过的点位跳转
    position: {
        x: node.x,
        y: node.y,
        z: 10000,
        spatialReference: {wkid: 4545}
    },
    heading: 0,
    title: 0
    // zoom: 5
});

MapView事件

 

• destroy()

销毁视图以及所有相关资源，包括其地图，弹出窗口和UI元素。 一旦视图被销毁，将无法再使用它们。 为防止这些组件被破坏，请在调用destroy()之前将它们从视图中删除。

// 从视图中删除弹出窗口和图例，以免它们被破坏
const popup = view.popup;
view.popup = null;
view.ui.remove(legend);

// 从视图中取消设置地图，以免破坏地图
const map = view.map;
view.map = null;

// 销毁视图和任何剩余的关联资源
view.destroy();

click事件

// 从视图的click事件中获取屏幕点
view.on("click", function (event) {
  // 在单击的位置搜索图形
  // 屏幕位置的x，y坐标
  // 屏幕坐标定义
  view.hitTest(event).then(function (response) {
    if (response.results.length) {
      var graphic = response.results.filter(function (result) {
        // 检查图形是否属于感兴趣的图层 
        return result.graphic.layer === myLayer;
      })[0].graphic;

      // 应用结果图形
      console.log(graphic.attributes);
    }
  });
});

// 获取屏幕视角的指针移动事件
view.on("pointer-move", function(event){
  // 在悬停位置的图层上搜索图形
  // 从hotTest中排除view.graphics
  view.hitTest(event, {exclude: view.graphics}).then(function(response){
    // 如果返回图形，则对结果进行处理
    if (response.results.length){
       // do something
    }
  })
})

监听事件

view.on("click", function(event){
  // event是事件处理后的反射
  console.log(event.mapPoint);
});

// 当用户单击“ Shift”时触发“指针移动”事件
// 在视图上点击或者移动鼠标
view.on('pointer-move', ["Shift"], function(event){
  var point = view2d.toMap({x: event.x, y: event.y});
  bufferPoint(point);
});

 

SceneView

SceneView使用WebGL显示Map或WebScene实例的3D视图。

为了使地图在DOM中对用户可见，SceneView必须同时具有有效的Map实例和在其中进行渲染的高度和宽度非零的DOM元素。

注：在视图开始渲染地图之前，地图中必须有有效的数据，例如操作层或具有基础层的底图。

// 创建具有底图和世界高程的基本SceneView实例
var view = new SceneView({
  // Map或WebScene的实例
  map: new Map({
    basemap: "hybrid"
  }),

  // DOM元素的ID（也可以是实际的DOM元素）
  container: "viewDiv"
});

var view = new SceneView({
 map: map,
 alphaCompositingEnabled: true,
 environment: {
   background: {
     type: "color",
     color: [0, 0, 0, 0]
   },
   starsEnabled: false,
   atmosphereEnabled: false
 }
})

构造一个SceneView后，它可能不会立即准备好显示。 例如，可能需要先加载地图数据以确定视图的spatialReference，否则DOM容器可能尚未具有非零大小。 许多视图方法（例如hitTest或goTo）都需要先准备好视图，然后才能使用它们。

可以通过goTo()和视图属性以编程方式导航视图，也可以使用鼠标，键盘或触摸输入进行交互。 默认情况下，SceneView导航处于启用状态，包括鼠标，键盘和触摸的交互，如下表所述。 触摸互动可在任何支持触摸的显示器或笔记本电脑屏幕上进行。

传统的2D映射属性（例如比例，缩放，中心和范围）在3D中并不总是能很好地工作。 例如，在地球仪的背景下查看时，地图的比例不清晰。 因此，SceneView在尽力而为的基础上支持这些属性，但有某些限制（有关更多信息，请参见各个属性的文档）。

SceneView支持两种不同的查看模式，全局的（上方的左图）和局部的（上方的右图），由viewingMode属性指定。 全球场景将地球渲染为地球，而局部场景则将表面渲染为平面。 本地模式允许在本地化或裁剪的区域中导航和显示功能。 在两种查看模式下，用户都可以通过将esri / Ground＃navigationConstraint＃type设置为none来在地面以下导航相机。

基于视图的空间参考确定查看模式（如果用户未明确设置）。 如果空间参考是Web Mercator或WGS84，则viewingMode将默认为global。 对于任何其他空间参考，viewingMode将默认为本地。

支持坐标：

SceneView在全局场景中支持以下坐标系：

1. WGS84，WebMercator和CGCS2000
2. 具有任何空间参考的非缓存图层，因为它们将被重新投影到场景空间参考
3. 对Mars_2000_（Sphere），GCS_Mars_2000和GCS_Moon_2000的支持是实验性的（请参阅在Mars示例中可视化数据）。

具有这些坐标系的场景具有以下限制：

（1）不支持动态图层，矢量平铺图层和场景图层

（2）当前无法正确显示日光

（3）无法保存到门户项目

在局部场景中，支持以下坐标系：

1. 任何投影坐标系
2. 具有任何空间参考的非缓存图层，因为它们将被重新投影到场景空间参考

注：SceneView不支持多点几何的渲染。