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

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

2019-02-08 18:54 357 查看

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

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

1. 参考arcgis api for javascript

首先，设置类似以下示例的基本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 MapView - Create a 2D 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-加载特定于创建映射的代码
esri/views/mapview-加载允许在二维中查看地图的代码

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

在构建简单的页面或进行试验时，将javascript放入脚本标记中是很有用的,
但不适用于更大的应用程序。
当构建一个更大的应用程序时，
所有的javascript都应该在单独的.js文件中。

全局require（）函数（由dojo提供）用于加载模块。ESRI的JavaScriptAPI构建在Dojo之上，以利用Dojo的模块化代码库及其协调跨浏览器差异的能力。有关Dojo和JavaScriptAPI之间关系的更多信息，请参阅使用Dojo和为什么使用Dojo。

3. 创建地图

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

require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {
var map = new Map({
basemap: "streets"
});
});

其他基础地图选项包括：satellite, hybrid, topo, gray, dark-gray, oceans, osm, national-geographic。通过修改沙盒中的basemap选项来使用备用的basemap。有关其他地图选项的详细信息，请查看地图类。

4. 创建 2D 视图

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

require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {
var map = new Map({
basemap: "streets"
});

var view = new MapView({
container: "viewDiv",  // Reference to the DOM node that will contain the view
map: map               // References the map object created in step 3
});
});

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

有两种视图可用：MapView（用于查看二维地图）和SceneView（用于查看三维地图）.

5. 定义页面内容

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

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

< div >的ID为“viewDiv”，该ID匹配传递给构造函数中mapview的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在2d中构建了第一个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 MapView - Create a 2D 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/MapView"
], function(Map, MapView){
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",  // Reference to the scene div created in step 5
map: map,  // Reference to the map object created before the scene
zoom: 4,  // Sets zoom level based on level of detail (LOD)
center: [15, 65]  // Sets center point of view using longitude,latitude
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body></html>

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

标签：

相关文章推荐

新的分享

章节导航