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>