ArcGIS API for JavaScript 缓冲区分析、河涌关联分析、集中连片分析

1、ArcGIS API for JavaScript 实现缓冲区分析、河涌关联分析、集中连片分析。

2、场景需求:查询缓冲区域范围的鱼塘;查询某条河涌关联的鱼塘;鱼塘的集中连片性。

3、vue页面实现代码示例:

javascript 复制代码
<template>
   <div/>
</template>
<script>
import * as geometryEngine from '@arcgis/core/geometry/geometryEngine.js'
import Graphic from '@arcgis/core/Graphic'
export default {
	props: {
        mapAndView: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            
        }
    },
    computed: {
        ...mapState({
            highlight: state => state.map.highlight,
            distance: state => state.aquaculture.distance,
            buffer: state => state.aquaculture.spatialAnalyse.buffer,
            riverRelated: state => state.aquaculture.spatialAnalyse.riverRelated,
            continuous: state => state.aquaculture.spatialAnalyse.continuous
        })
    },
	mounted() {
        this.addMapClickEventListener()
    },
	methods: {
		 addMapClickEventListener() {
            const clickHandler = this.mapAndView.on('click', event => {
                this.mapAndView.hitTest(event).then(async res => {
                    if (!res.results.length) {
                        return
                    }
                    let graphic = res.results[0].graphic
                    //缓冲区分析
                    if (this.buffer) {
                        this.goAndHighlight(graphic)
                        this.doBuffer(graphic.geometry, this.distance)
                    }
                    //河涌关联分析
                    if (this.riverRelated && graphic.layer.id === 'riverLayer') {
                        this.goAndHighlight(graphic)
                        this.doRiverRelated(graphic.geometry, this.distance)
                    }
                    //养殖场、鱼塘集中连片分析
                    if (this.continuous && (graphic.layer.id === 'aquacultureLayer' || graphic.layer.id === 'pondLayer')) {
                        this.mapAndView.graphics.removeAll()
                        this.doCentrallyContinuous(graphic.geometry, 20, graphic.layer.id)
                    }
                })
            })

            this.$once('hook:beforeDestroy', () => {
                if (clickHandler) {
                    clickHandler.remove()
                }
            })
        },
        //高亮与定位
        goAndHighlight(graphic) {
            this.mapAndView.whenLayerView(graphic.layer).then(layerView => {
                if (this.highlight) {
                    this.highlight.remove()
                }
                this.$store.commit('map/setHighlight', layerView.highlight(graphic))
                this.mapAndView.goTo({ target: graphic })
            })
        },
        // 空间几何图形查询
		queryFeaturesByGeometry(mapView, layerId, geometry, relationship) {
		    if (!mapView?.map) {
		        return
		    }
		    const queryLayer = mapView.map.findLayerById(layerId)
		    if (!queryLayer) {
		        return
		    }
		    return queryLayer.queryFeatures({
		        geometry: geometry, // 绘制的范围(点、线、面等几何图形)
		        outFields: ['*'], // 返回的字段
		        returnGeometry: true, // 是否返回geometry
		        spatialRelationship: relationship || 'intersects', // // 空间关系:相交、包含等
		        where: '' // 其它查询条件,格式参考sql语句,例如status = 1;
		    }).then(res => {
		        if (res.features.length) {
		            return res.features
		        }
		    })
		 },
		 // 缓冲区分析  distance:缓冲区距离(数值类型)
		 async doBuffer(geometry, distance) {
		     // 根据距离获取缓冲区域图形
		     const bufferGeometry = geometryEngine.geodesicBuffer(geometry, distance, 'meters')// 缓冲区
		     //缓冲区域添加在地图上的渲染效果
		     let symbol = {
		         type: 'simple-fill',
		         color: 'rgba(255,0,255,0.3)',
		         outline: {
		             color: '#F0DB6F',
		             style: 'dot',
		             width: 1
		         }
		     }
		     let graphic = new Graphic({ 
		         geometry: bufferGeometry,
		         symbol: symbol 
		     })
			 this.mapAndView.graphics.removeAll()
		     this.mapAndView.graphics.add(graphic)
		     // 空间查询缓冲区范围内的鱼塘
		     fishPondFeatures = await this.queryFeaturesByGeometry(this.mapAndView, 'pondLayer', bufferGeometry)
		     console.log('缓冲区范围的鱼塘:',  fishPondFeatures)
		     //地图渲染鱼塘
		     this.renderGraphics(fishPondFeatures)
		 },
		 // 河涌关联分析(空间位置距离关联)  distance:缓冲区距离(数值类型)
        async doRiverRelated(geometry, distance) {
        	// 根据距离获取缓冲区域图形
        	const bufferGeometry = geometryEngine.geodesicBuffer(geometry, distance, 'meters')// 缓冲区
        	//缓冲区域添加在地图上的渲染效果
            let symbol = {
                type: 'simple-fill',
                color: 'rgba(0,255,0,0.3)',
                outline: {
                    color: '#F0DB6F',
                    style: 'dot',
                    width: 1
                }
            }
            let graphic = new Graphic({ 
                geometry: bufferGeometry,
                symbol: symbol 
            })

             this.mapAndView.graphics.removeAll()
		     this.mapAndView.graphics.add(graphic)
		     // 空间查询缓冲区范围内的鱼塘(河涌关联的鱼塘)
		     fishPondFeatures = await this.queryFeaturesByGeometry(this.mapAndView, 'pondLayer', bufferGeometry)
		     console.log('河涌关联的鱼塘:',  fishPondFeatures)
		      //地图渲染鱼塘
		     this.renderGraphics(fishPondFeatures)
        },
        // 养殖场、鱼塘的集中连片分析  distance:聚合距离(数值类型)
        async doCentrallyContinuous(geometry, distance, layerId) {
            // 聚合图形(缓冲区图形)
            // 第一次缓冲区查询
            let bufferGeometry = geometryEngine.geodesicBuffer(geometry, distance, 'meters')
            let features = await this.queryFeaturesByGeometry(this.mapAndView, layerId, bufferGeometry)
             // 第二次缓冲区查询( 第一次查询结果构建目标参数)
            let tempRings = []
            features.map(item => {
                tempRings.push(item.geometry.rings[0])
            })
            geometry.rings = tempRings
            bufferGeometry = geometryEngine.geodesicBuffer(geometry, distance, 'meters')
            let secondFeatures = await this.queryFeaturesByGeometry(this.mapAndView, layerId, bufferGeometry)
            // 多次缓冲查询,直到最后查询到的图形list数据相同为止
            if (JSON.stringify(secondFeatures) === JSON.stringify(features)) {
                //地图渲染集中连片区域
                let features = this.renderGraphics(secondFeatures)
            } else {
                //递归查询
                this.doCentrallyContinuous(geometry, distance, layerId)
            }
        },
        // 渲染集中连片区域
        renderGraphics(features) {
            let symbol = {
                type: 'simple-fill',
                color: 'rgba(255,0,255,0.3)',
                outline: {
                    color: '#F0DB6F',
                    width: 1
                }
            }
            let graphics = []
            features.map(item => {
                let graphic = new Graphic({ 
                    geometry: item.geometry,
                    attributes: item.attributes,
                    symbol: symbol 
                })
                graphics.push(graphic)
            })
            this.mapAndView.graphics.addMany(graphics)
            return features
        },
	}
}
</script>
相关推荐
雪碧聊技术12 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
优雅永不过时_v2 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
WildBlue2 小时前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
啷咯哩咯啷2 小时前
Vue3构建低代码表单设计器
前端·javascript·vue.js
凌览2 小时前
斩获 27k Star,一款开源的网站统计工具
前端·javascript·后端
爱学习的小学渣2 小时前
JS用法:Map,Set和异步函数
前端·javascript