使用ArcGIS JavaScript API绘制矩形
ArcGIS JavaScript API（简称ArcGIS API for JavaScript）是Esri公司提供的一个用于开发地理信息系统应用的JavaScript库，通过这个API，开发者可以在网页上创建交互式的地图应用，本文将详细介绍如何使用ArcGIS JavaScript API在地图上绘制一个矩形。
环境准备
1、引入ArcGIS JavaScript API：首先需要在HTML文件中引入ArcGIS JavaScript API，可以通过CDN方式引入。
<script src="https://js.arcgis.com/4.25/"></script>
2、创建基础的HTML结构：包括一个用于显示地图的div元素，以及一个按钮来触发绘制矩形的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Draw Rectangle</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css">
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
<button id="drawRectButton">Draw Rectangle</button>
<script src="https://js.arcgis.com/4.25/"></script>
<script src="app.js"></script>
</body>
</html>
3、初始化地图视图：在app.js文件中初始化地图视图。
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/geometry/Polygon",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"dojo/domReady!"
], function(Map, MapView, Graphic, GraphicsLayer, Polygon, SimpleFillSymbol, Color) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80500, 34.02700], // Longitude, Latitude
zoom: 13
});
// Create a graphics layer to hold the rectangle
var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
});
实现绘制矩形功能
1、添加事件监听器：为按钮添加点击事件监听器，当点击按钮时调用绘制矩形的函数。
document.getElementById("drawRectButton").addEventListener("click", drawRectangle);
2、定义绘制矩形的函数：在app.js中定义drawRectangle函数，该函数将在地图上绘制一个预设大小的矩形。
function drawRectangle() {
require([
"esri/geometry/SpatialReference",
"esri/geometry/Point",
"esri/geometry/util/GeometryEngine"
], function(SpatialReference, Point, GeometryEngine) {
// Define the coordinates of the rectangle corners (in Web Mercator projection)
var point1 = new Point({longitude: -118.805, latitude: 34.027}, SpatialReference.create(4326));
var point2 = new Point({longitude: -118.800, latitude: 34.030}, SpatialReference.create(4326));
var point3 = new Point({longitude: -118.800, latitude: 34.025}, SpatialReference.create(4326));
var point4 = new Point({longitude: -118.805, latitude: 34.025}, SpatialReference.create(4326));
// Project the points to the map's spatial reference (Web Mercator)
point1 = GeometryEngine.project(point1, map.spatialReference);
point2 = GeometryEngine.project(point2, map.spatialReference);
point3 = GeometryEngine.project(point3, map.spatialReference);
point4 = GeometryEngine.project(point4, map.spatialReference);
// Create a polygon from the points
var polygon = new Polygon({
rings: [[point1, point2, point3, point4]],
srid: map.spatialReference.wkid,
hasZ: false,
hasM: false
});
// Create a symbol for the polygon
var simpleFillSymbol = new SimpleFillSymbol({
color: new Color([226, 119, 40]), // Orange color
style: "solid",
outline: { // autocasts as esri/symbols/SimpleLineSymbol
color: [255, 255, 255], // White color
width: "2px"
}
});
// Create a graphic and add it to the graphics layer
var rectangleGraphic = new Graphic({
geometry: polygon,
symbol: simpleFillSymbol,
popupTemplate: { // autocasts as esri/PopupTemplate
title: "Rectangle",
content: "This is a drawn rectangle."
}
});
graphicsLayer.add(rectangleGraphic);
});
}
完整代码示例
以下是完整的HTML和JavaScript代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Draw Rectangle</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css">
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
<button id="drawRectButton">Draw Rectangle</button>
<script src="https://js.arcgis.com/4.25/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/geometry/Polygon",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"esri/geometry/SpatialReference",
"esri/geometry/Point",
"esri/geometry/util/GeometryEngine",
"dojo/domReady!"
], function(Map, MapView, Graphic, GraphicsLayer, Polygon, SimpleFillSymbol, Color, SpatialReference, Point, GeometryEngine) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80500, 34.02700], // Longitude, Latitude
zoom: 13
});
// Create a graphics layer to hold the rectangle
var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
document.getElementById("drawRectButton").addEventListener("click", drawRectangle);
function drawRectangle() {
// Define the coordinates of the rectangle corners (in Web Mercator projection)
var point1 = new Point({longitude: -118.805, latitude: 34.027}, SpatialReference.create(4326));
var point2 = new Point({longitude: -118.800, latitude: 34.030}, SpatialReference.create(4326));
var point3 = new Point({longitude: -118.800, latitude: 34.025}, SpatialReference.create(4326));
var point4 = new Point({longitude: -118.805, latitude: 34.025}, SpatialReference.create(4326));
// Project the points to the map's spatial reference (Web Mercator)
point1 = GeometryEngine.project(point1, map.spatialReference);
point2 = GeometryEngine.project(point2, map.spatialReference);
point3 = GeometryEngine.project(point3, map.spatialReference);
point4 = GeometryEngine.project(point4, map.spatialReference);
// Create a polygon from the points
var polygon = new Polygon({
rings: [[point1, point2, point3, point4]],
srid: map.spatialReference.wkid,
hasZ: false,
hasM: false
});
// Create a symbol for the polygon
var simpleFillSymbol = new SimpleFillSymbol({
color: new Color([226, 119, 40]), // Orange color
style: "solid",
outline: { // autocasts as esri/symbols/SimpleLineSymbol
color: [255, 255, 255], // White color
width: "2px"
}
});
// Create a graphic and add it to the graphics layer
var rectangleGraphic = new Graphic({
geometry: polygon,
symbol: simpleFillSymbol,
popupTemplate: { // autocasts as esri/PopupTemplate
title: "Rectangle",
content: "This is a drawn rectangle."
}
});
graphicsLayer.add(rectangleGraphic);
}
});
</script>
</body>
</html>
相关问题与解答栏目
问题1：如何在ArcGIS JavaScript API中动态修改矩形的大小和位置？：答：要动态修改矩形的大小和位置，可以创建一个包含矩形坐标的变量，并在需要时更新这些变量的值，重新生成多边形并更新图形图层中的图形对象，可以在按钮点击事件中获取新的坐标值，并使用这些新值来更新矩形的位置和大小，具体实现可以参考以下代码片段：
function updateRectangle(newPoints) {
require([
"esri/geometry/SpatialReference",
"esri/geometry/Point",
"esri/geometry/util/GeometryEngine"
], function(SpatialReference, Point, GeometryEngine) {
// Project the new points to the map's spatial reference (Web Mercator)
var projectedPoints = newPoints.map(function(point) {
return GeometryEngine.project(new Point(point), map.spatialReference);
});
// Create a new polygon from the updated points
var newPolygon = new Polygon({
rings: [projectedPoints],
srid: map.spatialReference.wkid,
hasZ: false,
hasM: false
});
// Update the existing graphic with the new polygon geometry
if (rectangleGraphic) {
rectangleGraphic.geometry = newPolygon;
rectangleGraphic.symbol = simpleFillSymbol; // Reapply the symbol if needed
} else {
rectangleGraphic = new Graphic({
geometry: newPolygon,
symbol: simpleFillSymbol,
popupTemplate: { // autocasts as esri/PopupTemplate
title: "Updated Rectangle",
content: "This is an updated drawn rectangle."
}
});
graphicsLayer.add(rectangleGraphic); // Add the new graphic to the layer if it doesn't exist yet
}
});
}
到此，以上就是小编对于“arcgisjs画矩形”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/688840.html
微信扫一扫 