【ArcGIS For JS】前端geojson渲染行政区划图层并加标签

原理

通过DataV工具 生成行政区的geojson(得到各区的面元素数据), 随后使用手动绘制featureLayer与Label,并加载到地图。

JS 复制代码
    //vue3加载geojson数据public/geojson/pt.json,在MapView渲染上加载geojson数据 type是"MultiPolygon"
      fetch(baseUrl+'/geojson/pt.json')
        .then(response => response.json())
        .then(data => {
          console.log(data)
          // debugger
          let graphics = data.features.map((feature) => {
            //Polygon 单个多边形绘制
            let geometry = {
              type: 'polygon',
              rings: feature.geometry.coordinates[0]
            }
            return new Graphic({
              geometry: geometry,
              attributes: feature.properties
            })
          })
                      
          let featureLayer = new FeatureLayer({
            fields: [
              {
                name: 'ObjectID',
                alias: 'ObjectID',
                type: 'oid'
              },
              {
                name: 'name',
                alias: 'name',
                type: 'string'
              },
              {
                name: 'adcode',
                alias: 'adcode',
                type: 'integer'
              }
            ],
            objectIdField: 'ObjectID',
            geometryType: 'polygon',
            spatialReference: {
              wkid: 4326
            },
            source: graphics,
            renderer: {
              type: 'simple',
              symbol: {
                type: 'simple-fill',
                color: [227, 139, 79, 0.8],
                outline: {
                  color: [255, 255, 255],
                  width: 1
                }
              }
            },
            labelingInfo: [
              {
                labelExpressionInfo: {
                  expression: '$feature.name'
                },
                symbol: {
                  type: 'text',
                  color: [0, 0, 0, 1],
                  haloColor: [255, 255, 255, 1],
                  haloSize: 1,
                  font: {
                    size: 12
                  }
                }
              }
            ]
          })

          //地图加载featureLayer
          view.map.layers.add(featureLayer)
        })

    })

源码地址

https://github.com/Billyas/AQICalculator-nuxt3

演示站点

https://billyas.github.io/arcgis-vue3-demo/

效果

相关推荐
前端Hardy2 分钟前
惊艳同事的 Canvas 事件流程图,这篇教会你
前端·javascript·css
哔哩哔哩技术5 分钟前
KMP on iOS 深度工程化:模块化、并发编译与 98% 增量构建加速
前端
神仙别闹11 分钟前
基于 Vue+SQLite3开发吉他谱推荐网站
前端·vue.js·sqlite
Async Cipher15 分钟前
CSS 居中
前端·css·css3
IT_陈寒39 分钟前
Python 3.12 的这5个新特性,让我的代码性能提升了40%!
前端·人工智能·后端
华仔啊40 分钟前
别再被 Stream.toMap() 劝退了!3 个真实避坑案例,建议收藏
javascript·后端
华仔啊1 小时前
别再写 TypeScript enum了!新枚举方式让 bundle 瞬间小20%
javascript·typescript
方安乐1 小时前
vite+vue+js项目使用ts报错
前端·javascript·vue.js
韩立23331 小时前
Vue 3.5 升级指南
前端·vue.js
njsgcs1 小时前
网页连接摄像头
javascript·css·html