arcgisjs动态标绘

ArcGIS JS 动态标绘

一、

ArcGIS JS 是 Esri 推出的用于构建地理信息系统（GIS）应用的 JavaScript 库，动态标绘是指在地图上实时绘制和更新图形要素，如点、线、面等，常用于数据可视化、实时监控等场景。

二、环境搭建

引入 ArcGIS JS API

在 HTML 文件中通过<script> 标签引入 ArcGIS JS API。

<script src="https://js.arcgis.com/4.26/"></script>

创建地图容器

在 HTML 中创建一个用于展示地图的<div> 元素，并设置其样式。

<div id="mapView" style="width: 100%; height: 100%;"></div>

三、初始化地图

创建 Map 对象

使用ArcGISMap 类创建地图对象，并设置底图。

const map = new ArcGISMap({
    basemap: "topo-vector"
});

创建 MapView 对象

将地图对象绑定到地图容器，并设置视图属性。

const mapView = new MapView({
    container: "mapView",
    map: map,
    center: [116.39, 39.9], // 地图中心坐标
    zoom: 10 // 缩放级别
});

四、动态标绘实现

创建 GraphicsLayer

用于存储和管理动态绘制的图形要素。

const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);

绘制点要素

const pointSymbol = {
    type: "simple-marker",
    color: "red",
    size: 10,
    outline: {
        color: "white"
    }
};
const pointGraphic = new Graphic({
    geometry: {
        type: "point",
        longitude: 116.39,
        latitude: 39.9
    },
    symbol: pointSymbol
});
graphicsLayer.add(pointGraphic);

代码部分	说明
const pointSymbol = {...}	定义点的符号样式
const pointGraphic = new Graphic({...})	创建点要素对象
graphicsLayer.add(pointGraphic)	将点要素添加到图层

绘制线要素

const lineSymbol = {
    type: "simple-line",
    color: "blue",
    width: 3
};
const lineGeometry = {
    type: "polyline",
    paths: [[[116.39, 39.9], [116.4, 39.9], [116.4, 40.0]]]
};
const lineGraphic = new Graphic({
    geometry: lineGeometry,
    symbol: lineSymbol
});
graphicsLayer.add(lineGraphic);

代码部分	说明
const lineSymbol = {...}	定义线的符号样式
const lineGeometry = {...}	定义线的几何形状
const lineGraphic = new Graphic({...})	创建线要素对象
graphicsLayer.add(lineGraphic)	将线要素添加到图层

绘制面要素

const fillSymbol = {
    type: "simple-fill",
    color: "green",
    outline: {
        color: "black"
    }
};
const polygonGeometry = {
    type: "polygon",
    rings: [[[116.3, 39.8], [116.4, 39.8], [116.4, 40.0], [116.3, 40.0], [116.3, 39.8]]]
};
const polygonGraphic = new Graphic({
    geometry: polygonGeometry,
    symbol: fillSymbol
});
graphicsLayer.add(polygonGraphic);

代码部分	说明
const fillSymbol = {...}	定义面的填充符号样式
const polygonGeometry = {...}	定义面的几何形状
const polygonGraphic = new Graphic({...})	创建面要素对象
graphicsLayer.add(polygonGraphic)	将面要素添加到图层

五、动态更新要素

更新点要素位置

pointGraphic.geometry.longitude = 116.4;
pointGraphic.geometry.latitude = 40.0;

更新线要素路径

lineGraphic.geometry.paths[0][0] = [116.35, 39.85];

更新面要素范围

polygonGraphic.geometry.rings[0][0] = [116.25, 39.75];

六、相关问题与解答

问题 1：如何改变图形要素的样式？

解答：可以通过修改图形要素的symbol 属性来改变样式，对于点要素，可以重新定义pointSymbol，然后将其赋值给pointGraphic.symbol。

问题 2：如何删除图形要素？

解答：可以使用graphicsLayer.remove(graphic) 方法删除指定的图形要素，要删除点要素，可以执行graphicsLayer.remove(pointGraphic)。

各位小伙伴们，我刚刚为大家分享了有关“arcgisjs动态标绘”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！