html,
body,
#viewDiv {
padding:0;
margin:0;
height:100%;
width:100%;
position:relative;
}
.info {
position:absolute;
top:75px;
right:15px;
z-index:999;
box-shadow:0 2px 12px 0 rgba(0,0,0,0.1);
}
鼠标点击地图定位选址
统 计
确 定
new Vue({
el:'#app',
data:function () {
return {
form: {
name:'',
objectId:'',
num:''
},
graphicsLayer:null,
inspectionPointLayer:null,
inspectionScopeLayer:null,
// 其他
loading:false
}
},
mounted() {
this.initMap()
},
methods: {
initMap() {
require([
"esri/Map",
"esri/views/MapView",
'esri/layers/WebTileLayer',
'esri/layers/FeatureLayer',
'esri/layers/GraphicsLayer',
'esri/Basemap',
'esri/widgets/Sketch'
], (Map,
MapView, WebTileLayer, FeatureLayer, GraphicsLayer, Basemap, Sketch) => {
// 加载高德地图
const mapBaseLayerVec =new WebTileLayer({
urlTemplate:'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={col}&y={row}&z={level}',
copyright:'高德地图'
})
const vecBasemap =new Basemap({
baseLayers: [mapBaseLayerVec],
title:'矢量图',
id:'cva_w'
})
const map =new Map({
basemap:vecBasemap
})
const view =new MapView({
container:'viewDiv',
map:map,
center: [104.630825,28.760189],
zoom:12
})
view.ui.remove('attribution')
view.popup.autoOpenEnabled =false;//disable
// 添加要素图层（巡查点）
this.inspectionPointLayer =new FeatureLayer({
url:'http://192.168.19.10:6080/arcgis/rest/services/yibin/gis_gw_tile/MapServer/0',
renderer: {
type:'simple',
symbol: {
type:"simple-marker",
style:"circle",
color:"blue",
size:"4px",
outline: {
color: [255,255,255],
width:1
}
}
}
})
map.add(this.inspectionPointLayer)
// 添加要素图层（巡检范围）
this.inspectionScopeLayer =new FeatureLayer({
// URL to the service
url:"http://192.168.19.10:6080/arcgis/rest/services/yibin/inspection_area/FeatureServer",
renderer: {
type:'simple',
symbol: {
type:'simple-fill',
color: [181,214,234,0.2],
outline: {
color: [128,128,128,1],
width:'1.5px'
}
}
},
labelingInfo: [{
labelExpressionInfo: {expression:"$feature.name" },
symbol: {
type:"text",
color:"black",
haloSize:1,
haloColor:"white"
}
}]
});
map.add(this.inspectionScopeLayer)
// GraphicsLayer
this.graphicsLayer =new GraphicsLayer({
graphics: []
})
map.add(this.graphicsLayer)
// Create the Sketch
let sketch =new Sketch({
view:view,
layer:this.graphicsLayer,
availableCreateTools: ['polygon'],
creationMode:'update'
})
view.ui.add(sketch,"top-right");
sketch.on('create', (event) => {
// 创建开始前清空GraphicsLayer
if (event.state ==='start') {
this.graphicsLayer.removeAll()
}
})
});
},
handleStatistical() {
// 统计巡查点数量
const graphic =this.graphicsLayer.graphics.items[0]
const query =this.inspectionPointLayer.createQuery()
query.geometry =graphic.geometry
query.spatialRelationship ='contains'
this.inspectionPointLayer.queryFeatureCount(query).then(num => {
this.form.num = num
})
},
handleSubmit() {
this.loading =true
// 1、保存巡查范围信息到空间库
const graphic =this.graphicsLayer.graphics.items[0]
graphic.attributes = {name:this.form.name }
this.inspectionScopeLayer.applyEdits({
addFeatures: [graphic]
}).then(result => {
// 2、保存成功，获取objectId
this.form.objectId = result.addFeatureResults[0].objectId
// 3、保存巡查工单的信息（附带上objectId）到数据库
// 4、保存完成，清空数据
this.graphicsLayer.removeAll()
}).catch(error => {
this.$message.error(`巡查范围保存失败：${error}`)
})
this.loading =false
}
}
})