使用 ArcGIS JS API 绘制矢量图形
ArcGIS JS API 是 Esri 提供的一个强大的 JavaScript 库，用于在 Web 应用程序中创建交互式地图，本文将详细介绍如何使用 ArcGIS JS API 来绘制矢量图形，包括基本的设置、添加图形图层以及绘制点、线和多边形等几何形状。
1. 基本设置
在使用 ArcGIS JS API 之前，需要先引入相关的脚本文件，可以在 HTML 文件中通过<script> 标签引入，以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ArcGIS JS API 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>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/geometry/Polygon"
], function(Map, MapView, Graphic, GraphicsLayer, Point, Polyline, Polygon) {
const map = new Map({
basemap: "streets"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80500, 34.02700], // Longitude, latitude
zoom: 13
});
// 示例代码将在此处添加
});
</script>
</body>
</html>
2. 添加图形图层
图形图层（GraphicsLayer）用于在地图上绘制矢量图形，可以通过以下方式创建一个图形图层并添加到地图中：
const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer);
3. 绘制点
要在地图上绘制一个点，可以使用Point 类，以下是如何创建一个点并将其添加到图形图层的示例：
const point = new Point({
longitude: -118.80500,
latitude: 34.02700,
spatialReference: { wkid: 4326 } // WGS 84 坐标系
});
const pointSymbol = {
type: "simple-marker", // autocasts as simple-marker-symbol
color: [226, 119, 40], // orange, ARGB
outline: { // autocasts as simple-line-symbol
color: [255, 255, 255], // white, ARGB
width: 1
}
};
const pointGraphic = new Graphic({
geometry: point,
symbol: pointSymbol,
popupTemplate: { // autocasts as popuptemplate
title: "Sample Point",
content: "This is a sample point."
}
});
graphicsLayer.add(pointGraphic);
4. 绘制线
要在地图上绘制一条线，可以使用Polyline 类，以下是如何创建一条线并将其添加到图形图层的示例：
const polyline = new Polyline({
paths: [
[-118.80500, 34.02700], // Longitude, latitude
[-118.80500, 34.03700] // Longitude, latitude
],
spatialReference: { wkid: 4326 } // WGS 84 坐标系
});
const lineSymbol = {
type: "simple-line", // autocasts as simple-line-symbol
color: [226, 119, 40], // orange, ARGB
width: "2px"
};
const lineGraphic = new Graphic({
geometry: polyline,
symbol: lineSymbol,
popupTemplate: { // autocasts as popuptemplate
title: "Sample Line",
content: "This is a sample line."
}
});
graphicsLayer.add(lineGraphic);
5. 绘制多边形
要在地图上绘制一个多边形，可以使用Polygon 类，以下是如何创建一个多边形并将其添加到图形图层的示例：
const polygon = new Polygon({
rings: [
[
[-118.80500, 34.02700], // Longitude, latitude
[-118.80500, 34.03700], // Longitude, latitude
[-118.81500, 34.03700], // Longitude, latitude
[-118.81500, 34.02700] // Longitude, latitude
]
],
spatialReference: { wkid: 4326 } // WGS 84 坐标系
});
const polygonSymbol = {
type: "simple-fill", // autocasts as simple-fill-symbol
color: [226, 119, 40, 0.3], // orange, ARGB with 30% opacity
style: "solid",
outline: { // autocasts as simple-line-symbol
color: [255, 255, 255], // white, ARGB
width: 1
}
};
const polygonGraphic = new Graphic({
geometry: polygon,
symbol: polygonSymbol,
popupTemplate: { // autocasts as popuptemplate
title: "Sample Polygon",
content: "This is a sample polygon."
}
});
graphicsLayer.add(polygonGraphic);
相关问题与解答栏目
问题1：如何在地图上绘制多个不同类型的图形？
答：可以通过创建多个Graphic 对象并将它们添加到同一个GraphicsLayer 中来实现。
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
// 绘制点
const point = new Point({ longitude: -118.80500, latitude: 34.02700, spatialReference: { wkid: 4326 } });
const pointSymbol = { type: "simple-marker", color: [226, 119, 40], outline: { color: [255, 255, 255], width: 1 } };
const pointGraphic = new Graphic({ geometry: point, symbol: pointSymbol, popupTemplate: { title: "Sample Point", content: "This is a sample point." } });
graphicsLayer.add(pointGraphic);
// 绘制线
const polyline = new Polyline({ paths: [[-118.80500, 34.02700], [-118.80500, 34.03700]], spatialReference: { wkid: 4326 } });
const lineSymbol = { type: "simple-line", color: [226, 119, 40], width: "2px" };
const lineGraphic = new Graphic({ geometry: polyline, symbol: lineSymbol, popupTemplate: { title: "Sample Line", content: "This is a sample line." } });
graphicsLayer.add(lineGraphic);
// 绘制多边形
const polygon = new Polygon({ rings: [[[-118.80500, 34.02700], [-118.80500, 34.03700], [-118.81500, 34.03700], [-118.81500, 34.02700]]], spatialReference: { wkid: 4326 } });
const polygonSymbol = { type: "simple-fill", color: [226, 119, 40, 0.3], style: "solid", outline: { color: [255, 255, 255], width: 1 } };
const polygonGraphic = new Graphic({ geometry: polygon, symbol: polygonSymbol, popupTemplate: { title: "Sample Polygon", content: "This is a sample polygon." } });
graphicsLayer.add(polygonGraphic);
问题2：如何动态更新图形的属性？
答：可以通过修改Graphic 对象的属性来实现动态更新，要更新点的符号颜色，可以这样做：
pointGraphic.symbol = { ...pointGraphic.symbol, color: [0, 128, 128] }; // 更新为蓝色
pointGraphic.geometry = new Point({ longitude: -118.81500, latitude: 34.02700, spatialReference: { wkid: 4326 } }); // 更新位置
小伙伴们，上文介绍了“arcgis js 画矢量图形”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/689132.html
微信扫一扫 