【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/

效果

相关推荐
路很长OoO9 分钟前
Flutter 插件开发实战:桥接原生 SDK
前端·flutter·harmonyos
技术钱9 分钟前
react+andDesign+vite+ts从零搭建后台管理系统(三)-Layout布局
javascript·react.js·ecmascript
开水好喝1 小时前
Code Coverage Part I
前端
DoraBigHead1 小时前
🧭 React 理念:让时间屈服于 UI —— 从同步到可中断的演化之路
前端·javascript·面试
千码君20161 小时前
React Native:发现默认参数children【特殊的prop】
javascript·react native·ecmascript·react·组件树
敢敢J的憨憨L2 小时前
GPTL(General Purpose Timing Library)使用教程
java·服务器·前端·c++·轻量级计时工具库
喝拿铁写前端2 小时前
Vue 组件通信的两种世界观:`.sync` 与普通 `props` 到底有什么不同?
前端·vue.js·前端框架
刘一哥GIS2 小时前
Windows环境搭建:PostGreSQL+PostGIS安装教程
数据库·python·arcgis·postgresql·postgis
美酒没故事°2 小时前
npm源管理器:nrm
前端·npm·npm源
用户22152044278002 小时前
vue3组件间的通讯方式
前端·vue.js