了解如何創(chuàng)建和顯示帶有基本地圖圖層的地圖。
地圖包含地理數(shù)據(jù)層。地圖包含一個基本地圖層，以及一個或多個數(shù)據(jù)層（可選）?？梢允褂玫貓D視圖顯示地圖的特定區(qū)域，并設(shè)置位置和縮放級別。
本教程將向您展示如何使用地形底圖層創(chuàng)建和顯示加利福尼亞州圣莫尼卡山脈的地圖。
本教程中的地圖和代碼將用作其他二維教程的起點。
先決條件
您需要ArcGIS Developer或ArcGIS Online帳戶才能訪問儀表板并創(chuàng)建API鍵。
步驟
創(chuàng)建新筆
轉(zhuǎn)到CodePen為您的地圖應(yīng)用程序創(chuàng)建新的筆。
添加HTML
定義一個HTML頁面以創(chuàng)建一個具有web瀏覽器窗口全寬和全高的地圖。
在CodePen>HTML中，添加HTML和CSS以創(chuàng)建帶有viewDiv元素的頁面。viewDiv是顯示地圖的元素，它的CSS重置任何瀏覽器設(shè)置，這樣它就可以使用瀏覽器的全寬和全高。
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
參考API
在＜head＞標(biāo)記中，添加對CSS文件和JS庫的引用。
<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.27/"></script>
添加模塊
ArcGIS Maps SDK for JavaScript可作為AMD模塊和ES模塊使用，但本教程基于AMD。AMD require函數(shù)使用引用來確定將加載哪些模塊——例如，您可以指定“esri/Map”來加載Map模塊。加載模塊后，它們將作為參數(shù)（例如Map）傳遞給回調(diào)函數(shù)，以便在應(yīng)用程序中使用。保持模塊引用和回調(diào)參數(shù)的順序相同是很重要的。有關(guān)不同類型模塊的更多信息，請訪問工具簡介指南主題。
在＜head＞標(biāo)記中，添加＜script＞標(biāo)記和require語句以加載Map和MapView模塊。您也可以將JavaScript代碼添加到CodePen>JS面板，而不是HTML面板。如果這樣做，請刪除＜script＞標(biāo)記。
<script>
require(["esri/config", "esri/Map", "esri/views/MapView"], function(esriConfig, Map, MapView) {
});
</script>
獲取API密鑰
訪問ArcGIS服務(wù)需要API密鑰。
- 轉(zhuǎn)到您的開發(fā)人員儀表板以獲取API密鑰。
- 復(fù)制密鑰，因為它將在下一步中使用。
創(chuàng)建地圖
使用Map設(shè)置基礎(chǔ)映射層并應(yīng)用API密鑰。
返回CodePen。
在require語句中，創(chuàng)建一個新的Map，并將basemap屬性設(shè)置為arcgis地形。要啟用對Basemap層服務(wù)的訪問，請設(shè)置Map的apiKey屬性。
esriConfig.apiKey = "YOUR_API_KEY";
const map = new Map({
basemap: "arcgis-topographic" // Basemap layer service
});
創(chuàng)建地圖視圖
使用MapView類可以設(shè)置要顯示的地圖的位置。
創(chuàng)建MapView并設(shè)置地圖特性。要使地圖視圖居中，請將居中特性設(shè)置為-118.80500,34.02700，并將縮放特性設(shè)置為13。將容器屬性設(shè)置為viewDiv以顯示地圖的內(nèi)容。
const view = new MapView({
map: map,
center: [-118.805, 34.027], // Longitude, latitude
zoom: 13, // Zoom level
container: "viewDiv" // Div element
});
運行應(yīng)用程序
在CodePen中，運行代碼以顯示地圖。
該地圖應(yīng)顯示加利福尼亞州圣莫尼卡山脈地區(qū)的地形基底層。
完整代碼
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.27/"></script>
<script>
require(["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, latitude
zoom: 13, // Zoom level
container: "viewDiv" // Div element
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
運行應(yīng)用程序
在CodePen中，運行代碼以顯示地圖。
該地圖應(yīng)顯示加利福尼亞州圣莫尼卡山脈地區(qū)的地形基底層。文章來源：http://www.zghlxwxcb.cn/news/detail-633332.html
注明：翻譯自esri，僅供個人查閱使用，侵刪文章來源地址http://www.zghlxwxcb.cn/news/detail-633332.html
到了這里，關(guān)于ArcGIS API for JavaScript 4.x 教程（一） 顯示一張地圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
