能看所有网站的浏览器品牌营销策略研究
文章目录
- 1 AMD 引用 ArcGIS Maps SDK for JavaScript
- 2 加载相应模块
- 3 创建地图
- 4 创建 2D 视图 view
- 5 确定页面内容
- 6 CSS 样式
- 7 完整代码
本教程使用 AMD 模块，指导您如何在二维地图视图中创建一个简单的地图。
1 AMD 引用 ArcGIS Maps SDK for JavaScript
在 <head> 标记内，使用 <script> 和 <link> 标记引用 ArcGIS Maps SDK for JavaScript：
<!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><!-- 从 CDN 加载 ArcGIS Maps SDK for JavaScript --><link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" /><!-- 引用 main.css 样式表 --><script src="https://js.arcgis.com/4.27/"></script></head>
</html>
<script> 标记从 CDN 加载 ArcGIS Maps SDK for JavaScript。当新版本的 API 发布时，更新版本号以匹配新发布的版本。
<link> 标签引用 main.css 样式表，其中包含 Esri 部件和组件的特定样式。
2 加载相应模块
在<body>标签内的 <script> 标签中，从 API 加载特定模块。使用下面代码段中的语法加载以下模块：
<script>require([ "esri/Map", "esri/views/MapView" ], (Map, MapView) => {// Code to create the map and view will go here});
</script>
将 JavaScript 代码放在
<script>标签内对于创建简单页面或进行实验非常有用，但不适合大型应用程序。在构建大型应用程序时，所有 JavaScript 都应放在单独的 .js 文件中。
全局 require() 函数用于加载 API 的 AMD 模块。
3 创建地图
新地图使用 Map 创建，Map 是对从 esri/Map 模块加载的 Map 类 的引用。您可以通过向 Map 构造函数传递一个对象来指定地图属性，如 basemap。
require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {const map = new Map({basemap: "topo-vector"});
});
其他 basemap 包括：
satellite(卫星)hybrid(混合)gray-vector(灰色矢量)dark-gray-vector(深灰色矢量)oceans(海洋)streets-vector(街道矢量)osmnational-geographic(国家地理)streets-night-vector(街道夜景矢量)。
4 创建 2D 视图 view
将视图 Views 作为 HTML 文件容器的节点引用，允许用户在 HTML 页面内查看地图。创建一个新的 MapView，并通过向其构造函数传递一个对象来设置其属性：
require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {const map = new Map({basemap: "topo-vector"});const view = new MapView({container: "viewDiv", // Reference to the DOM node that will contain the viewmap: map // References the map object});
});
在此代码段中，我们将 container 属性设置为容纳地图的 DOM 节点的名称，在本例中，我们使用了 <div> 元素的 id 属性。map 属性引用我们在上一步中创建的地图对象。有关可在视图上设置的其他属性（包括地图中心 center 和缩放 zoom），请参阅 MapView 文档，这些属性可用于定义视图的初始范围。
有两种类型的视图可用： 地图视图（用于查看二维地图）和场景视图（用于查看三维地图）。单击此处了解更多有关使用 3D 视图创建地图的信息。
5 确定页面内容
现在，创建map和view所需的JavaScript已经完成！下一步是添加用于查看地图的相关HTML。
对于这个例子，HTML非常简单：添加一个<body>标记，它定义了在浏览器中可见的内容，并在将创建视图的body中添加一个 <div> 元素。
<body><div id="viewDiv"></div>
</body>
<div> 的 id 为 viewDiv，以匹配在构造函数中传递给 MapView 中的 container 容器属性的 id。
6 CSS 样式
使用 <head> 标签内的 <style> 标签为页面内容设置样式。要使地图充满浏览器窗口，请在页面 <style> 标签中添加以下 CSS：
<style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}
</style>
7 完整代码
代码：
<!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><!-- 从 CDN 加载 ArcGIS Maps SDK for JavaScript --><link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" /><!-- 引用 main.css 样式表 --><script src="https://js.arcgis.com/4.27/"></script></head><body><!-- 存放地图内容的div --><div id="viewDiv"></div><script>require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {// 创建Map对象，指定地图const map = new Map({basemap: "topo-vector"});// 创建MapView对象const view = new MapView({container: "viewDiv", // viewDiv为容器div的idmap: map, // 地图所在的Map对象zoom: 4, // 初始LOD缩放等级（0-23） level of detail (LOD)// scale: 50000000, // 设置初始比例尺为 1:50,000,000 zoom和scale选其一即可center: [108, 32] // 地图初始中心位置经纬度 [longitude,latitude]});});</script>
</body></html>
结果展示：
参考链接：
https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/