在页面上添加9个按钮,使用Draw工具,点击前8个按钮,在地图上实现绘制点、多点、线、多边形、矩形、圆、椭圆、三角形;点击第9个按钮,清空所绘图形。可在此处查看Draw工具条支持的绘图类型。
时间: 2023-07-10 20:17:28 浏览: 39
以下是一个简单的实现代码,可以根据需求进行修改:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Draw Tools</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.15/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-button {
margin: 5px;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Sketch",
"esri/widgets/Expand",
"esri/layers/GraphicsLayer",
"esri/Graphic"
], function (Map, MapView, Sketch, Expand, GraphicsLayer, Graphic) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-122.4194, 37.7749],
zoom: 13
});
var sketch = new Sketch({
view: view,
layer: new GraphicsLayer(),
availableCreateTools: ["point", "multipoint", "polyline", "polygon", "rectangle", "circle", "ellipse", "triangle"]
});
var clearButton = document.createElement("button");
clearButton.innerHTML = "Clear";
clearButton.classList.add("esri-button");
clearButton.addEventListener("click", function () {
sketch.layer.removeAll();
});
var expand = new Expand({
view: view,
content: sketch,
expandIconClass: "esri-icon-edit",
expandTooltip: "Draw Tools",
group: "top-right"
});
var pointButton = document.createElement("button");
pointButton.innerHTML = "Point";
pointButton.classList.add("esri-button");
pointButton.addEventListener("click", function () {
sketch.create("point");
});
var multiPointButton = document.createElement("button");
multiPointButton.innerHTML = "Multipoint";
multiPointButton.classList.add("esri-button");
multiPointButton.addEventListener("click", function () {
sketch.create("multipoint");
});
var polylineButton = document.createElement("button");
polylineButton.innerHTML = "Polyline";
polylineButton.classList.add("esri-button");
polylineButton.addEventListener("click", function () {
sketch.create("polyline");
});
var polygonButton = document.createElement("button");
polygonButton.innerHTML = "Polygon";
polygonButton.classList.add("esri-button");
polygonButton.addEventListener("click", function () {
sketch.create("polygon");
});
var rectangleButton = document.createElement("button");
rectangleButton.innerHTML = "Rectangle";
rectangleButton.classList.add("esri-button");
rectangleButton.addEventListener("click", function () {
sketch.create("rectangle");
});
var circleButton = document.createElement("button");
circleButton.innerHTML = "Circle";
circleButton.classList.add("esri-button");
circleButton.addEventListener("click", function () {
sketch.create("circle");
});
var ellipseButton = document.createElement("button");
ellipseButton.innerHTML = "Ellipse";
ellipseButton.classList.add("esri-button");
ellipseButton.addEventListener("click", function () {
sketch.create("ellipse");
});
var triangleButton = document.createElement("button");
triangleButton.innerHTML = "Triangle";
triangleButton.classList.add("esri-button");
triangleButton.addEventListener("click", function () {
sketch.create("triangle");
});
view.ui.add([expand, clearButton, pointButton, multiPointButton, polylineButton, polygonButton, rectangleButton, circleButton, ellipseButton, triangleButton], "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
```
在页面上会显示一个地图和一个Draw工具条,包含了绘制点、多点、线、多边形、矩形、圆、椭圆、三角形等绘图类型。点击Clear按钮可以清除所有已绘制的图形。