<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ArcGIS JavaScript Test</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.16/"></script>
<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>
</head>
<body>
<div id="viewDiv">
<div id="bookmarks"></div>
</div>
<div id="basemapGalleryDiv"></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>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Compass",
"esri/widgets/ScaleBar",
"esri/widgets/Bookmarks",
"dojo/dom",
"esri/widgets/Search",
"esri/widgets/Expand",
"esri/widgets/BasemapGallery",
"esri/layers/GraphicsLayer",
"esri/widgets/Sketch",
"esri/widgets/BasemapToggle",
"esri/widgets/BasemapGallery",
"esri/widgets/DistanceMeasurement2D",
"esri/widgets/AreaMeasurement2D",
"esri/widgets/Locate",
"esri/widgets/LayerList",
"esri/widgets/CoordinateConversion"
],
function (Map, MapView, FeatureLayer, Compass, ScaleBar,
Bookmarks, dom, Search, Expand, BasemapGallery,
GraphicsLayer,Sketch,BasemapToggle,BasemapGallery,
DistanceMeasurement2D,AreaMeasurement2D,Locate,LayerList,
CoordinateConversion) {
var activeWidget = null;
var graphicsLayer = new GraphicsLayer();
var map = new Map({
basemap: "topo-vector",
layers: [graphicsLayer]
});
var view = new MapView({
container:"viewDiv",
map:map,
center:[117.3,32],
zoom:3
});
var mapMLayer = new FeatureLayer({
url: " http://localhost:6080/arcgis/rest/services/web/中国省市/MapServer?f=jsapi",
});
map.layers.add(mapMLayer);
var mapLayer = new FeatureLayer({
url: "http://localhost:6080/arcgis/rest/services/安徽省行政区划/MapServer?f=jsapi",
});
map.layers.add(mapLayer);
//指南针
view.on("pointer-move", function (evt) {
showCoordinates(view.toMap({ x: evt.x, y: evt.y }));
});
var view = new MapView({
container: "viewDiv",
map: map
});
var compass = new Compass({
view: view
});
view.ui.add(compass, "top-left");
//比例尺
var scaleBar = new ScaleBar({
view: view
});
view.ui.add(scaleBar, {
position: "bottom-left"
});
var scalebar = new ScaleBar({
view: view
});
//书签
var bookmarks = new Bookmarks({
map: map,
editable: true,
bookmarks: bookmarks,
}, dom.byId('bookmarks'));
//绘制图形
var sketch = new Sketch({
view: view,
layer: graphicsLayer
});
view.ui.add(sketch, "top-right");
//搜索
const searchWidget = new Search({
view: view
});
view.ui.add(searchWidget, {
position: "top-right",
index: 2
});
//选择更换底图
var basemapToggle = new BasemapToggle({
view:view,
nextBaseMap: "satellite"
});
view.ui.add(basemapToggle, "top-right");
//2D测量
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.newMeasurement();
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.newMeasurement();
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");
}
}
//定位
var locate = new Locate({
view: view,
useHeadingEnabled: false,
goToOverride: function(view, options) {
options.target.scale = 1500;
return view.goTo(options.target);
}
});
view.ui.add(locate, "top-left");
//图层列表
var LayerList = new LayerList({
view: view
});
view.ui.add(LayerList, {
position: "top-right",
index: 0
});
//X、Y轴坐标
var ccWidget = new CoordinateConversion({
view: view
});
view.ui.add(ccWidget, "bottom-left");
})
</script>
</html>
arcgis api 十个控件
于 2020-10-19 20:33:27 首次发布