ArcGIS API for JavaScript 教程翻译笔记：Mapping and Views
本文非原创，是本人对https://developers.arcgis.com/javascript/latest/sample-code/webmap-basic/index.html的翻译，以供本人学习翻阅使用。
Load a basic web map(加载基本的Web map)
https://developers.arcgis.com/javascript/latest/sample-code/webmap-basic/index.html
此地图使用按州显示意外死亡的网络地图。标记的大小指示每种状态下意外死亡的总数，而颜色指示比率。亮红色表示每10万人中意外死亡人数更多，而深绿色表示每10万人中意外死亡人数更少。从Arcgis Online或Arcgis for Portal项目访问到自定义Web应用程序中。
所需的只是门户网站中Webmap项目的项目ID。
创建一个新的webmap实例，并在webmap的portal item属性中设置门户项ID。由于web map扩展了esri/map，因此可以在mapview的map属性上设置web map实例。
/************************************************************
创建新的webmap实例。webmap必须引用表示保存到arcgis.com或内部部署门户的webmap的portalitem id。
************************************************************/
var webmap = new WebMap({
portalItem: {
id: "e691172598f04ea8881cd2a4adaa45ba"
}
});
/************************************************************
* Set the WebMap instance to the map property in a MapView.
************************************************************/
var view = new MapView({
map: webmap,
container: "viewDiv"
});
要引用内部部署门户中的项目，请在esriconfig.portal url中设置门户的URL。
有关Arcgis API for javascript如何使用门户项的信息，请参阅使用Arcgis平台。
sandbox:
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=webmap-basic
Load a basic web scene
https://developers.arcgis.com/javascript/latest/sample-code/webscene-basic/index.html
此示例演示如何将门户项的Arcgis中的Web场景加载到自定义应用程序中。这幅图描绘了新西兰奥塔戈皇后镇周围的群山在冬至（2014年6月21日）所投下的阴影。每一条线代表一天中特定时间周围山脉投射的阴影边缘。
加载Web场景很容易。所需的只是门户网站中Webscene项目的项目ID。
创建新的Webscene实例，并在Webscene的PortalItem属性中设置门户项ID。由于Webscene扩展了esri/map，因此可以在sceneview的map属性上设置Web场景实例。
/************************************************************
创建新的Webscene实例。Webscene必须引用表示保存到arcgis.com或内部部署门户的Webscene
的portalitem id。
************************************************************/
var scene = new WebScene({
portalItem: {
id: "3a9976baef9240ab8645ee25c7e9c096"
}
});
/************************************************************
* Set the WebScene instance to the map property in a SceneView.
************************************************************/
var view = new SceneView({
map: scene,
container: "viewDiv"
});
要引用内部部署门户中的项目，请在esriconfig.portal url中设置门户的URL。
有关Arcgis API for javascript如何使用门户项的信息，请参阅使用Arcgis平台。
sandbox:
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=webscene-basic
Save a web scene
https://developers.arcgis.com/javascript/latest/sample-code/webscene-save/index.html
此示例演示如何通过创建新项或覆盖已从门户项的Arcgis加载的现有项，将Webscene保存到门户项的Arcgis。
保存Web场景很容易。所需要的只是一个Webscene和一个保存场景的有效门户。
保存到新项目
创建一个新的空Webscene实例和一个门户实例，在其中保存Webscene。加载门户将触发用户身份验证，如果成功，项目将保存到给定门户。
/************************************************************
创建新的空Webscene实例。空Webscene必须至少具有定义为可运行的basemap属性。
************************************************************/
var scene = new WebScene({
basemap: "topo"
});
/************************************************************
* Create a new Portal instance and request immediate user
* authentication.
************************************************************/
var portal = new Portal({
authMode: "immediate"
});
/************************************************************
加载门户将触发身份验证，并且一旦返回的承诺得到解决，Webscene将使用给定的标题保存为新的portalitem。
************************************************************/
portal.load().then(function(){
scene.saveAs({
title: "Empty WebScene",
portal: portal
});
});
覆盖现有项目
创建新的Webscene实例，并在Webscene的PortalItem属性中设置门户项ID。加载门户将触发用户身份验证，如果成功，项目将保存到给定门户。
/************************************************************
创建新的Webscene实例。Webscene可以引用表示保存到arcgis.com或内部部署门户的Webscene的
portalitem id。
************************************************************/
var scene = new WebScene({
portalItem: {
id: "3a9976baef9240ab8645ee25c7e9c096"
}
});
/************************************************************
Create a new Portal instance and request immediate user
authentication.
************************************************************/
var portal = new Portal({
authMode: "immediate"
});
/************************************************************
* Loading of either the scene or the portal will trigger
* authentication and once both Promises are resolved, the
* Webscene will be saved thereby overwriting the previously
* loaded PortalItem with any changes that have occurred.
************************************************************/
scene.load().then(function(){
portal.load().then(function(){
scene.portalItem.title = "Modified WebScene";
scene.portalItem.portal = portal;
scene.save();
});
})
要使用本地门户加载或保存项目，请在esriconfig.portal url中设置门户的URL。
有关Arcgis API for javascript如何使用门户项的信息，请参阅使用Arcgis平台。
sandbox：
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=webscene-save
Web scene - slides(幻灯片)
https://developers.arcgis.com/javascript/latest/sample-code/webscene-slides/index.html
此示例演示如何从Arcgis中为门户项加载Webscene并使用其幻灯片。幻灯片存储场景可视化状态的快照，可以稍后重新应用到场景。幻灯片包含 viewpoint, layer visibilities, basemap and environment (以及title and thumbnail（缩略图）) 等属性，因此3D应用程序的用户可以轻松导航场景并准确地重新创建该场景的存储视图。此外，该示例还演示了如何在当前视图下创建新幻灯片，并将其存储在Webscene演示文稿中。
这个网站描述了波特兰市一个虚构的城市发展项目，它包含了几张幻灯片。每个幻灯片切换不同层的可见性或包含不同的开发视角。
Webscene实例具有处理场景幻灯片的演示属性。幻灯片的属性可用于创建表示每个视点的DOM元素。
// The view must be ready (or resolved) before you can
// access the properties of the WebScene
view.when(function() {
// The slides are a collection inside the presentation
// property of the WebScene
var slides = scene.presentation.slides;
// Loop through each slide in the collection
slides.forEach(function(slide) {
// Create a new <div> element for each slide and place t
20000
he title of
// the slide in the element.
var slideElement = document.createElement("div");
slideElement.id = slide.id;
slideElement.classList.add("slide");
// Create a <div> element to display the slide title text.
var title = document.createElement("div");
title.innerText = slide.title.text;
slideElement.appendChild(title);
// Create a new <img> element and place it inside the newly created <div>.
// This will reference the thumbnail from the slide.
var img = new Image();
img.src = slide.thumbnail.url;
img.title = slide.title.text;
slideElement.appendChild(img);
});
});
为每个幻灯片创建新的DOM元素后，可以设置单击事件处理程序，将幻灯片的设置应用于视图。这是通过幻灯片的applyto（）方法完成的。
slideElement.addEventListener("click", function() {
slide.applyTo(view);
});
Create a local scene
此示例演示如何创建本地场景并将其添加到sceneview。在这个样本中增加了两层，一层描绘了堪萨斯州南部的油气井，另一层显示了附近地震的位置。这些层在场景的表面以及表面下方进行渲染。
您可以在地图下方导航，查看地震的确切位置，以及附近油气井的真实位置和深度。要探索曲面下方的特征，必须倾斜视图。要在曲面下方倾斜，请右键单击视图并向上拖动鼠标。右键单击并向下拖动鼠标以向后倾斜到曲面上方。单击此处阅读有关sceneview中导航的更多信息。
SceneView的ViewingMode属性确定场景是全局的还是局部的。设置clippingarea以定义本地场景的边界。
地面上的NavigationConstraint属性控制用户在局部场景中在曲面下方导航的能力。
// Creating a new map
var map = new Map({
basemap: "topo"
});
// Add the scene to a SceneView
var view = new SceneView({
container: "viewDiv",
map: map,
// Indicates to create a local scene
viewingMode: "local",
// Use the exent defined in clippingArea to define the bounds of the scene
clippingArea: kansasExtent
});
sandbox：
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=scene-local
SceneView - goTo()
https://developers.arcgis.com/javascript/latest/sample-code/scene-goto/index.html
此示例演示如何使用GoTo方法的Options属性自定义相机飞行动画。
下面是一个例子，说明如何定义选项，使飞行速度一般较慢，当它到达目标时速度减慢：
var options = {
speedFactor: 0.1, // animation is 10 times slower than default
easing: "out-quint" // easing function to slow down when reaching the target
};
view.goTo(target, options);
沙盒效果：
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=scene-goto
View padding（视图填充）
https://developers.arcgis.com/javascript/latest/sample-code/view-padding/index.html
此示例演示如何在MapView上使用padding属性。使用此选项可使中心、范围等脱离全视图的一个子部分。设置填充后，可以将UI元素放置在填充区域中，并在视图中使地图正确居中。
在这个示例中，边栏320px宽放在视图右侧的顶部。我们可以将视图的中心偏移相同的宽度，以便将缩放和UI元素正确地放置在剩余的视图空间中。
沙盒演示：
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=view-padding
// Same value as the #sidebar width in CSS view.padding.right = 320;
Create a custom basemap
https://developers.arcgis.com/javascript/latest/sample-code/basemap-custom/index.html
此示例演示如何创建自定义basemap并将其添加到sceneview中的basemaptoggle小部件。basemap是一个简单的底层和参考层容器。
WebTileLayer是从第三方缓存服务创建的，并添加到新的basemap的baselayers属性中，以便用作备用的basemap。
// 使用第三方缓存服务创建WebTileLayer
var mapBaseLayer = new WebTileLayer({
urlTemplate: "https://stamen-tiles-{subDomain}.a.ssl.fastly.net/terrain/{level}/{col}/{row}.png",
subDomains: ["a", "b", "c", "d"],
copyright: "Map tiles by <a href=\"http://stamen.com/\">Stamen Design</a>, " +
"under <a href=\"http://creativecommons.org/licenses/by/3.0\">CC BY 3.0</a>. " +
"Data by <a href=\"http://openstreetmap.org/\">OpenStreetMap</a>, " +
"under <a href=\"http://creativecommons.org/licenses/by-sa/3.0\">CC BY SA</a>."
});
// Create a Basemap with the WebTileLayer. The thumbnailUrl will be used for
// the image in the BasemapToggle widget.
var stamen = new Basemap({
baseLayers: [ mapBaseLayer ],
title: "Terrain",
id: "terrain",
thumbnailUrl: "https://stamen-tiles.a.ssl.fastly.net/terrain/10/177/409.png"
});
// Add the custom basemap to the map
var map = new Map({
basemap: stamen,
ground: "world-elevation"
});
沙盒：https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=basemap-custom
Swap web maps in the same view (在同一视图中交换Web地图)
https://developers.arcgis.com/javascript/latest/sample-code/webmap-swap/index.html
此示例演示如何从Arcgis为门户项初始化多个Webmap。然后可以在单个视图中交换活动的Webmap。
此示例使用以下Web地图：
1.失踪移民-显示国际移民组织（IOM）的所有失踪移民报告。亮蓝色符号表示2015年或以后提交的报告，而深蓝色符号表示2015年之前发生的事件。较大的符号表示报告的死亡人数较多。
2.难民路线-显示进入欧洲的难民路线。
3.2015年欧洲海上抵达-显示难民在南欧的海上抵达情况，2015年1月至7月。
首先，创建一个Webmap数组而不加载它们。
var webmaps = webmapids.map(function(webmapid) {
return new WebMap({
portalItem: {
id: webmapid
}
});
});
然后，根据操作（如单击按钮），可以通过引用视图对象中的新Web地图，来交换地图。
var webmap = webmaps[id]; view.map = webmap;
有关Arcgis API for javascript如何使用门户项的信息，请参阅使用Arcgis平台。
沙盒:https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=webmap-swap
Switch view from 2D to 3D
https://developers.arcgis.com/javascript/latest/sample-code/views-switch-2d-3d/index.html
此示例演示如何将地图视图从二维切换到三维。这可以通过同一个地图实例或单独的Webmap和Webscene实例完成。使用webmaps和webscenes可以减少检查两个视图（如二维和三维符号）不支持的二维和三维之间差异所需的代码量。单击视图左上角的3D按钮，将视图从2D切换到3D，反之亦然。
要实现此行为，请将起始视图中的容器设置为目标视图的容器。同样，在目标视图上设置地图实例和视点。
虽然相机是设置SceneView的可见范围的首选对象，而范围是MapView的首选对象，但每个视图的“视点”属性都很方便，因为它将范围和旋转从一种视图类型持续到下一种视图类型。在二维地图视图中，某些特性（如倾斜和立面图层）将被忽略。
下面的函数演示如何完成此操作。
// Switches the view from 2D to 3D and vice versa
function switchView(){
var is3D = appConfig.activeView.type === "3d";
// remove the reference to the container for the previous view
appConfig.activeView.container = null;
if (is3D){
// if the input view is a SceneView, set the viewpoint on the
// mapView instance. Set the container on the mapView and flag
// it as the active view
appConfig.mapView.viewpoint = appConfig.activeView.viewpoint.clone();
appConfig.mapView.container = appConfig.container;
appConfig.activeView = appConfig.mapView;
switchButton.value = "3D";
} else {
appConfig.sceneView.viewpoint = appConfig.activeView.viewpoint.clone();
appConfig.sceneView.container = appConfig.container;
appConfig.activeView = appConfig.sceneView;
switchButton.value = "2D";
}
}
在二维和三维之间切换的限制
从mapview切换到sceneview需要仔细考虑许多因素。
一些考虑因素见下表，下表这个清单只是一部分。
数据类型-某些层由于其三维特性在二维中不受支持。这些包括scenelayer、integratedmeshlayer和pointcloudlayer。它们将需要完全从地图实例中删除，或者替换为二维副本。例如，可以切换一个表示建筑物的scenelayer，使用一个表示建筑物足迹的多边形FeatureLayer。由于地图的地面在地图视图中被忽略，因此高程层不需要像上面提到的其他层那样被紧密考虑。
符号-尽管大多数二维符号可在sceneview中使用，但地图视图中不支持所有三维符号。如果使用三维符号，渲染器可能需要重新配置。
UI组件-如果使用view.ui.add（）添加小部件和其他UI组件，那么请记住，这些组件需要额外的逻辑来从一个视图持续到下一个视图。
小部件-API中的所有小部件都绑定到特定视图。如果需要将小部件从二维视图持久化为三维视图，则需要包含额外的逻辑来切换每个小部件引用的视图。这包括一个视图的弹出实例。
相关示例：同步MapView和SceneView
创建方解石地图引导应用程序
Create an app with composite views(创建具有复合视图的应用程序)
https://developers.arcgis.com/javascript/latest/sample-code/views-composite-views/index.html
此示例演示如何使用三个具有不同空间引用的复合映射视图创建应用程序。主视图用于显示48个相邻美国的县，而其他两个视图显示阿拉斯加和夏威夷的县。将光标移到某个县上以查看有关该县的信息。
每个视图使用同一个地图实例，其中包含一个FeatureLayer。FeatureLayers以多种方式是动态的，其中包括支持将要素投影到不同的空间参照。为此，请将map添加到视图中，并引用将在DOM中呈现视图的容器。然后将视图的空间参照设置为所需的坐标系。在下面的片段中，我们为阿拉斯加创建了一个嵌入视图。因此，我们选择了将数据投影到阿拉斯加极地立体坐标系中，并设置了范围，以便阿拉斯加能够填充视图。
var akView = new MapView({
container: "akViewDiv",
map: map,
extent: { // autocasts as new Extent()
xmin: 396381,
ymin: -2099670,
xmax: 3393803,
ymax: 148395,
spatialReference: {
wkid: 5936
}
},
spatialReference: {
// WGS 1984 Alaska Polar Stereographic
// projected coordinate system
wkid: 5936
},
ui: {
// clears all default widgets from the
// inset view
components: []
}
});
// Add the alaska view container as an inset view
mainView.ui.add("akViewDiv", "bottom-left");
默认情况下，视图将使用基础地图的空间引用。如果未指定basemap（如在本示例中），则使用第一个操作层的空间引用。
显式设置视图对不同坐标系的空间引用将覆盖操作层的空间引用。
本样本中的层的空间参考是wgs-84网墨卡托辅助球。请看下面的图片，它比较了这两个空间参照之间阿拉斯加的视觉差异。
动态重投影的能力将FeatureLayer与其他静态层（如VectortileLayer）分离开来，后者只显示数据，其中的空间参考数据是处理过的。
Custom background for SceneView(sceneview的自定义背景)
https://developers.arcgis.com/javascript/latest/sample-code/sceneview-background/index.html
默认情况下，Webscene具有真实的天空、大气、星星和背景中的黑色来模拟空间。这在具有真实可视化效果的Web场景中非常有用，如纹理建筑、集成网格层或带有RGB符号的点云。
主题形象化与世界的抽象表现相吻合，因此大多数时候背景色比现实的天空更适合。
在其他时候，你想把地球仪和你的网页结合起来，所以你需要一个透明的背景。这个示例向您展示了如何做到这一点。
1。用自定义颜色替换天空
sceneview.environment中的background属性可用于设置自定义颜色。大气在高缩放级别和本地网站中覆盖背景色，因此禁用它很重要。以下是此的代码段：
const view = new SceneView({
container: "viewDiv",
map: map,
environment: {
background: {
type: "color", // autocasts as new ColorBackground()
color: [255, 252, 244, 1]
},
// disable stars
starsEnabled: false,
//disable atmosphere
atmosphereEnabled: false
}
});
2。使天空透明
要使天空透明，首先需要将背景色中的alpha设置为0。然后通过将sceneview.alphacompositionEnabled属性设置为true来启用视图的透明度。此属性在构造时只能设置一次。
启用alpha合成后，Web场景的性能可能会降低。只有在需要对视图应用透明度时，将此属性设置为true才是很重要的。
const view = new SceneView({
container: "viewDiv",
map: map,
// enable transparency on the view
alphaCompositingEnabled: true,
environment: {
background: {
type: "color", // autocasts as new ColorBackground()
// set the color alpha to 0 for full transparency
color: [255, 252, 244, 0]
},
// disable stars
starsEnabled: false,
//disable atmosphere
atmosphereEnabled: false
}
});
有时候你不需要一个地图。默认情况下，禁用基础地图时，网格显示为地面。现在，可以使用ground.surfaceColor属性将地面更改为单色显示：
var webscene = new WebScene({
basemap: null,
ground: {
surfaceColor: [226, 240, 255]
}
});
Underground navigation in global mode（全球模式下的地下导航）
https://developers.arcgis.com/javascript/latest/sample-code/sceneview-underground/index.html
此示例演示如何更改地面的不透明度和颜色，以及如何在全局Webscene中启用地下导航。
在全局场景中，默认情况下，用户被约束在地面上导航，因此将navigationConstraint设置为“无”将允许用户在地面下导航。
map.ground.navigationConstraint = {
type: "none"
};
有时，在地面以下不导航的情况下，查看地表以下的数据是有用的。将“地面不透明度”（Ground Opacity）设定为小于1的值，使用户可以透过地面看到。不透明度也应用于基础图（如果有）。
map.ground.opacity = 0.6;
在这个示例中，我们在街道级别上可视化场景。这就是为什么不需要一个基线图的原因。为了避免默认使用网格，我们在地面上设置了一个表面颜色：
map.ground.surfaceColor = "#CFC7BC"
Take a screenshot of a SceneView(对SceneView截图)
此示例演示如何使用sceneview.takescreenshot（）方法创建当前视图的图像。该方法返回一个承诺，该承诺通过包含原始图像数据的屏幕截图对象和作为数据URL的图像来解析。在这个示例中，我们将图像数据添加到画布，以便在画布上添加自定义文本。
可以将多个选项传递给该方法。
图像格式可以是JPG或PNG。如果格式为JPG，还可以设置质量参数。
view.takeScreenshot({
format: 'jpg',
quality: 70
});
通过设置图像的宽度或高度，可以向上或向下缩放图像：
view.takeScreenshot({
// scale down image to 50%
// height is calculated from aspect ratio of the view
width: view.width / 2
});
有时，创建视图区域的图像很有用。在这种情况下，我们可以使用area参数仅获取屏幕部分的屏幕截图：
view.takeScreenshot({
area: {
x: 0,
y: 0,
width: 100,
height: 100
}
});
- ArcGIS API for JavaScript 4.2学习笔记[8] 2D与3D视图同步
- ArcGIS API for JavaScript 4.2学习笔记[14] 弹窗的位置、为弹窗添加元素
- ArcGIS API for JavaScript 4.2学习笔记[17] 官方第七章Searching（空间查询）概览与解释
- ArcGIS API for javascript开发笔记（五）——GP服务调用之GP模型的发布及使用详解
- ArcGIS API for JavaScript 4.2学习笔记[25] 官方第八章Analysis（空间查询）概览与解释
- ArcGIS API for JavaScript 4.2学习笔记[9] 同一种视图不同数据（Map）同步
- ArcGIS API for javascript开发笔记（五）——GP服务调用之GP模型的发布及使用详解
- ArcGIS 9.3 For JavaScript API 学习笔记
- ArcGIS API for JavaScript 4.2学习笔记[10] 2D添加指北针widget、视图保存、视图padding（第二章完结）
- ArcGIS API for JavaScript 4.2学习笔记[12] View的弹窗（Popup）
- ArcGIS API for JavaScript开发教程系列(二)之地图控件
- ArcGIS API for JavaScript开发教程系列(四)之离线部署与跨域问题
- ArcGIS API for javascript开发笔记（六）——REST详解及如何使用REST API调用GP服务
- ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录
- 关于翻译ArcGIS API for JavaScript开发书籍的经历
- ArcGIS Server Rest for Javascript API 学习教程-2
- ArcGIS API for JavaScript 4.2学习笔记[30] 点和线高程查询（第八章完结）
- ArcGIS API for javascript开发笔记（六）——REST详解及如何使用REST API调用GP服务
- ArcGIS API for JavaScript开发笔记（一）GP模型创建及服务发布
- ArcGIS API for JavaScript 4.2学习笔记[13] Layer的弹窗（PopupTemplate）