个人网站首页内容,触屏网站开发教程,微信公众号怎么做预约功能,平台推广是做什么的文章目录 1 AMD 引用 ArcGIS Maps SDK for JavaScript2 加载相应模块3 创建地图4 创建 2D 视图 view5 确定页面内容6 CSS 样式7 完整代码 本教程使用 AMD 模块#xff0c;指导您如何在二维地图视图中创建一个简单的地图。
1 AMD 引用 ArcGIS Maps SDK for JavaScript
在 指导您如何在二维地图视图中创建一个简单的地图。
1 AMD 引用 ArcGIS Maps SDK for JavaScript
在 head 标记内使用 script 和 link 标记引用 ArcGIS Maps SDK for JavaScript
!DOCTYPE html
htmlheadmeta charsetutf-8 /meta nameviewport contentinitial-scale1, maximum-scale1, user-scalableno /titleIntro to MapView - Create a 2D map/title!-- 从 CDN 加载 ArcGIS Maps SDK for JavaScript --link relstylesheet hrefhttps://js.arcgis.com/4.27/esri/themes/light/main.css /!-- 引用 main.css 样式表 --script srchttps://js.arcgis.com/4.27//script/head
/htmlscript 标记从 CDN 加载 ArcGIS Maps SDK for JavaScript。当新版本的 API 发布时更新版本号以匹配新发布的版本。
link 标签引用 main.css 样式表其中包含 Esri 部件和组件的特定样式。
2 加载相应模块
在body标签内的 script 标签中从 API 加载特定模块。使用下面代码段中的语法加载以下模块
scriptrequire([ 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 元素。
bodydiv idviewDiv/div
/bodydiv 的 id 为 viewDiv以匹配在构造函数中传递给 MapView 中的 container 容器属性的 id。
6 CSS 样式
使用 head 标签内的 style 标签为页面内容设置样式。要使地图充满浏览器窗口请在页面 style 标签中添加以下 CSS
stylehtml,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}
/style7 完整代码
代码
!DOCTYPE html
htmlheadmeta charsetutf-8 /meta nameviewport contentinitial-scale1, maximum-scale1, user-scalableno /titleIntro to MapView - Create a 2D map/titlestylehtml,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}/style!-- 从 CDN 加载 ArcGIS Maps SDK for JavaScript --link relstylesheet hrefhttps://js.arcgis.com/4.27/esri/themes/light/main.css /!-- 引用 main.css 样式表 --script srchttps://js.arcgis.com/4.27//script/headbody!-- 存放地图内容的div --div idviewDiv/divscriptrequire([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/
