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);
}
? ?
? ?
鼠標(biāo)點(diǎn)擊地圖定位選址
統(tǒng) 計(jì)
確 定
?
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
// 添加要素圖層（巡查點(diǎn)）
? ? ? ? ? ? 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) => {
// 創(chuàng)建開(kāi)始前清空GraphicsLayer
? ? ? ? ? ? ? if (event.state ==='start') {
this.graphicsLayer.removeAll()
}
})
});
},
handleStatistical() {
// 統(tǒng)計(jì)巡查點(diǎn)數(shù)量
? ? ? ? ? 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逃糟、保存巡查范圍信息到空間庫(kù)
? ? ? ? ? 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）到數(shù)據(jù)庫(kù)
// 4践图、保存完成球凰，清空數(shù)據(jù)
? ? ? ? ? ? this.graphicsLayer.removeAll()
}).catch(error => {
this.$message.error(`巡查范圍保存失斄莞唷：${error}`)
})
this.loading =false
? ? ? ? }
}
})
