国内建网站知名企业,企业建立网站主要包括那些流程,优化搜索点击次数的方法,WordPress装不上jetpack了解如何更改地图中的基础地图图层。 基础地图图层#xff1a; 基础地图层是用于访问和显示来自基础地图层服务的数据的层。它为地图或场景提供视觉和地理上下文#xff0c;通常包含具有管理边界和地名的全局数据。 基本地图图层服务提供了许多基本地图图层样式#xff0c;例…了解如何更改地图中的基础地图图层。 基础地图图层 基础地图层是用于访问和显示来自基础地图层服务的数据的层。它为地图或场景提供视觉和地理上下文通常包含具有管理边界和地名的全局数据。 基本地图图层服务提供了许多基本地图图层样式例如地形、街道和图像您可以在地图中使用这些样式。 在本教程中您将使用Basemap Toggle和BasemapGallery小部件来选择和显示不同的Basemap图层。 笔记 有关更多信息请访问映射API和定位服务指南中的Basemap层。 步骤
创建新笔
若要开始请完成“显示地图”教程或使用此笔。
设置API键
要访问ArcGIS服务您需要一个API密钥。 转到您的仪表板以获取API密钥。 在CodePen中将apiKey设置为您的密钥这样它就可以用于访问basemap层和位置服务。
esriConfig.apiKey YOUR_API_KEY;
const map new Map({basemap: arcgis-topographic // Basemap layer service
});添加模块
在require语句中添加Basemap Toggle和BasemapGallery模块。 require([esri/config,esri/Map,esri/views/MapView,esri/widgets/BasemapToggle,esri/widgets/BasemapGallery], function(esriConfig, Map, MapView, BasemapToggle, BasemapGallery) {在基础地图之间切换
在两个基本地图之间进行选择的一个简单方法是使用基本地图切换小部件。使用小部件在arcgis地形图和arcgis图像基础图之间切换。 创建“Basemap Toggle”并设置视图。将nextBasemap属性设置为arcgis图像。 const basemapToggle new BasemapToggle({view: view,nextBasemap: arcgis-imagery});将小部件添加到视图的右下角。
view.ui.add(basemapToggle,bottom-right);在基础地图之间切换。
从图库中选择基础地图
您也可以使用BasemapGallery小部件来选择不同的基础地图。 创建一个BasemapGallery并在源属性中设置查询以搜索“开发人员的世界Basemaps”basemap组。 const basemapGallery new BasemapGallery({view: view,source: {query: {title: World Basemaps for Developers AND owner:esri}}});将小部件添加到视图的右上角。 view.ui.add(basemapGallery, top-right); // Add to the view完整代码
html
headmeta charsetutf-8meta nameviewport contentinitial-scale1, maximum-scale1, user-scalablenotitleArcGIS Maps SDK for JavaScript Tutorials: Change the basemap layer/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,esri/widgets/BasemapToggle,esri/widgets/BasemapGallery], function(esriConfig, Map, MapView, BasemapToggle, BasemapGallery) {esriConfig.apiKey YOUR_API_KEY;const map new Map({basemap: arcgis-topographic});const view new MapView({container: viewDiv,map: map,center: [-118.80543,34.02700],zoom: 13});const basemapToggle new BasemapToggle({view: view,nextBasemap: arcgis-imagery});view.ui.add(basemapToggle,bottom-right);const basemapGallery new BasemapGallery({view: view,source: {query: {title: World Basemaps for Developers AND owner:esri}}});view.ui.add(basemapGallery, top-right); // Add to the view});/script
/head
bodydiv idviewDiv/div
/body
/html运行应用程序
在CodePen中运行代码以显示地图。 您的应用程序中应该有两个小部件它们提供了不同的方式来选择基本地图。 注明翻译自esri仅供个人查阅使用侵删
