本文将详细介绍如何使用ArcGIS API for JavaScript在网页地图上绘制各类图形，我们将从基础的设置开始，逐步深入到具体图形的绘制方法，包括点、线、面等，通过这些步骤，你将能够掌握基本的地图绘制技能，并在自己的项目中应用这些技术。
一、准备工作
在开始绘制图形之前，我们需要进行一些基础的准备工作，包括引入必要的库和初始化地图。
1. 引入ArcGIS API for JavaScript
在你的HTML文件中，引入ArcGIS API for JavaScript的脚本，你可以通过CDN来引入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ArcGIS API for JavaScript Example</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.25/"></script>
</head>
<body>
<div id="viewDiv" style="height: 100vh; width: 100%;"></div>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer"
], function(Map, MapView, Graphic, GraphicsLayer) {
// 初始化地图和视图
const map = new Map({
basemap: "streets"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-118.796, 34.021], // 洛杉矶
zoom: 13
});
// 创建图形层
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
</script>
</body>
</html>
二、绘制基本图形
我们将介绍如何绘制点、线和面三种基本图形。
1. 绘制点
绘制点是最简单的操作，我们可以使用Point类来创建一个点对象，然后将其添加到图形层中。
const point = {
type: "point",
longitude: -118.796,
latitude: 34.021,
symbol: {
type: "simple-marker",
color: "red",
size: "12px",
outline: {
color: "white",
width: 2
}
}
};
const pointGraphic = new Graphic(point);
graphicsLayer.add(pointGraphic);
2. 绘制线
绘制线需要定义多个点，并将它们连接起来，我们使用Polyline类来实现这一功能。
const line = {
type: "polyline",
paths: [
[-118.796, 34.021],
[-118.796 + 0.01, 34.021 + 0.01]
],
symbol: {
type: "simple-line",
color: "blue",
width: "4px"
}
};
const lineGraphic = new Graphic(line);
graphicsLayer.add(lineGraphic);
3. 绘制面
绘制面与绘制线类似，只是需要闭合路径，我们使用Polygon类来实现这一功能。
const polygon = {
type: "polygon",
rings: [[
[-118.796, 34.021],
[-118.796 + 0.01, 34.021],
[-118.796 + 0.01, 34.021 + 0.01],
[-118.796, 34.021 + 0.01],
[-118.796, 34.021]
]],
symbol: {
type: "simple-fill",
color: [255, 0, 0, 0.4],
outline: {
color: "black",
width: 2
}
}
};
const polygonGraphic = new Graphic(polygon);
graphicsLayer.add(polygonGraphic);
三、交互式绘图工具
ArcGIS API for JavaScript还提供了一些交互式的绘图工具，允许用户在地图上自由绘制图形，以下是一个简单的示例，演示如何使用SketchViewModel来实现交互式绘图。
1. 初始化SketchViewModel
我们需要初始化一个SketchViewModel实例，并配置其属性。
const sketchViewModel = new SketchViewModel({
view: view,
layer: graphicsLayer,
tool: "polyline" // 可选值："point", "polyline", "polygon", "rectangle", "circle", "triangle"
});
2. 添加控件
我们将控件添加到视图中，以便用户可以选择不同的绘图工具。
const tools = ["point", "polyline", "polygon", "rectangle", "circle", "triangle"];
let currentTool = "polyline"; // 默认工具为“polyline”
tools.forEach((tool, index) => {
const button = document.createElement("button");
button.textContent = tool;
button.onclick = () => {
currentTool = tool;
sketchViewModel.tool = currentTool;
};
document.body.appendChild(button); // 将按钮添加到页面底部
});
3. 启动和停止绘图
我们需要提供启动和停止绘图的功能，用户可以点击按钮来切换绘图状态。
let isDrawing = false;
document.addEventListener("keydown", (event) => {
if (event.key === "t") { // 按下“T”键开始或停止绘图
isDrawing = !isDrawing;
sketchViewModel.activate(isDrawing);
}
});
四、问题与解答栏目
Q1: 如何在ArcGIS API for JavaScript中更改图形的颜色？
A: 你可以通过修改图形的符号（symbol）属性来更改其颜色，对于点图形，可以设置simple-marker的颜色；对于线图形，可以设置simple-line的颜色；对于面图形，可以设置simple-fill的颜色，具体代码如下：
const pointSymbol = {
type: "simple-marker",
color: "green", // 设置颜色为绿色
size: "12px",
outline: {
color: "white",
width: 2
}
};
const pointGraphic = new Graphic({
type: "point",
longitude: -118.796,
latitude: 34.021,
symbol: pointSymbol
});
graphicsLayer.add(pointGraphic);
Q2: 如何在ArcGIS API for JavaScript中清除所有绘制的图形？
A: 你可以通过清空图形层的图形集合来清除所有绘制的图形，具体代码如下：
graphicsLayer.graphics.forEach(graphic => graphic.remove()); // 移除所有图形
小伙伴们，上文介绍了“arcgisjs画图形”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/688483.html
微信扫一扫 