|
|
|
|
@ -1,393 +1,8 @@
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<dialogShow :title="title" :is-show.sync="isShow" :width="width" style="height:500px">
|
|
|
|
|
<template v-slot:content style="height:500px">
|
|
|
|
|
<div class="wrapper">
|
|
|
|
|
<div class="chooseMap">
|
|
|
|
|
<div>
|
|
|
|
|
<el-radio-group v-model="showMap" @change="changeMap">
|
|
|
|
|
<el-radio v-for="item in mapRadioList" :label="item.id">{{item.title}}</el-radio>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-checkbox-group v-model="checkList" @change="changeCheck">
|
|
|
|
|
<el-checkbox v-for="item in mapCheckList" :label="item.id">{{item.title}}</el-checkbox>
|
|
|
|
|
</el-checkbox-group>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="map" id="olMap"></div>
|
|
|
|
|
<!-- 弹框 -->
|
|
|
|
|
<div ref="popup" class="popup" v-show="shopPopup">
|
|
|
|
|
<div class="info">
|
|
|
|
|
<div class="address">地址：{{nowAddress}}</div>
|
|
|
|
|
<div class="showinfo" @click='showInfo(nowId)'>查看详情</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 查看详情 -->
|
|
|
|
|
<showRainEquipmentInfo ref="showRainEquipmentInfo"></showRainEquipmentInfo>
|
|
|
|
|
<showRainSiteInfo ref="showRainSiteInfo"></showRainSiteInfo>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
</dialogShow>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import "ol/ol.css";
|
|
|
|
|
import {Tile as TileLayer,Vector as VectorLayer } from "ol/layer";
|
|
|
|
|
import XYZ from "ol/source/XYZ";
|
|
|
|
|
import {TileArcGISRest} from "ol/source"
|
|
|
|
|
import tilegrid from "ol/tilegrid/TileGrid"
|
|
|
|
|
import { defaults as defaultControls } from "ol/control";
|
|
|
|
|
import {get as getprojection} from "ol/proj"
|
|
|
|
|
import {Projection,addProjection} from "ol/proj"
|
|
|
|
|
import Map from "ol/Map.js";
|
|
|
|
|
import View from "ol/View.js";
|
|
|
|
|
|
|
|
|
|
// 标注点位
|
|
|
|
|
import { Vector as VectorSource } from "ol/source";
|
|
|
|
|
import * as olProj from "ol/proj";
|
|
|
|
|
import {Feature, Overlay} from "ol"
|
|
|
|
|
import { Point } from "ol/geom";
|
|
|
|
|
import { Style, Fill, Stroke, Circle as sCircle } from "ol/style";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import proj4 from 'proj4'
|
|
|
|
|
|
|
|
|
|
import {CONFIGS,MAPCONFIGS} from '@/views/rain/inspection/components/config'
|
|
|
|
|
|
|
|
|
|
import showRainEquipmentInfo from '@/views/rain/inspection/components/showRainEquipmentInfo'
|
|
|
|
|
import showRainSiteInfo from '@/views/rain/inspection/components/showRainSiteInfo'
|
|
|
|
|
import dialogShow from '@/components/dialogShow'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
showRainEquipmentInfo,
|
|
|
|
|
showRainSiteInfo,
|
|
|
|
|
CONFIGS,
|
|
|
|
|
MAPCONFIGS,
|
|
|
|
|
dialogShow
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
title: "巡查点位",
|
|
|
|
|
width: "100%",
|
|
|
|
|
isShow: true,
|
|
|
|
|
|
|
|
|
|
map: null,
|
|
|
|
|
shopPopup:false,
|
|
|
|
|
nowAddress:"",
|
|
|
|
|
nowId:"",
|
|
|
|
|
showMap:"M2",
|
|
|
|
|
mapRadioList:[
|
|
|
|
|
{
|
|
|
|
|
id:"M2",
|
|
|
|
|
title:"天地图"
|
|
|
|
|
},{
|
|
|
|
|
id:"S1",
|
|
|
|
|
title:"水利图"
|
|
|
|
|
},{
|
|
|
|
|
id:"H1",
|
|
|
|
|
title:"河道图"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
checkList:['M1','L1'],
|
|
|
|
|
mapCheckList:[
|
|
|
|
|
{
|
|
|
|
|
id:"M1",
|
|
|
|
|
title:"高清影像",
|
|
|
|
|
checked:true
|
|
|
|
|
},{
|
|
|
|
|
id:"L1",
|
|
|
|
|
title:"路网",
|
|
|
|
|
checked:true
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
configs :CONFIGS,
|
|
|
|
|
mapConfigs:MAPCONFIGS,
|
|
|
|
|
projection:"EPSG:4490",
|
|
|
|
|
featuresArr:[],
|
|
|
|
|
|
|
|
|
|
pointArr:[
|
|
|
|
|
[120.63212, 31.26249, 'suzhouas',51],
|
|
|
|
|
[120.63212, 30.26249, 'suzhouwown2',50],
|
|
|
|
|
[120.55590234876, 31.320813249765, 'suzhouwown2',49],
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// 转换坐标系
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
showMap(){
|
|
|
|
|
this.$nextTick(function () {
|
|
|
|
|
this.initMap();
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
initMap() {
|
|
|
|
|
proj4.defs("EPSG:4490", '+proj=longlat +ellps=GRS80 +no_defs')
|
|
|
|
|
this.projection = new Projection({
|
|
|
|
|
code: this.mapConfigs.Map_Code,
|
|
|
|
|
units: this.mapConfigs.Map_units,
|
|
|
|
|
axisOrientation: this.mapConfigs.Map_axisOrientation,
|
|
|
|
|
global: this.mapConfigs.Map_global,
|
|
|
|
|
});
|
|
|
|
|
addProjection(this.projection);
|
|
|
|
|
let map = new Map({
|
|
|
|
|
target: "olMap",
|
|
|
|
|
view: new View({
|
|
|
|
|
center: this.mapConfigs.MAP_center, //中心点经纬度
|
|
|
|
|
zoom: this.mapConfigs.Map_Zooms[0], //图层缩放大小
|
|
|
|
|
maxZoom:this.mapConfigs.Map_Zooms[1],
|
|
|
|
|
minZoom:this.mapConfigs.Map_Zooms[2],
|
|
|
|
|
projection: this.projection,
|
|
|
|
|
}),
|
|
|
|
|
layers:[],
|
|
|
|
|
// interactions: defaultControls({
|
|
|
|
|
// doubleClickZoom: false,
|
|
|
|
|
// }),
|
|
|
|
|
});
|
|
|
|
|
this.map = map;
|
|
|
|
|
// 添加天地图
|
|
|
|
|
let url = "http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}";
|
|
|
|
|
url = `${url}&T=vec_c&tk=82526d64e8504a0341f775c087863825`;
|
|
|
|
|
let tdtLayer = new TileLayer({
|
|
|
|
|
title: "天地图",
|
|
|
|
|
id: "M2",
|
|
|
|
|
type: "overlay",
|
|
|
|
|
visible: true,
|
|
|
|
|
layerType: "TD地图",
|
|
|
|
|
opacity: 1,
|
|
|
|
|
source: new XYZ({
|
|
|
|
|
crossOrigin:'anonymous',
|
|
|
|
|
url: url,
|
|
|
|
|
projection:"EPSG:4326"
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
this.map.addLayer(tdtLayer);
|
|
|
|
|
this.ShowLayers()
|
|
|
|
|
this.setMarker()
|
|
|
|
|
this.addOverlay()
|
|
|
|
|
this.singleclick()
|
|
|
|
|
|
|
|
|
|
// this.map.layer2.setVisible(false)
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//加载图层
|
|
|
|
|
ShowLayers() {
|
|
|
|
|
for (var i = 0; i < this.configs.length; i++) {
|
|
|
|
|
var result = this.configs[i];
|
|
|
|
|
if (result.layerType == "GIS地图") {
|
|
|
|
|
let projection = getprojection(result.projection);
|
|
|
|
|
let origin = [-400.0, 399.9999999999998];
|
|
|
|
|
let resolutions = [0.0027465820824835565,0.0013732910412417782,6.866455206208891E-4,3.4332276031044456E-4,1.7166138015522228E-4,8.583069007761114E-5,4.291534503880557E-5,2.1457672519402785E-5,1.0728836259701392E-5];
|
|
|
|
|
|
|
|
|
|
let fullExtent = [118.63622216442072, 30.12564516975147, 122.81217622965288, 32.74305227616479];
|
|
|
|
|
|
|
|
|
|
let tileGrid = new tilegrid({
|
|
|
|
|
tileSize: 256,
|
|
|
|
|
origin: origin,
|
|
|
|
|
extent: fullExtent,
|
|
|
|
|
resolutions: resolutions
|
|
|
|
|
});
|
|
|
|
|
let layer = new TileLayer({
|
|
|
|
|
title: result.title,
|
|
|
|
|
id: result.id,
|
|
|
|
|
type: result.type,
|
|
|
|
|
visible: result.visible,
|
|
|
|
|
layerType: result.layerType,
|
|
|
|
|
opacity: result.opacity,
|
|
|
|
|
source: new XYZ({
|
|
|
|
|
tileGrid: tileGrid,
|
|
|
|
|
url: result.url,
|
|
|
|
|
projection: projection
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
this.map.addLayer(layer);
|
|
|
|
|
}else {
|
|
|
|
|
let layer = new TileLayer({
|
|
|
|
|
title: result.title,
|
|
|
|
|
id: result.id,
|
|
|
|
|
type: result.type,
|
|
|
|
|
visible: result.visible,
|
|
|
|
|
layerType: result.layerType,
|
|
|
|
|
opacity: result.opacity,
|
|
|
|
|
source: new TileArcGISRest({
|
|
|
|
|
url: result.url,
|
|
|
|
|
projection: result.projection
|
|
|
|
|
}),
|
|
|
|
|
});
|
|
|
|
|
this.map.addLayer(layer);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 设置巡查 点位
|
|
|
|
|
setMarker() {
|
|
|
|
|
// 设置图层
|
|
|
|
|
let flagLayer = new VectorLayer({
|
|
|
|
|
id:"pointer",
|
|
|
|
|
source: new VectorSource()
|
|
|
|
|
});
|
|
|
|
|
// 添加图层
|
|
|
|
|
this.map.addLayer(flagLayer);
|
|
|
|
|
// 循环添加feature
|
|
|
|
|
for (let i = 0; i < this.pointArr.length; i++) {
|
|
|
|
|
// 创建feature，一个feature就是一个点坐标信息
|
|
|
|
|
let feature = new Feature({
|
|
|
|
|
geometry: new Point([this.pointArr[i][0], this.pointArr[i][1]])
|
|
|
|
|
});
|
|
|
|
|
// 设置展示 地址
|
|
|
|
|
feature.set('address',this.pointArr[i][2])
|
|
|
|
|
// 设置 巡查ID
|
|
|
|
|
feature.setId(this.pointArr[i][3])
|
|
|
|
|
feature.setStyle(
|
|
|
|
|
new Style({
|
|
|
|
|
image: new sCircle({
|
|
|
|
|
fill: new Fill({
|
|
|
|
|
color: '#38ef7d',
|
|
|
|
|
}),
|
|
|
|
|
radius: 6,
|
|
|
|
|
}),
|
|
|
|
|
})
|
|
|
|
|
);
|
|
|
|
|
this.featuresArr.push(feature);
|
|
|
|
|
} // for 结束
|
|
|
|
|
flagLayer.getSource().addFeatures(this.featuresArr);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
addOverlay() {
|
|
|
|
|
// 创建Overlay
|
|
|
|
|
let elPopup = this.$refs.popup;
|
|
|
|
|
this.popup = new Overlay({
|
|
|
|
|
element: elPopup,
|
|
|
|
|
positioning: "bottom-center",
|
|
|
|
|
stopEvent: false,
|
|
|
|
|
offset: [0, -20],
|
|
|
|
|
});
|
|
|
|
|
this.map.addOverlay(this.popup);
|
|
|
|
|
},
|
|
|
|
|
singleclick() {
|
|
|
|
|
// 点击
|
|
|
|
|
this.map.on("singleclick", (e) => {
|
|
|
|
|
// 判断是否点击在点上
|
|
|
|
|
let feature = this.map.forEachFeatureAtPixel(
|
|
|
|
|
e.pixel,
|
|
|
|
|
(feature) => feature
|
|
|
|
|
);
|
|
|
|
|
if (feature) {
|
|
|
|
|
this.shopPopup = true;
|
|
|
|
|
// 设置弹窗位置
|
|
|
|
|
let coordinates = feature.getGeometry().getCoordinates();
|
|
|
|
|
this.nowAddress = feature.get('address');
|
|
|
|
|
this.nowId = feature.getId()
|
|
|
|
|
this.popup.setPosition(coordinates);
|
|
|
|
|
} else {
|
|
|
|
|
this.shopPopup = false;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
showInfo(id){
|
|
|
|
|
this.$refs.showRainEquipmentInfo.isShow = true
|
|
|
|
|
this.$refs.showRainEquipmentInfo.getEquipmentInfo(id)
|
|
|
|
|
this.$refs.showRainEquipmentInfo.infoId = id
|
|
|
|
|
this.$refs.showRainEquipmentInfo.formType = 'showform'
|
|
|
|
|
},
|
|
|
|
|
changeMap(val){
|
|
|
|
|
for(var m of this.mapRadioList){
|
|
|
|
|
if(val==m.id){
|
|
|
|
|
this.checkLayers(val,true)
|
|
|
|
|
}else{
|
|
|
|
|
this.checkLayers(m.id,false)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
changeCheck(val){
|
|
|
|
|
if(val.length==0){
|
|
|
|
|
for(var m of this.mapCheckList){
|
|
|
|
|
this.checkLayers(m.id,false)
|
|
|
|
|
}
|
|
|
|
|
}else if(val.length==this.mapCheckList.length){
|
|
|
|
|
console.log(val)
|
|
|
|
|
for(var m of this.mapCheckList){
|
|
|
|
|
this.checkLayers(m.id,true)
|
|
|
|
|
}
|
|
|
|
|
}else{
|
|
|
|
|
for(var m of this.mapCheckList){
|
|
|
|
|
if(m.id==val[0]){
|
|
|
|
|
this.checkLayers(m.id,true)
|
|
|
|
|
}else{
|
|
|
|
|
this.checkLayers(m.id,false)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 切换地图
|
|
|
|
|
checkLayers(id, bool) {
|
|
|
|
|
var layers = this.map.getLayers().getArray();
|
|
|
|
|
for (let i = 0; i < layers.length; i++) {
|
|
|
|
|
if (layers[i].get("id") == id) {
|
|
|
|
|
if (bool) {
|
|
|
|
|
layers[i].setVisible(true);
|
|
|
|
|
}else{
|
|
|
|
|
layers[i].setVisible(false);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
<script>
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
|
|
|
|
.chooseMap{
|
|
|
|
|
position: absolute;
|
|
|
|
|
margin: 15px 20px;
|
|
|
|
|
// width: 350px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
border: 0.8px solid hsla(0,0%,60%,.2);
|
|
|
|
|
z-index:99;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
// text-align: center;
|
|
|
|
|
padding:0 40px 0 20px;
|
|
|
|
|
}
|
|
|
|
|
.map {
|
|
|
|
|
width: 100vw;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
}
|
|
|
|
|
.popup {
|
|
|
|
|
width: 200px;
|
|
|
|
|
background-color: white;
|
|
|
|
|
padding: 18px;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
box-shadow: 0 0 15px rgb(177, 177, 177);
|
|
|
|
|
.info {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
ul {
|
|
|
|
|
padding-left: 0;
|
|
|
|
|
}
|
|
|
|
|
.showinfo{
|
|
|
|
|
color:red;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<style>
|
|
|
|
|
</style>
|
刘翔宇-旅管家
4 years ago