// 画圈圈
addCircleGraphic(graphic) {
const target =new this.$esri.Point({type:'point',x: graphic.geometry.x,y: graphic.geometry.y,spatialReference:this.$mapView.spatialReference })
const distanceObj = {
1:0.05,
2:0.1,
3:0.2
}
const distance =distanceObj[graphic.attributes.level]
const circleGeometry =new this.$esri.Circle({
center:target,
radius:distance,
radiusUnit:'kilometers',
spatialReference:this.$mapView.spatialReference
})
const circleGraphic =new this.$esri.Graphic({
geometry:circleGeometry,
symbol: {
type:'simple-fill',
color: [247,193,6,0.3],
outline: {
width:2,
color:'#F7C106'
}
}
})
this.layers.forecastCircleDistanceLayer.add(circleGraphic)
this.addRelationGraphic(target,distance)
},
// 空间查询，并加入点
async addRelationGraphic(target, distance) {
const query =new this.$esri.Query({
geometry: target,
distance,
units:'kilometers',
spatialRelationship:'intersects',
returnGeometry:true,
outFields: ['*']
})
// 相关的公交站
const queryTask =new this.$esri.QueryTask({
url:`${layerUrl.YTH_PS_BUS_STATION}/0`
})
const p1 =queryTask.execute(query)
// 相关的学校
const queryTask2 =new this.$esri.QueryTask({
url:`${layerUrl.YTH_PS_SCHOOL}/0`
})
const p2 =queryTask2.execute(query)
// 政府机关
const queryTask3 =new this.$esri.QueryTask({
url:`${layerUrl.YTH_PS_GOVERNMENT}/0`
})
const p3 =queryTask3.execute(query)
// 医院
const queryTask4 =new this.$esri.QueryTask({
url:`${layerUrl.YTH_PS_HOSPITAL}/0`
})
const p4 =queryTask4.execute(query)
// 火车站
const queryTask5 =new this.$esri.QueryTask({
url:`${layerUrl.YTH_PS_TRAIN_STATION}/0`
})
const p5 =queryTask5.execute(query)
// 地铁站
const queryTask6 =new this.$esri.QueryTask({
url:`${layerUrl.YTH_METRO_STATION}/0`
})
const p6 =queryTask6.execute(query)
const typeNameList = ['bus-station','school-relation','government-relation','hospital-relation','train-station-relation','metro-station-relation'];
(await Promise.all([p1,p2,p3,p4,p5,p6])).forEach((results, i) => {
if (results.features.length) {
results.features.forEach(item => {
item.attributes.typeName =typeNameList[i]
item.symbol = {
type:'picture-marker',
url:require('@/assets/images/water-emergency/card-forecast/legend/' +typeNameList[i] +'.png'),
width:30,
height:30
}
})
this.circleRelationDataSource.push(...results.features)
}
})
if (this.circleRelationDataSource.length) {
// 添加数据
this.layers.forecastCircleDistanceLayer.addMany(this.circleRelationDataSource)
}
},
