You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1083 lines
28 KiB
1083 lines
28 KiB
<template>
|
|
<view class="container" @click="showSearch(false)">
|
|
<view id="map" class="map" :prop="mapData" :change:prop="mapModule.updateMapData"></view>
|
|
<!-- <image-button @click="location" className="location" imgSrc="/static/dw.png"></image-button> -->
|
|
|
|
<view class="south" :style="'transform:rotate('+compassNum.toString()+'deg)'">
|
|
<image src="/static/south.png" class="south-img" />
|
|
<text class="south-text" style="transform:rotate(180deg)">南</text>
|
|
</view>
|
|
<view class="right-actions">
|
|
<view class="btn-tcdj right-btn" @click="showLayerModal">
|
|
<image src="/static/tcdj.png" class="btn-img"></image>
|
|
<view>图层</view>
|
|
</view>
|
|
<view class="btn-mjcl right-btn" @click="toggleMeasure">
|
|
<image :src="measureStatus==='mjcl'?'/static/mjcl-sel.png':'/static/mjcl.png'" class="btn-img"></image>
|
|
<view>测量</view>
|
|
</view>
|
|
<view class="btn-xzgj right-btn" @click="toggleXzgj">
|
|
<image :src="measureStatus==='xzgj'?'/static/xzgj-sel.png':'/static/xzgj.png'" class="btn-img"></image>
|
|
<view>绕地</view>
|
|
</view>
|
|
<view class="btn-location right-btn" @click="location">
|
|
<image src="/static/dw.png" class="img-location" />
|
|
<view>{{locationing?'定位中':'定位'}}</view>
|
|
</view>
|
|
<view class="btn-mjcl right-btn" @click="showJwdPopup">
|
|
<image src="/static/jwd.png" class="img-jwd" />
|
|
<view>经纬度</view>
|
|
</view>
|
|
<view class="btn-clear right-btn" @click="mapModule.clear">
|
|
<image src="/static/clear.png" class="img-clear" />
|
|
<view>清除</view>
|
|
</view>
|
|
<!-- <view class="btn-logout right-btn" @click="logout">
|
|
<image src="/static/logout.png" class="img-logout" />
|
|
</view> -->
|
|
</view>
|
|
<button class="btn-workbench" @click="toWorkBench">
|
|
<image src="/static/gzt.png" class="workbench-img" />
|
|
<div>工作台</div>
|
|
</button>
|
|
<view>
|
|
<!-- 经纬度输入弹窗 -->
|
|
<uni-popup ref="jwdPopup" background-color="#fff">
|
|
<view class="popup-detail-title">
|
|
<text style="flex:1;font-size: 18px; font-weight: bold;">经纬度定位</text>
|
|
<button type="primary" size="mini" @click="navWithJwd">确定</button>
|
|
</view>
|
|
<view class="popup-content uni-flex uni-row" style="align-items: center;justify-content: center;">
|
|
<uni-forms ref="jwdForm" :modelValue="jwdData">
|
|
<uni-forms-item label="经度" name="longitude" required>
|
|
<uni-easyinput type="number" v-model="jwdData.longitude" placeholder="请输入经度" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="纬度" name="latitude" required>
|
|
<uni-easyinput type="number" v-model="jwdData.latitude" placeholder="请输入纬度" />
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
</view>
|
|
</uni-popup>
|
|
<!-- 图层叠加弹窗 -->
|
|
<uni-popup ref="popup" background-color="#fff" @change="popupChange">
|
|
<view class="popup-title">图层叠加</view>
|
|
<view class="popup-content uni-flex uni-row" style="align-items: center;justify-content: center;">
|
|
<view class="uni-flex uni-row" style="flex:1;flex-wrap: wrap;">
|
|
<layer-checkbox v-for="(item,i) in layerItems" :icon="item.icon" :label="item.text" :value="i"
|
|
@change="checkLayer" :checked="currentLayers.indexOf(i)>-1"
|
|
:iconStyle="item.iconStyle"></layer-checkbox>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<!-- 图层详情弹窗 -->
|
|
<uni-popup ref="popupDetail" background-color="#fff">
|
|
<view class="popup-detail-title">
|
|
<text
|
|
style="flex:1;font-size: 18px; font-weight: bold;">{{currentClickLayerItem?currentClickLayerItem.text:''}}详情</text>
|
|
<text @click="closeDetail()" style="font-size: 16px;color: #555; padding-bottom: 4px;">关闭</text>
|
|
</view>
|
|
<view class="popup-content" style="padding: 12px;">
|
|
<view class="detail-tab">
|
|
<view v-if="detailGroups.length>1" v-for="groupItem in detailGroups"
|
|
style="margin-bottom: 8px;margin-right: 8px;">
|
|
<uni-tag :circle="true" @click="changeDetailTab(groupItem.tab)" :text="groupItem.tab"
|
|
:type="currentGroupTab===groupItem.tab?'success':''"></uni-tag>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="!!currentGroupTab" style="border: 0.5px solid rgba(5, 5, 5, 0.1);">
|
|
<view v-for="item in detailGroups.find(g=>g.tab===currentGroupTab).children">
|
|
<view class="uni-flex uni-row">
|
|
<view
|
|
style="display: flex;align-items: center; width:30%;padding: 2px 4px;background-color: rgba(0, 0, 0, 0.02);border: 0.5px solid rgba(5, 5, 5, 0.1);">
|
|
<text style="color: #666;">{{item.title}}</text>
|
|
</view>
|
|
<view
|
|
style="display: flex;align-items: center;width:70%;padding: 2px 8px;border: 0.5px solid rgba(5, 5, 5, 0.1);">
|
|
<text
|
|
v-if="!item.value.toString().endsWith('.png')&&!item.value.toString().endsWith('.jpg')"
|
|
style="color: #222;">{{item.value}}{{item.unit}}</text>
|
|
<view
|
|
v-if="item.value.toString().endsWith('.png')||item.value.toString().endsWith('.jpg')">
|
|
<image v-for="(img,index) in item.value.split(',')"
|
|
style="height: 36px; width: 36px;margin-right: 8px;" :src="img"
|
|
@click="preview(index,item.value.split(','))">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
<view class="top-right">
|
|
<view @click.stop="showSearch(true)" v-if="searchVisible" style="flex: 1;">
|
|
<uni-search-bar :focus="true" v-model="searchValue" @confirm="search"
|
|
cancelButton="none"></uni-search-bar>
|
|
</view>
|
|
<!-- <view class="search" @click.stop="showSearch(true)" v-if="!searchVisible">
|
|
<image src="/static/search.png" class="img-search" />
|
|
</view> -->
|
|
<view class="message" @click="toWdxx">
|
|
<image src="/static/message.png" class="img-message" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import helper from '../../common/helper';
|
|
import {
|
|
GeoJSON
|
|
} from 'ol/format'
|
|
import _ from 'lodash'
|
|
export default {
|
|
data() {
|
|
return {
|
|
locationing: false,
|
|
searchVisible: false,
|
|
searchValue: '',
|
|
mapData: {
|
|
center: [102.45438, 32.53223]
|
|
},
|
|
currentLayers: [],
|
|
currentLayer: null,
|
|
layerItems: [],
|
|
detailItems: [],
|
|
detailGroups: [],
|
|
currentGroupTab: null,
|
|
token: '',
|
|
measureStatus: '',
|
|
currentClickLayerItem: null,
|
|
xzgjPoints: [],
|
|
compassNum: 0,
|
|
jwdData: {},
|
|
rules: {
|
|
longitude: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '经度不能为空',
|
|
}, {
|
|
format: "number",
|
|
validateFunction: function(rule, value, data, callback) {
|
|
if (value < 0 || value > 180) {
|
|
callback('经度范围应在 0 到 180 之间')
|
|
}
|
|
return true
|
|
}
|
|
}]
|
|
},
|
|
latitude: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '纬度不能为空',
|
|
}, {
|
|
format: "number",
|
|
validateFunction: function(rule, value, data, callback) {
|
|
if (value < -90 || value > 90) {
|
|
callback('纬度范围应在 -90 到 90 之间')
|
|
}
|
|
return true
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
currentLayers(newVal, oldVal) {
|
|
const map = this.$map;
|
|
console.log(newVal, oldVal, map);
|
|
if (newVal) {
|
|
this.mapData = {
|
|
layerOpts: newVal?.map(val => {
|
|
const item = this.layerItems[val];
|
|
return {
|
|
layerName: item.value,
|
|
layerIndex: val,
|
|
...item
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.token = helper.tempToken;
|
|
let testIndex = 0;
|
|
const settings = uni.getAppAuthorizeSetting()
|
|
console.log(settings)
|
|
uni.onLocationChange(res => {
|
|
let {
|
|
longitude,
|
|
latitude,
|
|
isFullAccuracy
|
|
} = res;
|
|
console.log(res)
|
|
// longitude = longitude + 0.01 * testIndex * (testIndex % 2 ? 1 : -1);
|
|
// latitude = latitude + 0.01 * testIndex * (testIndex % 2 ? 1 : -1);
|
|
// ++testIndex;
|
|
if (!this.xzgjPoints.find(point => {
|
|
return point[0] === longitude && point[1] === latitude;
|
|
})) {
|
|
this.xzgjPoints.push([longitude, latitude]);
|
|
}
|
|
console.log(this.xzgjPoints)
|
|
this.mapData = {
|
|
xzgjPoints: this.xzgjPoints
|
|
}
|
|
})
|
|
|
|
this.compassHandler = res => {
|
|
this.compassNum = res.direction;
|
|
}
|
|
uni.onCompassChange(this.compassHandler);
|
|
|
|
this.loadLayerItems();
|
|
},
|
|
onShow() {
|
|
uni.startCompass()
|
|
console.log('index.show')
|
|
},
|
|
onHide() {
|
|
uni.stopCompass();
|
|
},
|
|
methods: {
|
|
navWithJwd() {
|
|
this.$refs.jwdForm.validate((err, formData) => {
|
|
// 如果校验成功 ，err 返回 null
|
|
if (!err) {
|
|
console.log('success', formData)
|
|
this.mapData = {
|
|
center: [formData.longitude, formData.latitude, Math.random()]
|
|
}
|
|
this.$refs.jwdPopup.close();
|
|
return
|
|
}
|
|
console.log('error', err, formData)
|
|
}).then(res => {
|
|
// res 返回 null
|
|
})
|
|
},
|
|
showJwdPopup() {
|
|
this.$refs.jwdPopup.open('bottom');
|
|
setTimeout(() => {
|
|
this.$refs.jwdForm.setRules(this.rules)
|
|
}, 500)
|
|
},
|
|
loadLayerItems() {
|
|
uni.request({
|
|
url: `${helper.mgServerUrl}/app/config/layer`,
|
|
header: {
|
|
Authorization: `Bearer ${this.token}`
|
|
},
|
|
success: (resp) => {
|
|
console.log(resp)
|
|
if (resp.data.data) {
|
|
const item = resp.data.data;
|
|
const defaultShowIndexs = [];
|
|
this.layerItems = item?.layerItems.map((layerItem, i) => {
|
|
if (layerItem.visible) {
|
|
defaultShowIndexs.push(i);
|
|
}
|
|
return {
|
|
text: layerItem.title,
|
|
value: layerItem.layerName,
|
|
icon: layerItem.icon,
|
|
zIndex: 99,
|
|
detailUrl: layerItem.detailUrl,
|
|
geoserverUrl: layerItem.geoserverUrl || item.geoserverUrl,
|
|
layerWorkspace: layerItem.layerWorkspace || item.layerWorkspace,
|
|
...layerItem
|
|
}
|
|
});
|
|
if (defaultShowIndexs.length > 0) {
|
|
this.currentLayers = defaultShowIndexs;
|
|
}
|
|
}
|
|
},
|
|
})
|
|
},
|
|
checkLayer(value) {
|
|
console.log('check', value)
|
|
const index = this.currentLayers.findIndex(l => l === value);
|
|
if (index > -1) {
|
|
this.currentLayers.splice(index, 1);
|
|
} else {
|
|
this.currentLayers.push(value)
|
|
}
|
|
},
|
|
closeMeasureStatus() {
|
|
this.measureStatus = ''
|
|
this.mapData = {}
|
|
},
|
|
toggleXzgj() {
|
|
if (this.measureStatus === 'xzgj') {
|
|
this.measureStatus = ''
|
|
this.mapData = {}
|
|
uni.stopLocationUpdate();
|
|
} else {
|
|
this.measureStatus = 'xzgj';
|
|
this.xzgjPoints = []
|
|
uni.startLocationUpdate({
|
|
// type: 'gcj02',
|
|
needFullAccuracy: true
|
|
})
|
|
this.mapData = {
|
|
xzgj: true
|
|
}
|
|
}
|
|
},
|
|
toggleMeasure() {
|
|
if (this.measureStatus === 'mjcl') {
|
|
this.measureStatus = ''
|
|
this.mapData = {}
|
|
} else {
|
|
this.measureStatus = 'mjcl'
|
|
this.mapData = {
|
|
mjcl: true
|
|
}
|
|
uni.stopLocationUpdate();
|
|
}
|
|
},
|
|
showFfzy(id) {
|
|
console.log(id)
|
|
const ffzyLayerIndex = this.layerItems.findIndex(item => item.value === 'ffzy_layer')
|
|
if (!this.currentLayers.find(l => l === ffzyLayerIndex)) {
|
|
this.currentLayers.push(ffzyLayerIndex)
|
|
}
|
|
uni.request({
|
|
url: `${helper.serverUrl}/ffzy/ffzy/${id}`,
|
|
header: {
|
|
Authorization: `Bearer ${this.token}`
|
|
},
|
|
success: (resp) => {
|
|
console.log(resp)
|
|
if (resp.data.data) {
|
|
const item = resp.data.data;
|
|
if (item.geom) {
|
|
this.mapData = {
|
|
ffzyWkt: item.geom
|
|
}
|
|
}
|
|
}
|
|
},
|
|
})
|
|
},
|
|
toWdxx() {
|
|
uni.navigateTo({
|
|
url: "/pages/wdxx/wdxx"
|
|
})
|
|
},
|
|
preview(index, imgs) {
|
|
uni.previewImage({
|
|
urls: imgs,
|
|
current: index
|
|
})
|
|
},
|
|
changeDetailTab(tabName) {
|
|
this.currentGroupTab = tabName;
|
|
},
|
|
closeDetail() {
|
|
this.$refs.popupDetail.close()
|
|
},
|
|
showSearch(visible) {
|
|
this.searchVisible = visible;
|
|
},
|
|
clear(res) {
|
|
this.searchValue = '';
|
|
},
|
|
search(res) {
|
|
console.log('查询值：' + res.value);
|
|
},
|
|
location() {
|
|
this.locationing = true;
|
|
uni.getLocation({
|
|
type: 'gcj02',
|
|
success: (res) => {
|
|
console.log(res);
|
|
this.locationing = false;
|
|
const coords = helper.gcj02towgs84(res.longitude, res.latitude)
|
|
console.log(coords, [res.longitude, res.latitude])
|
|
this.mapData = {
|
|
center: [...coords, Math.random()]
|
|
}
|
|
},
|
|
fail: () => {
|
|
this.locationing = false;
|
|
}
|
|
});
|
|
},
|
|
toWorkBench() {
|
|
uni.navigateTo({
|
|
url: '/pages/workbench/workbench',
|
|
success(a) {
|
|
debugger
|
|
},
|
|
fail(a) {
|
|
debugger
|
|
}
|
|
})
|
|
},
|
|
popupChange(e) {
|
|
console.log('当前模式：' + e.type + ',状态：' + e.show);
|
|
},
|
|
showLayerModal() {
|
|
this.$refs.popup.open('bottom')
|
|
},
|
|
_request(index, wkt, apis, callback) {
|
|
if (apis[index]) {
|
|
uni.request({
|
|
url: `${helper.mgServerUrl}${apis[index]}?wkt=${wkt}`,
|
|
success: (resp2) => {
|
|
console.log(resp2)
|
|
if (resp2?.data?.data?.dyColumn?.length > 0) {
|
|
const layerItem = this.layerItems.find(item => item.detailUrl === apis[index]);
|
|
this.currentClickLayerItem = layerItem;
|
|
callback(resp2?.data?.data, layerItem)
|
|
} else {
|
|
this._request(++index, wkt, apis, callback)
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
requestDetail({
|
|
wkt
|
|
}) {
|
|
// if (resp?.data?.features?.[0]) {
|
|
// this.mapData = {
|
|
// highLightData: resp?.data?.features?.[0]
|
|
// }
|
|
|
|
// }
|
|
const apis = [];
|
|
this.layerItems.forEach((item, i) => {
|
|
const layerIndex = this.currentLayers.findIndex(l => l === i);
|
|
if (layerIndex > -1) {
|
|
apis.push(item.detailUrl);
|
|
}
|
|
});
|
|
this._request(0, wkt, apis, (resp) => {
|
|
if (resp) {
|
|
if (resp.geom) {
|
|
this.mapData = {
|
|
highLightWkt: resp.geom
|
|
}
|
|
|
|
}
|
|
const groups = _.groupBy(resp.dyColumn, 'tab');
|
|
this.detailGroups = _.keys(groups).map(key => {
|
|
return {
|
|
tab: key,
|
|
children: groups[key]?.map(item => {
|
|
return {
|
|
...item,
|
|
value: item.value || ''
|
|
}
|
|
})
|
|
}
|
|
});
|
|
this.currentGroupTab = this.detailGroups?.[0]?.tab;
|
|
this.$refs.popupDetail.open('bottom');
|
|
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script module="mapModule" lang="renderjs">
|
|
import 'ol/ol.css'
|
|
import {
|
|
Map,
|
|
View
|
|
} from 'ol'
|
|
import {
|
|
get as getProjection
|
|
} from 'ol/proj';
|
|
import {
|
|
Tile as TileLayer,
|
|
Vector as VectorLayer
|
|
} from 'ol/layer'
|
|
import {
|
|
XYZ,
|
|
Vector as VectorSource
|
|
} from 'ol/source'
|
|
import {
|
|
Point,
|
|
Polygon,
|
|
Circle,
|
|
LineString
|
|
} from 'ol/geom'
|
|
import {
|
|
fromExtent,
|
|
fromCircle
|
|
} from 'ol/geom/Polygon';
|
|
import Feature from 'ol/Feature';
|
|
import {
|
|
Style,
|
|
Icon as IconStyle,
|
|
Circle as CircleStyle,
|
|
Fill,
|
|
Stroke,
|
|
Text as TextStyle
|
|
} from 'ol/style'
|
|
import helper from '../../common/helper';
|
|
import {
|
|
Image,
|
|
Tile
|
|
} from 'ol/layer';
|
|
import {
|
|
ImageWMS,
|
|
WMTS
|
|
} from 'ol/source';
|
|
import {
|
|
GeoJSON,
|
|
WKT
|
|
} from 'ol/format'
|
|
import {
|
|
getForViewAndSize
|
|
} from 'ol/extent';
|
|
import {
|
|
WMTS as WMTSGrid
|
|
} from 'ol/tilegrid'
|
|
let map, vectorLayer, locationVectorLayer;
|
|
export default {
|
|
name: 'c-ol-map',
|
|
data() {
|
|
return {
|
|
ownerInstance: null
|
|
}
|
|
},
|
|
mounted(args) {
|
|
console.log(args)
|
|
this.initMap()
|
|
},
|
|
methods: {
|
|
updateMapData(newValue, oldValue, ownerInstance, instance) {
|
|
this.ownerInstance = ownerInstance;
|
|
// 监听 service 层数据变更
|
|
if (map) {
|
|
if (newValue.center) {
|
|
const point = new Point([newValue.center[0], newValue.center[1]]);
|
|
const pFeature = new Feature({
|
|
geometry: point
|
|
});
|
|
pFeature.setStyle([new Style({
|
|
image: new IconStyle({
|
|
src: './static/wz.png',
|
|
scale: 0.5,
|
|
anchor: [0.5, 1]
|
|
})
|
|
})
|
|
// , new Style({
|
|
// image: new CircleStyle({
|
|
// radius: 8,
|
|
// fill: new Fill({
|
|
// color: 'rgba(0,0,0,0)',
|
|
// }),
|
|
// stroke: new Stroke({
|
|
// width: 3,
|
|
// color: '#00ffff'
|
|
// }),
|
|
// })
|
|
// })
|
|
])
|
|
locationVectorLayer.getSource().clear();
|
|
locationVectorLayer.getSource().addFeature(pFeature);
|
|
map.getView().fit(point, {
|
|
maxZoom: 16
|
|
});
|
|
}
|
|
if (newValue.layerOpts) {
|
|
const businessLayers = map.getAllLayers().filter(l => {
|
|
return l.get('businessId') === 'business-layer';
|
|
}) || []
|
|
const layers = newValue.layerOpts.map(opt => {
|
|
let layer = businessLayers.find(l => {
|
|
return l.get('businessIndex') === opt.layerIndex;
|
|
})
|
|
if (!layer) {
|
|
if (opt.layerType === 'wmts') {
|
|
var gridsetName = 'EPSG:4326';
|
|
var gridNames = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3',
|
|
'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7',
|
|
'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11',
|
|
'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15',
|
|
'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19',
|
|
'EPSG:4326:20', 'EPSG:4326:21'
|
|
];
|
|
var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125,
|
|
0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125,
|
|
0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4,
|
|
1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5,
|
|
2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6,
|
|
2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7,
|
|
3.3527612686157227E-7
|
|
];
|
|
|
|
// const url = `${opt.geoserverUrl}/geoserver/${opt.layerWorkspace}/gwc/service/wmts?layer=${opt.layerWorkspace}:${opt.layerName}&style=${opt.layerStyle||''}&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:4326:{z}&TileCol={y}&TileRow={x}`
|
|
// console.log(url)
|
|
var source = new WMTS({
|
|
url: `${opt.geoserverUrl}/geoserver/${opt.layerWorkspace}/gwc/service/wmts`,
|
|
// url,
|
|
layer: `${opt.layerWorkspace}:${opt.layerName}`,
|
|
matrixSet: gridsetName,
|
|
format: 'image/png',
|
|
projection: "EPSG:4326",
|
|
tileGrid: new WMTSGrid({
|
|
tileSize: [256, 256],
|
|
extent: [-180.0, -90.0, 180.0, 90.0],
|
|
origin: [-180.0, 90.0],
|
|
resolutions: resolutions,
|
|
matrixIds: gridNames
|
|
}),
|
|
style: opt.layerStyle || '',
|
|
wrapX: true
|
|
});
|
|
layer = new Tile({
|
|
businessId: 'business-layer',
|
|
businessName: opt.layerName,
|
|
businessIndex: opt.layerIndex,
|
|
zIndex: opt.zIndex,
|
|
source,
|
|
extent: opt.extent || undefined
|
|
});
|
|
} else if (opt.layerType === 'xyz') {
|
|
layer = new TileLayer({
|
|
source: new XYZ({
|
|
maxZoom: opt.maxZoom || 18,
|
|
url: opt.url,
|
|
// url: 'http://t{0-5}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
|
|
projection: opt.projection || 'EPSG:3857',
|
|
crossOrigin: '*',
|
|
}),
|
|
zIndex: opt.zIndex,
|
|
extent: opt.extent || undefined,
|
|
businessId: 'business-layer',
|
|
businessName: opt.layerName,
|
|
businessIndex: opt.layerIndex,
|
|
})
|
|
} else {
|
|
layer = new Image({
|
|
businessId: 'business-layer',
|
|
businessName: opt.layerName,
|
|
businessIndex: opt.layerIndex,
|
|
extent: opt.extent || undefined,
|
|
source: new ImageWMS({
|
|
ratio: 1,
|
|
url: `${opt.geoserverUrl}/geoserver/${opt.layerWorkspace}/wms`,
|
|
params: {
|
|
'FORMAT': 'image/png',
|
|
'VERSION': '1.1.1',
|
|
"STYLES": opt.layerStyle || '',
|
|
"LAYERS": `${opt.layerWorkspace}:${opt.layerName}`,
|
|
"exceptions": 'application/vnd.ogc.se_inimage',
|
|
}
|
|
}),
|
|
zIndex: opt.zIndex
|
|
});
|
|
}
|
|
businessLayers.push(layer);
|
|
map.addLayer(layer);
|
|
} else {
|
|
layer.setVisible(true)
|
|
}
|
|
return layer;
|
|
})
|
|
vectorLayer.getSource().clear();
|
|
businessLayers.forEach(layer => {
|
|
const index = newValue.layerOpts.findIndex(opt => opt.layerIndex === layer.get(
|
|
'businessIndex'));
|
|
if (index === -1) {
|
|
layer.setVisible(false);
|
|
}
|
|
})
|
|
}
|
|
if (newValue.highLightWkt) {
|
|
const feature = new WKT().readFeature(newValue.highLightWkt)
|
|
feature.setStyle(new Style({
|
|
fill: new Fill({
|
|
color: 'rgba(0,0,0,0)',
|
|
}),
|
|
stroke: new Stroke({
|
|
width: 3,
|
|
color: '#ff0000'
|
|
}),
|
|
image: new CircleStyle({
|
|
radius: 8,
|
|
fill: new Fill({
|
|
color: 'rgba(0,0,0,0)',
|
|
}),
|
|
stroke: new Stroke({
|
|
width: 3,
|
|
color: '#00ffff'
|
|
}),
|
|
})
|
|
}));
|
|
vectorLayer.getSource().clear();
|
|
vectorLayer.getSource().addFeature(feature)
|
|
}
|
|
if (newValue.ffzyWkt) {
|
|
const point = new WKT().readGeometry(newValue.ffzyWkt);
|
|
const coordinate = point.getCoordinates();
|
|
map.getView().setCenter(coordinate)
|
|
this.showByWkt(coordinate)
|
|
}
|
|
if (newValue.mjcl) {
|
|
helper.startMeasure(map, () => {
|
|
this.ownerInstance?.callMethod('closeMeasureStatus', false)
|
|
})
|
|
}
|
|
if (newValue.xzgjPoints) {
|
|
this.clear();
|
|
if (newValue.xzgjPoints.length === 1) {
|
|
const point = new Point(newValue.xzgjPoints[0]);
|
|
const feature = new Feature({
|
|
geometry: point
|
|
})
|
|
const style = new Style({
|
|
image: new CircleStyle({
|
|
fill: new Fill({
|
|
color: '#0ff'
|
|
}),
|
|
radius: 8
|
|
})
|
|
})
|
|
feature.setStyle(style);
|
|
vectorLayer.getSource().addFeature(feature)
|
|
map.getView().setCenter(newValue.xzgjPoints[0])
|
|
} else if (newValue.xzgjPoints.length === 2) {
|
|
const line = new LineString(newValue.xzgjPoints);
|
|
const feature = new Feature({
|
|
geometry: line
|
|
})
|
|
const style = helper.generateStyle(feature, {
|
|
fillOpt: {
|
|
color: 'rgba(255, 255, 255, 0.4)',
|
|
},
|
|
strokeOpt: {
|
|
color: '#ffcc33',
|
|
width: 2,
|
|
}
|
|
})
|
|
feature.setStyle(style);
|
|
vectorLayer.getSource().addFeature(feature)
|
|
const geom = line.clone();
|
|
geom.scale(2, 2)
|
|
map.getView().fit(geom)
|
|
} else if (newValue.xzgjPoints.length >= 3) {
|
|
const polygon = new Polygon([
|
|
[...newValue.xzgjPoints, newValue.xzgjPoints[0]]
|
|
]);
|
|
const feature = new Feature({
|
|
geometry: polygon
|
|
})
|
|
const style = helper.generateStyle(feature, {
|
|
fillOpt: {
|
|
color: 'rgba(255, 255, 255, 0.4)',
|
|
},
|
|
strokeOpt: {
|
|
color: '#ffcc33',
|
|
width: 2,
|
|
},
|
|
withNode: true
|
|
})
|
|
feature.setStyle(style);
|
|
vectorLayer.getSource().addFeature(feature)
|
|
const geom = polygon.clone();
|
|
geom.scale(2, 2)
|
|
map.getView().fit(geom)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
clear() {
|
|
if (map) {
|
|
map.removeLayer(map.getAllLayers().find(l => l.get('id') === 'draw-layer'));
|
|
vectorLayer.getSource().clear();
|
|
locationVectorLayer.getSource().clear();
|
|
}
|
|
},
|
|
// 初始化天地图
|
|
initMap() {
|
|
let that = this
|
|
//天地图影像
|
|
// var tdt = new TileLayer({
|
|
// source: new XYZ({
|
|
// maxZoom: 16,
|
|
// url: "https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
|
|
// // url: 'http://t{0-5}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
|
|
// projection: 'EPSG:3857',
|
|
// crossOrigin: '*',
|
|
// }),
|
|
// })
|
|
//天地图标注
|
|
// var tdtLabel = new TileLayer({
|
|
// source: new XYZ({
|
|
// maxZoom: 18,
|
|
// url: 'http://t{0-5}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
|
|
// projection: 'EPSG:3857',
|
|
// }),
|
|
// })
|
|
map = new Map({
|
|
controls: [],
|
|
target: 'map',
|
|
layers: [],
|
|
view: new View({
|
|
projection: 'EPSG:4326',
|
|
center: [102.45438, 32.53223],
|
|
// center: [102.712251, 25.040609],
|
|
zoom: 12,
|
|
|
|
enableRotation: false
|
|
}),
|
|
})
|
|
vectorLayer = new VectorLayer({
|
|
id: 'v-layer',
|
|
source: new VectorSource(),
|
|
zIndex: 999
|
|
})
|
|
map.addLayer(vectorLayer);
|
|
locationVectorLayer = new VectorLayer({
|
|
id: 'l-v-layer',
|
|
source: new VectorSource(),
|
|
zIndex: 1000
|
|
})
|
|
map.addLayer(locationVectorLayer);
|
|
map.on('singleclick', evt => {
|
|
vectorLayer.getSource().clear();
|
|
console.log('evt', evt, map.getView().calculateExtent())
|
|
this.showByWkt(evt.coordinate);
|
|
})
|
|
},
|
|
showByWkt(coordinate) {
|
|
// const source = map.getAllLayers().find(l => l.get('id') === 'business-layer')?.getSource();
|
|
// if (source) {
|
|
const view = map.getView();
|
|
const viewResolution = view.getResolution();
|
|
const [x1] = map.getCoordinateFromPixel([0, 0]);
|
|
const [x2] = map.getCoordinateFromPixel([10, 0]);
|
|
const radius = x2 - x1;
|
|
const circle = new Circle(coordinate, radius);
|
|
const polygon = fromCircle(circle);
|
|
const wkt = new WKT().writeGeometry(polygon);
|
|
// const url = source.getFeatureInfoUrl(
|
|
// coordinate, viewResolution, view.getProjection(), {
|
|
// 'INFO_FORMAT': 'application/json',
|
|
// 'FEATURE_COUNT': 50
|
|
// });
|
|
this.ownerInstance?.callMethod('requestDetail', {
|
|
wkt: wkt
|
|
})
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.detail-tab {
|
|
display: flex;
|
|
flex-direction: row;
|
|
overflow-x: auto;
|
|
/* margin-bottom: 12px; */
|
|
padding-bottom: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.popup-detail-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 12px;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.logout {}
|
|
|
|
.search {
|
|
margin-right: 24px;
|
|
}
|
|
|
|
.btn-logout {
|
|
margin-top: 12px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.img-clear,
|
|
.img-logout {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.img-clear,
|
|
.img-jwd {
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
|
|
.img-logout,
|
|
.img-message,
|
|
.img-search,
|
|
.img-location {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
.top-right {
|
|
position: absolute;
|
|
top: 40px;
|
|
right: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
left: 10px;
|
|
justify-content: end;
|
|
height: 56px;
|
|
}
|
|
|
|
.popup-title {
|
|
font-weight: bold;
|
|
font-size: 22px;
|
|
text-align: center;
|
|
margin: 24px 0 0 0;
|
|
}
|
|
|
|
.popup-content {
|
|
padding: 24px;
|
|
}
|
|
|
|
.container>>>.checklist-box {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.container>>>.checklist-group {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.container>>>.checklist-content {
|
|
width: 70vw;
|
|
height: 32px;
|
|
}
|
|
|
|
.btn-img {
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
|
|
.right-btn {
|
|
width: 48px;
|
|
height: 48px;
|
|
background-color: #fff;
|
|
flex-direction: column;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.btn-location {
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
border-bottom: 1px solid #ddd;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.btn-clear {
|
|
border-bottom-left-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
|
|
.btn-tcdj {
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.btn-mjcl {
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.btn-xzgj {
|
|
border-bottom-left-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
|
|
.right-actions {
|
|
position: absolute;
|
|
top: 100px;
|
|
right: 20px;
|
|
}
|
|
|
|
.map {
|
|
height: 100vh;
|
|
}
|
|
|
|
.location {
|
|
position: absolute;
|
|
top: 100px;
|
|
left: 20px;
|
|
}
|
|
|
|
.south {
|
|
position: absolute;
|
|
top: 100px;
|
|
left: 20px;
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.south-img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: -5px;
|
|
width: 60px;
|
|
height: 60px;
|
|
|
|
}
|
|
|
|
.south-text {
|
|
z-index: 1;
|
|
font-weight: bold;
|
|
font-size: 17px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.btn-workbench {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 80px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0;
|
|
justify-content: center;
|
|
position: absolute;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
background: linear-gradient(0deg, #02C3AF, #00D883);
|
|
color: #fff;
|
|
/* height: 24px; */
|
|
line-height: 24px;
|
|
/* font-size: 16px; */
|
|
}
|
|
|
|
.workbench-img {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
</style> |