arcgis前端(4)-----＞基础篇–如何使用arcgis常用的内置控件
前言
上一篇介绍了如何使用代码动态的显示/隐藏子图层，本篇将介绍如何使用arcgis常用的内置控件如:画画工具控件
部分效果展示
画图工具
坐标转换小部件
路线小部件
测量工具
相关代码
画图工具
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Sketch widget | Sample | ArcGIS API for JavaScript 4.24</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.24/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/widgets/Sketch",
"esri/Map",
"esri/layers/GraphicsLayer",
"esri/views/MapView"
], (Sketch, Map, GraphicsLayer, MapView) => {
const graphicsLayer = new GraphicsLayer();
const map = new Map({
basemap: "topo-vector",
layers: [graphicsLayer]
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 5,
center: [90, 45]
});
view.when(() => {
const sketch = new Sketch({
layer: graphicsLayer,
view: view,
// graphic will be selected as soon as it is created
creationMode: "update"
});
view.ui.add(sketch, "top-right");
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
坐标转换小部件
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>CoordinateConversion widget | Sample | ArcGIS API for JavaScript 4.24</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
<script src="https://js.arcgis.com/4.24/"></script>
<script>
require(["esri/views/MapView", "esri/widgets/CoordinateConversion", "esri/Map"],
(
MapView,
CoordinateConversion,
Map
) => {
const map = new Map({
basemap: "topo-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-117.049, 34.485],
zoom: 12
});
// 坐标转换小部件
const ccWidget = new CoordinateConversion({
view: view
});
view.ui.add(ccWidget, "bottom-right");
});
</script>
</head>
<body class="calcite">
<div id="viewDiv"></div>
</body>
</html>
路线小部件
<!--
To run this demo, you need to replace 'YOUR_API_KEY' with an API key from the ArcGIS Developers dashboard.
Sign up for a free account and get an API key.
https://developers.arcgis.com/documentation/mapping-apis-and-services/get-started/
-->
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Directions widget | Sample | ArcGIS API for JavaScript 4.24</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.24/"></script>
<script>
require(["esri/Map", "esri/views/MapView", "esri/widgets/Directions", "esri/layers/RouteLayer"], function (
Map,
MapView,
Directions,
RouteLayer
) {
// An authorization string used to access the basemap, geocoding and routing services
const apiKey = "YOUR_API_KEY";//这里需要填写你的apikey 才有效
// create a new RouteLayer, required for Directions widget
const routeLayer = new RouteLayer();
// new RouteLayer must be added to the map
const map = new Map({
basemap: "topo-vector",
layers: [routeLayer]
});
const view = new MapView({
zoom: 14,
center: [-118.24, 34.05],
container: "viewDiv",
map: map
});
// new RouteLayer must be added to Directions widget
let directionsWidget = new Directions({
layer: routeLayer,
apiKey,
view
});
// Add the Directions widget to the top right corner of the view
view.ui.add(directionsWidget, {
position: "top-right"
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
测量工具
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Measurement in 2D | Sample | ArcGIS API for JavaScript 4.24</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#topbar {
background: #fff;
padding: 10px;
}
.action-button {
font-size: 16px;
background-color: transparent;
border: 1px solid #d3d3d3;
color: #6e6e6e;
height: 32px;
width: 32px;
text-align: center;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
.action-button:hover,
.action-button:focus {
background: #0079c1;
color: #e4e4e4;
}
.active {
background: #0079c1;
color: #e4e4e4;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.24/"></script>
<script>
require([
"esri/views/MapView",
"esri/WebMap",
"esri/widgets/DistanceMeasurement2D",
"esri/widgets/AreaMeasurement2D"
], function (MapView, WebMap, DistanceMeasurement2D, AreaMeasurement2D) {
var activeWidget = null;
// load a webmap
const webmap = new WebMap({
portalItem: {
id: "990d0191f2574db495c4304a01c3e65b"
}
});
// create the map view
const view = new MapView({
container: "viewDiv",
map: webmap
});
// add the toolbar for the measurement widgets
view.ui.add("topbar", "top-right");
document.getElementById("distanceButton").addEventListener("click", function () {
setActiveWidget(null);
if (!this.classList.contains("active")) {
setActiveWidget("distance");
} else {
setActiveButton(null);
}
});
document.getElementById("areaButton").addEventListener("click", function () {
setActiveWidget(null);
if (!this.classList.contains("active")) {
setActiveWidget("area");
} else {
setActiveButton(null);
}
});
function setActiveWidget(type) {
switch (type) {
case "distance":
// 测距
activeWidget = new DistanceMeasurement2D({
view: view
});
// skip the initial 'new measurement' button
activeWidget.viewModel.start();
view.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("distanceButton"));
break;
case "area":
// 侧面积
activeWidget = new AreaMeasurement2D({
view: view
});
// skip the initial 'new measurement' button
activeWidget.viewModel.start();
view.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("areaButton"));
break;
case null:
if (activeWidget) {
view.ui.remove(activeWidget);
activeWidget.destroy();
activeWidget = null;
}
break;
}
}
function setActiveButton(selectedButton) {
// focus the view to activate keyboard shortcuts for sketching
view.focus();
var elements = document.getElementsByClassName("active");
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove("active");
}
if (selectedButton) {
selectedButton.classList.add("active");
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="topbar">
<button class="action-button esri-icon-measure-line" id="distanceButton" type="button"
title="Measure distance between two or more points"></button>
<button class="action-button esri-icon-measure-area" id="areaButton" type="button"
title="Measure area"></button>
</div>
</body>
</html>
搜索小部件
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Search Widget | Sample | ArcGIS API for JavaScript 4.24</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.24/"></script>
<script>
require(["esri/Map", "esri/views/MapView", "esri/widgets/Search"], (Map, MapView, Search) => {
const map = new Map({
basemap: "topo-vector",
ground: "world-elevation"
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
});
// 搜索小插件
const searchWidget = new Search({
view: view
});
// Add the search widget to the top right corner of the view
view.ui.add(searchWidget, {
position: "top-right"
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
相关文档链接：https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-AreaMeasurement2D.html