ArcGIS API for JavaScript 4.x 实战：在地图上绘制带虚线边框的圆形区域（附完整代码）

原创

于 2026-02-18 13:16:46 发布 · 801 阅读

标签

#ArcGIS #JavaScript #地图可视化 #前端开发 #ViewUI

ArcGIS API for JavaScript 4.x 实战：在地图上绘制带虚线边框的圆形区域（附完整代码）

最近在做一个智慧园区项目时，客户要求在电子地图上动态标记出不同级别的风险区域，其中一个核心需求就是绘制带有虚线边框的圆形区域。这个看似简单的功能，在实际开发中却有不少细节值得深究——比如如何精确控制圆形的半径单位、如何实现边框的虚线样式、如何让填充色半透明而不遮挡底层地图信息。如果你也在为类似的需求寻找解决方案，那么今天分享的这套完整代码和思路，或许能帮你少走弯路。

这篇文章主要面向有一定前端基础，正在或即将使用 ArcGIS API for JavaScript 4.x 进行地图应用开发的工程师。我们将从零开始，一步步构建一个功能完整的圆形绘制模块，重点探讨样式的深度自定义，并确保代码具备良好的可复用性。无论你是要开发应急指挥、物流规划还是商业选址系统，掌握这些技巧都能让你的地图应用更加专业和灵活。

1. 环境搭建与项目初始化

在开始编写绘制圆形的代码之前，我们需要一个稳定的开发环境。ArcGIS API for JavaScript 4.x 主要提供了两种使用方式：通过 CDN 在线引入，或者通过 @arcgis/core NPM 包在本地构建。对于现代前端项目，尤其是需要模块化管理和构建优化的场景，我强烈推荐使用后者。

首先，确保你的项目已经初始化（例如使用 Vue CLI、Create React App 或 Vite）。然后，通过 npm 或 yarn 安装核心依赖。

npm install @arcgis/core
# 或
yarn add @arcgis/core

安装完成后，你需要在项目的入口文件或地图组件中引入必要的 CSS 样式。这是很多新手容易忽略的一步，缺少样式会导致地图控件无法正常显示。

<!-- 在你的 HTML 文件头部引入 -->
<link rel="stylesheet" href="/https://js.arcgis.com/4.28/@arcgis/core/assets/esri/themes/light/main.css">

注意：ArcGIS API 的 CSS 主题有 light 和 dark 等多种选择，你可以根据项目整体 UI 风格进行切换。此外，如果你面临严格的网络环境限制，也可以将 CSS 文件下载到本地进行引用。

接下来，我们创建一个基础的 HTML 结构作为地图的容器。容器的尺寸必须被明确定义，否则地图将无法渲染。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆形区域绘制示例</title>
    <link rel="stylesheet" href="/https://js.arcgis.com/4.28/@arcgis/core/assets/esri/themes/light/main.css">
    <style>
        html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="viewDiv"></div>
    <script type="module" src="./main.js"></script>
</body>
</html>

现在，基础环境已经就绪。我们将进入核心的 JavaScript 模块编写阶段。

2. 核心模块：地图视图与图形容器的创建

所有的地图图形，包括我们要绘制的圆形，都需要被添加到一个图形容器（GraphicsLayer）中，而这个容器又归属于一个地图视图（MapView 或 SceneView）。理解这个层级关系对于后续的图形管理至关重要。

首先，在 main.js 中，我们导入必要的模块并初始化地图视图。我习惯将地图的中心点坐标和缩放级别提取为配置常量，方便后期维护。

// main.js
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";

// 地图初始化配置
const mapConfig = {
    basemap: "streets-vector", // 基础地图样式，可选 'topo-vector', 'osm' 等
    center: [116.4074, 39.9042], // 北京中心坐标 [经度, 纬度]
    zoom: 10
};

// 创建地图实例
const map = new Map({
    basemap: mapConfig.basemap
});

// 创建地图视图实例
const view = new MapView({
    container: "viewDiv", // 对应HTML中div的id
    map: map,
    center: mapConfig.center,
    zoom: mapConfig.zoom
});

// 创建一个专用的图形图层用于存放我们的圆形
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);

// 等待视图加载完成
view.when(() => {
    console.log("地图视图加载完成，可以开始绘制图形。");
}).catch((err) => {
    console.error("地图加载失败: ", err);
});

这里有几个关键点：