您的位置：首页 > Web前端 > JavaScript

ArcGIS API for JavaScript 教程翻译笔记：SceneView的介绍

2019-02-08 19:27 162 查看

本文非原创，是本人对https://developers.arcgis.com/javascript/latest/sample-code/intro-sceneview/index.html系列教程的翻译，以供本人学习翻阅使用。

本教程将指导您如何在三维场景视图中创建简单的地图。

1.参考 the ArcGIS API for JavaScript

First, set up a basic HTML document similar to the following example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to SceneView - Create a 3D map</title>
</head>
</html>

在< head >标记内，使用< script >和< link >标记参考arcgis api for javascript:

<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
<script src="https://js.arcgis.com/4.10/"></script>

< script >标记从cdn加载用于javascript的Arcgis API。当新版本的API发布时，更新版本号以匹配新发布的版本。
< link >标记引用main.css样式表，该样式表包含特定于ESRI小部件和组件的样式。

2. 加载模块

使用第二个< script >标记从API加载特定模块。使用下面代码段中的语法加载以下模块：
esri/map-加载特定于创建map的代码
esri/views/sceneview-加载允许在3D中查看地图的代码

<script>
require([
"esri/Map",
"esri/views/SceneView"
], function(Map, SceneView) {
// Code to create the map and view will go here
});
</script>

3. 创建地图

使用Map类创建新的map，而Map类是对从esri/map模块加载的map类的引用。通过将对象传递给map构造函数，可以指定map属性，例如basemap和’ground’。

require([
"esri/Map",
"esri/views/SceneView"
], function(Map, SceneView) {
var map = new Map({
basemap: "streets",
ground: "world-elevation"
});
});

“map”的“ground”属性指定地图的表面属性，仅当将地图添加到三维场景视图时才相关。字符串“World Elevation”指定使用World Elevation服务的地面实例。

4. 创建三维视图

查看在HTML文件中用作容器的引用节点，允许用户查看HTML页面内的map。创建新的sceneview并通过将对象传递给其构造函数来 4000 设置其属性：

require([
"esri/Map",
"esri/views/SceneView"
], function(Map, SceneView) {
var map = new Map({
basemap: "streets",
ground: "world-elevation"
});
var view = new SceneView({
container: "viewDiv",  // Reference to the DOM node that will contain the view
map: map  // References the map object created in step 3
});
});

在这段代码中，我们将container属性设置为保存map的DOM节点的名称。map的属性引用在上一步中创建的map对象。有关可以在视图上设置的其他属性（包括中心和比例），请参见sceneview文档，这些属性可用于定义视图的初始范围。

5. 定义页面内容

现在，创建地图和视图所需的javascript完成了！下一步是添加相关联的HTML以查看地图。对于这个示例，HTML非常简单：添加一个< body >标记，它定义了浏览器中可见的内容，并在将创建视图的body中添加一个< div >元素。

<body>
<div id="viewDiv"></div>
</body>

< div >的ID为“viewDiv”，该ID匹配传递给构造函数中sceneview的container属性的ID。

6。设置页面样式

在< head >中使用< style >标记设置页面内容的样式。要使地图填充浏览器窗口，请在页面的< style >中添加以下CSS：

<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>

现在，您已经使用arcgis api for javascript 4.0在3D中构建了第一个Web应用程序！最终的HTML代码应该如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to SceneView - Create a 3D map</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style><link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
<script src="https://js.arcgis.com/4.10/"></script><script>
require([
"esri/Map",
"esri/views/SceneView"
], function(Map, SceneView){
var map = new Map({
basemap: "streets",
ground: "world-elevation"
});
var view = new SceneView({
container: "viewDiv",     // Reference to the scene div created in step 5
map: map,                 // Reference to the map object created before the scene
scale: 50000000,          // Sets the initial scale to 1:50,000,000
center: [-101.17, 21.78]  // Sets the center point of view with lon/lat
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body></html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航