arcgis添加GeoJSON数据生成图层的方式

最新推荐文章于 2025-10-09 16:23:12 发布

原创最新推荐文章于 2025-10-09 16:23:12 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#arcgis

1、拿到标准的GeoJson数据。

{
    "type":"FeatureCollection",
    "features":[
        {
            "type":"Feature",
            "geometry":{
                "type":"MultiPolygon",
                "coordinates":Array[1]
            },
            "properties":{
                "Id":0,
                "项目名":"XXXXXXX"
            },
            "id":"XXXXX_2000_37.9"
        }
    ]
}

2、添加图层

// 引入GeoJSONLayer图层
import GeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer.js";

// 将json数据存储为文件，配置JSON文件地址
const url = 'http://192.168.40.11:9080/file/geojson.json';

const renderer = {
		type: 'simple',
		symbol: {
			type: 'simple-fill',
			color: [226, 119, 40, 0.4], // 面颜色
			outline: {
				width: '3px', // 边线宽度
				color: 'red', // 边线颜色
				style: 'dash-dot', // 边线的样式
				},
			},
		};


const geojsonLayer = new GeoJSONLayer({
			url: url,
			copyright: 'USGS Earthquakes',
			renderer: renderer,//设置面的样式
			popupTemplate: {
				title: '弹窗',
				outFields: ['*'],
				content: '{项目名}'
				},
		});

1.边线样式

Value	Description
dash
dash-dot
dot
long-dash
long-dash-dot
long-dash-dot-dot
none	The line has no symbol.
short-dash
short-dash-dot
short-dash-dot-dot
short-dot
solid

3、设置图层注记

var labelClass = new LabelClass({
					// 设置标签表达式或函数
					labelExpressionInfo: { expression: '$feature.项目名' }, // 注记展示的字段名
					labelPlacement: 'center-right', // 注记显示的位置
					symbol: {
						type: 'text', // 标记类型
						color: 'black',// 注记字体颜色
						haloSize: 1,// 注记字的边线
						haloColor: 'white',// 注记字边线的颜色
						font: {
							// 设置字体样式
							family: 'sans-serif',// 字体的样式
							size: 12,// 字体大小
							weight: 'bold',// 字体样式
						},
					},
				});
// 在图层上添加注记
1、geojsonLayer.labelingInfo = [labelClass]
2、在创建GeoJSONLayer时，在属性中添加labelingInfo: [labelClass]