消防网站建设的风格,优秀的国外设计网站,wordpress多域名配置文件,工业企业网络推广了解如何创建和显示带有基本地图图层的地图。
地图包含地理数据层。地图包含一个基本地图层#xff0c;以及一个或多个数据层#xff08;可选#xff09;。可以使用地图视图显示地图的特定区域#xff0c;并设置位置和缩放级别。 本教程将向您展示如何使用地形底图层创建和…了解如何创建和显示带有基本地图图层的地图。
地图包含地理数据层。地图包含一个基本地图层以及一个或多个数据层可选。可以使用地图视图显示地图的特定区域并设置位置和缩放级别。 本教程将向您展示如何使用地形底图层创建和显示加利福尼亚州圣莫尼卡山脉的地图。 本教程中的地图和代码将用作其他二维教程的起点。
先决条件 您需要ArcGIS Developer或ArcGIS Online帐户才能访问仪表板并创建API键。 步骤
创建新笔
转到CodePen为您的地图应用程序创建新的笔。
添加HTML
定义一个HTML页面以创建一个具有web浏览器窗口全宽和全高的地图。 在CodePenHTML中添加HTML和CSS以创建带有viewDiv元素的页面。viewDiv是显示地图的元素它的CSS重置任何浏览器设置这样它就可以使用浏览器的全宽和全高。
htmlheadmeta charsetutf-8 /meta nameviewport contentinitial-scale1, maximum-scale1, user-scalableno /titleArcGIS Maps SDK for JavaScript Tutorials: Display a map/titlestylehtml,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}/style/headbodydiv idviewDiv/div/body
/html参考API
在head标记中添加对CSS文件和JS库的引用。
link relstylesheet hrefhttps://js.arcgis.com/4.27/esri/themes/light/main.css
script srchttps://js.arcgis.com/4.27//script添加模块
ArcGIS Maps SDK for JavaScript可作为AMD模块和ES模块使用但本教程基于AMD。AMD require函数使用引用来确定将加载哪些模块——例如您可以指定“esri/Map”来加载Map模块。加载模块后它们将作为参数例如Map传递给回调函数以便在应用程序中使用。保持模块引用和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息请访问工具简介指南主题。 在head标记中添加script标记和require语句以加载Map和MapView模块。您也可以将JavaScript代码添加到CodePenJS面板而不是HTML面板。如果这样做请删除script标记。 scriptrequire([esri/config, esri/Map, esri/views/MapView], function(esriConfig, Map, MapView) {});/script获取API密钥
访问ArcGIS服务需要API密钥。
转到您的开发人员仪表板以获取API密钥。复制密钥因为它将在下一步中使用。
创建地图
使用Map设置基础映射层并应用API密钥。 返回CodePen。 在require语句中创建一个新的Map并将basemap属性设置为arcgis地形。要启用对Basemap层服务的访问请设置Map的apiKey属性。 esriConfig.apiKey YOUR_API_KEY;const map new Map({basemap: arcgis-topographic // Basemap layer service});创建地图视图
使用MapView类可以设置要显示的地图的位置。 创建MapView并设置地图特性。要使地图视图居中请将居中特性设置为-118.80500,34.02700并将缩放特性设置为13。将容器属性设置为viewDiv以显示地图的内容。 const view new MapView({map: map,center: [-118.805, 34.027], // Longitude, latitudezoom: 13, // Zoom levelcontainer: viewDiv // Div element});运行应用程序 在CodePen中运行代码以显示地图。 该地图应显示加利福尼亚州圣莫尼卡山脉地区的地形基底层。
完整代码
htmlheadmeta charsetutf-8 /meta nameviewport contentinitial-scale1, maximum-scale1, user-scalableno /titleArcGIS Maps SDK for JavaScript Tutorials: Display a map/titlestylehtml,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}/stylelink relstylesheet hrefhttps://js.arcgis.com/4.27/esri/themes/light/main.cssscript srchttps://js.arcgis.com/4.27//scriptscriptrequire([esri/config, esri/Map, esri/views/MapView], function(esriConfig, Map, MapView) {esriConfig.apiKey YOUR_API_KEY;const map new Map({basemap: arcgis-topographic // Basemap layer service});const view new MapView({map: map,center: [-118.805, 34.027], // Longitude, latitudezoom: 13, // Zoom levelcontainer: viewDiv // Div element});});/script/headbodydiv idviewDiv/div/body
/html运行应用程序
在CodePen中运行代码以显示地图。 该地图应显示加利福尼亚州圣莫尼卡山脉地区的地形基底层。 注明翻译自esri仅供个人查阅使用侵删
