目錄
添加網(wǎng)頁
引用接口
添加模塊與模塊實(shí)例
獲取API密鑰
創(chuàng)建地圖
創(chuàng)建地圖視圖
添加圖形圖層
在底圖之間切換
在圖庫中選擇底圖
默認(rèn)底圖視圖（Home）控件
圖層列表（Layerlist）控件
圖例（Legend）控件
比例尺（ScaleBar）控件
指北針（Compass）控件
查看我的位置（Locate）控件
搜索引擎（Search）控件
3D平移或旋轉(zhuǎn)（NavigationToggle）控件
?放大縮小（Zoom）控件
控件總結(jié)?
添加網(wǎng)頁
????????添加 HTML 和 CSS 以創(chuàng)建包含元素的頁面。元素顯示地圖，其CSS重置任何瀏覽器設(shè)置，以便它可以使用瀏覽器的整個(gè)寬度和高度。
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximun-scale=1 user-scalable=no" />
<title>ArcGIS API 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>引用接口
????????在標(biāo)記中，添加對(duì) CSS 文件和 JS 庫的引用。（需要使用最新的API庫，本文使用的4.23版本的）
<link rel="stylesheet" >
<script src="https://js.arcgis.com/4.23/"></script>添加模塊與模塊實(shí)例
????????ArcGIS JS API 包含AMD模塊。在語句中引用所需模塊，這里用Map展示。
<script>
require(["esri/Map"], function(Map){
});
</script>獲取API密鑰
????????接口密鑰是訪問ArcGIS服務(wù)所必需的。(這個(gè)需要自己申請(qǐng)，學(xué)習(xí)使用不太需要。)
esriConfig.apiKey = "YOUR_API_KEY";創(chuàng)建地圖
????????在語句中，創(chuàng)建新的 Map ?。要啟用對(duì)底圖圖層服務(wù)的訪問，設(shè)置地圖的屬性。
require(["esri/Map"], function(Map){
const map = new Map({
basemap: "streets",// Basemap layer service
});
});
創(chuàng)建地圖視圖
????????創(chuàng)建?MapView?并設(shè)置?map?屬性。要使地圖視圖居中，請(qǐng)將?center?屬性設(shè)置為 ，并將?zoom?屬性設(shè)置為 。將容器屬性設(shè)置為 以顯示地圖的內(nèi)容
require(["esri/views/MapView"], function(MapView){
const view = new MapView({
map: map,
center: [100,32], // Longitude, latitude
zoom: 4, // Zoom level
container: "viewDiv" // Div element
});
});
添加圖形圖層
????????一個(gè)圖形圖層是 的容器圖形.它與地圖視圖以在地圖.您可以添加多個(gè)圖形圖層到地圖視圖.圖形圖層顯示在所有其他圖層之上層，將剛剛創(chuàng)建的地圖放入圖形圖層
require(["esri/layers/GraphicsLayer"], function(GraphicsLayer){
const graphicsLayer = new GraphicsLayer();
const map = new Map({
basemap: "streets",// Basemap layer service
layers:[graphicsLayer]
});
});
在底圖之間切換
????????創(chuàng)建底圖切換并設(shè)置視圖。將 nextBasemap 屬性設(shè)置為arcgis-imagery。并將微件添加到視圖的一角。
require(["esri/widgets/BasemapToggle"], function(BasemapToggle){
const basemapToggle = new BasemapToggle({
view:view,
nextBasemap:"arcgis-imagery"
});
view.ui.add(basemapToggle,"bottom-right");
});
在圖庫中選擇底圖
????????創(chuàng)建底圖圖集錦圖并在源屬性中設(shè)置 以搜索“面向開發(fā)人員的世界底圖”底圖組。
require(["esri/widgets/BasemapGallery"], function(BasemapGallery){
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
});
默認(rèn)底圖視圖（Home）控件
require(["esri/widgets/Home"], function (Home) {
//默認(rèn)地圖視圖
var home = new Home({
view:view
});
view.ui.add(home,"top-left");
});
圖層列表（Layerlist）控件
require(["esri/widgets/LayerList"], function (LayerList) {
//圖層列表
const layerlist = new LayerList({
view: view
});
view.ui.add(layerlist,"bottom-left");
});
圖例（Legend）控件
require(["esri/widgets/Legend"], function (Legend) {
//圖例
const legend = new Legend({
view: view
});
view.ui.add(legend,"bottom-right");
});
比例尺（ScaleBar）控件
require(["esri/widgets/ScaleBar"], function (ScaleBar) {
//比例尺
const scalebar = new ScaleBar({
view: view,
style:"ruler",
unit:"metric"
});
view.ui.add(scalebar,{position:"bottom-left"});
});
指北針（Compass）控件
require(["esri/widgets/Compass"], function (Compass) {
//指北針
const compasswidgets = new Compass({
view: view
});
view.ui.add(compasswidgets,"top-left");
});
查看我的位置（Locate）控件
require(["esri/widgets/Locate"], function (Locate) {
//查看我的位置
const locate = new Locate({
view: view
});
view.ui.add(locate,{position:"top-left"});
});
搜索引擎（Search）控件
require(["esri/widgets/Search"], function (Search) {
//搜索引擎
var searchWidget = new Search({
view:view
});
view.ui.add(searchWidget,"top-left");
});
3D平移或旋轉(zhuǎn)（NavigationToggle）控件
require(["esri/widgets/NavigationToggle"], function (NavigationToggle) {
//3D平移或旋轉(zhuǎn)
var navigationToggle = new NavigationToggle({
view:view,
layout:"horizontal"
});
view.ui.add(navigationToggle,"top-left");
});
文章來源：http://www.zghlxwxcb.cn/news/detail-520251.html
?放大縮小（Zoom）控件
require(["esri/widgets/Zoom"], function (Zoom) {
//放大縮小
var zoom = new Zoom({
view:view,
layout:"horizontal"
});
view.ui.move(["zoom"],"top-left");
});
文章來源地址http://www.zghlxwxcb.cn/news/detail-520251.html
控件總結(jié)?
require(["esri/widgets/XXX"], function (XXX) {
var widgetXXX = new XXX({
view:view,
......
});
view.ui.add(widgetXXX,"top-left");
});到了這里，關(guān)于ArcGIS API for JavaScript Map與地圖控件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
