1、我们来看下面一段代码:
const view = new MapView({
map: map,
center: [-118.805, 34.027],
zoom: 13,
container: "viewDiv"
});
该段代码实例化了一个MapView对象view,在实例化的时候可以进行参数的初始化,这里初始化了map、center、zoom和container,含义跟他们的名字一样,arcgis js默认自带了底部显示的那一行属性信息和左上角的放大缩小按钮,如果需要添加别的地图操作按钮该怎么办呢?通过代码可以将其移除或者添加需要的控件,例如移除最下面一行信息:
view.ui.remove("attribution");
添加指南针:
view.ui.add("compass");
但是你会发现指南针的位置在左上角,与放大缩小按钮有重叠,那该怎么办呢?
修改第一段列出的代码:
const view = new MapView({
map: map,
center: [-118.805, 34.027],
zoom: 13,
container: "viewDiv",
ui: {
components: ["zoom", "compass"]
}
});
这次就变成这样了,达到了我们想要的结果:
同时底部的属性信息也没了O(∩_∩)O,大功告成!
2、ArcGIS API for JavaScript 提供了一个接口来设置简单的UI界面,同时允许这些组件放在不同的角落,添加搜索框到右上角:
var search = new Search({
view: view
});
view.ui.add(search, "top-right");
别忘了在require中添加"esri/widgets/Search"
3、如何把缩放按钮放到右下角呢?
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS Developer Guide: Basemap layers</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-view .esri-ui .esri-attribution {
position: fixed;
bottom: unset;
top: 0;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.20/"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/widgets/Zoom",
"esri/widgets/Attribution"
], (
esriConfig,
Map,
MapView,
Zoom,
Attribution,
) => {
esriConfig.apiKey = "YOUR_API_KEY";
const map = new Map({
basemap: "arcgis-imagery"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-10, 30],
zoom: 2,
constraints: {
snapToZoom: false,
},
padding: { top: 15 },
ui: {
components: []
}
});
const attribution = new Attribution({ view });
view.ui.add(attribution, "manual");
const zoom = new Zoom({
view
})
view.ui.add(zoom, "bottom-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
4、arcgis提供了非常多的控件供大家选择,根据具体需要选择,在官网查看https://developers.arcgis.com/javascript/latest/api-reference/
比如卷帘工具swipe,自从4.13版本之后才有,首先添加"esri/widgets/Swipe"
官网链接:Swipe Widget | ArcGIS API for JavaScript
官网例子:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Swipe Widget | Sample | ArcGIS API for JavaScript 4.20</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/dark/main.css" />
<script src="https://js.arcgis.com/4.20/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer",
"esri/widgets/LayerList",
"esri/widgets/Swipe",
"esri/widgets/Expand"
], function (Map, MapView, TileLayer, LayerList, Swipe, Expand) {
const map = new Map({
basemap: "satellite"
});
const infrared = new TileLayer({
url:
"https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/WV03_Kilauea_20180519_ShortwaveInfrared/MapServer",
maxScale: 3000
});
map.add(infrared);
const nearInfrared = new TileLayer({
url:
"https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/WV03_Kilauea_20180519_NearInfrared/MapServer",
maxScale: 3000
});
map.add(nearInfrared);
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 14,
center: [-154.88, 19.46], // longitude, latitude
constraints: {
maxZoom: 17,
minZoom: 8
}
});
// create a layerlist and expand widget and add to the view
const layerList = new LayerList({
view: view
});
const llExpand = new Expand({
view: view,
content: layerList,
expanded: false
});
view.ui.add(llExpand, "top-right");
// create a new Swipe widget
const swipe = new Swipe({
leadingLayers: [infrared],
trailingLayers: [nearInfrared],
position: 35, // set position of widget to 35%
view: view
});
// add the widget to the view
view.ui.add(swipe);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
官网效果:
我们注意到该例子的样式风格是黑色,在哪设置呢?答案是css样式:
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.20/"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/dark/main.css" />
<script src="https://js.arcgis.com/4.20/"></script>
找到两者的区别了没(●ˇ∀ˇ●)