317 lines
8.7 KiB
Vue
317 lines
8.7 KiB
Vue
<template>
|
||
<div class="container-fluid">
|
||
<div :id="mapId" style="position: absolute; width: 100%; height: 100%" />
|
||
<div id="maptool">
|
||
<ul>
|
||
<li
|
||
class="maptoolCss"
|
||
title="图层栏"
|
||
style="border-top: 1px solid #000"
|
||
@click="showDialog"
|
||
>
|
||
<img src="./image/layer.png" />
|
||
<span>图层栏</span>
|
||
</li>
|
||
<li
|
||
class="maptoolCss"
|
||
title="预案关联"
|
||
style="border-top: 1px solid #000"
|
||
>
|
||
<img src="./image/layer.png" />
|
||
<span>预案关联</span>
|
||
</li>
|
||
<li
|
||
class="maptoolCss"
|
||
title="资源搜索"
|
||
style="border-top: 1px solid #000"
|
||
>
|
||
<img src="./image/layer.png" />
|
||
<span>资源搜索</span>
|
||
</li>
|
||
<li title="事件查询" style="border-top: 1px solid #000">
|
||
<img src="./image/layer.png" />
|
||
<span>事件查询</span>
|
||
</li>
|
||
<li title="监控搜索" style="border-top: 1px solid #000">
|
||
<img src="./image/layer.png" />
|
||
<span>监控搜索</span>
|
||
</li>
|
||
<li title="应急车辆" style="border-top: 1px solid #000">
|
||
<img src="./image/layer.png" style="padding: 0 4px 0 0" />
|
||
<span>应急车辆</span>
|
||
</li>
|
||
|
||
<li title="单兵搜索" style="border-top: 1px solid #000">
|
||
<img src="./image/layer.png" />
|
||
<span>单兵搜索</span>
|
||
</li>
|
||
<li
|
||
id="menu_measure"
|
||
title="量算工具"
|
||
style="border-top: 1px solid #000"
|
||
>
|
||
<img src="./image/layer.png" />
|
||
<span>量算工具</span>
|
||
</li>
|
||
<li
|
||
id="menu_road_analysis"
|
||
title="路径分析"
|
||
style="border-top: 1px solid #000"
|
||
>
|
||
<img src="./image/layer.png" />
|
||
<span>路径分析</span>
|
||
</li>
|
||
<li title="清空地图" style="border-top: 1px solid #000">
|
||
<img src="./image/layer.png" />
|
||
<span>清空地图</span>
|
||
</li>
|
||
<li
|
||
title="全屏地图"
|
||
class="screenMap"
|
||
style="border-top: 1px solid #000; border-bottom: 1px solid #000"
|
||
>
|
||
<img src="./image/layer.png" />
|
||
<span>全屏地图</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div
|
||
v-show="showFlag"
|
||
id="layerDiv"
|
||
class="layerCss"
|
||
title="图层栏"
|
||
style="
|
||
position: absolute;
|
||
z-index: 99999;
|
||
top: 60px;
|
||
left: auto;
|
||
right: 150px;
|
||
width: 200px;
|
||
"
|
||
>
|
||
<dialog open="open">
|
||
<div v-for="layer in layerData" :key="layer.layerId">
|
||
<h3>{{ layer.layerName }}</h3>
|
||
<div v-for="parentLayer in layer.children" :key="parentLayer.layerId">
|
||
<span>
|
||
<h4>
|
||
<input
|
||
:name="parentLayer.layerCode"
|
||
:value="parentLayer.configInfo"
|
||
type="checkbox"
|
||
@change="changeCheckbox($event)"
|
||
/>
|
||
{{ parentLayer.layerName }}
|
||
</h4>
|
||
</span>
|
||
<span
|
||
v-for="childLayer in parentLayer.children"
|
||
:key="childLayer.layerId"
|
||
>
|
||
<input
|
||
:name="childLayer.layerCode"
|
||
:value="childLayer.configInfo"
|
||
type="checkbox"
|
||
@change="changeCheckbox($event)"
|
||
/>
|
||
{{ childLayer.layerName }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { HieimpMap } from './map-init'
|
||
import { loadLayers, loadResourceLayerInfo } from '@/api/superMap/layer'
|
||
/**
|
||
* 一张图，暂做测试用
|
||
*/
|
||
export default {
|
||
// props: ['mapData'],
|
||
data() {
|
||
return {
|
||
mapId: 'leaflet-map',
|
||
hiMap: new HieimpMap(), // 地图全局对象
|
||
map: '', // 地图map对象
|
||
hiMapFun: {}, // 地图接口对象
|
||
showFlag: false,
|
||
layerData: [],
|
||
layerName: '',
|
||
configInfoJson: {},
|
||
}
|
||
},
|
||
created() {},
|
||
mounted() {
|
||
// 测试移除图层
|
||
// MapApp.removeLayer('yjpt_storage_layer')
|
||
this.loadLayerConfigInfo()
|
||
this.hiMap.initMap(this.mapId)
|
||
// 初始化接口对象
|
||
this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj)
|
||
// 应急仓库（可以直接打开）
|
||
// this.hiMapFun.showLayer('yjpt_storage_layer');
|
||
// 测试仓库增删改操作图层
|
||
// this.hiMapFun.initEditView();
|
||
// //测试扎点
|
||
// 如果需要扎点，直接使用enable() 即可
|
||
// this.hiMap.mapObj.drawMarker.enable();
|
||
// //测试新增事件图层
|
||
const features = [
|
||
{
|
||
lat: 36.17,
|
||
lon: 120.13,
|
||
attributes: {
|
||
事件名称: 'xx火灾事件',
|
||
addr: '事发地点青岛',
|
||
},
|
||
},
|
||
{
|
||
lat: 36.27,
|
||
lon: 120.14,
|
||
attributes: {
|
||
事件名称: '水灾事件',
|
||
addr: '事发地点黄岛',
|
||
},
|
||
},
|
||
]
|
||
// 事件测试图层数据
|
||
const layerConfigInfo = {
|
||
img: 'event_gif.gif',
|
||
// attribute: {
|
||
// 'EVENTTITLE': '事件名称',
|
||
// 'OCCURADDR': '事发地点',
|
||
// 'OCCURTIME': '事发时间',
|
||
// 'EVNTYPENAME': '事件类型',
|
||
// 'EVENTGRADE': '事件级别'
|
||
// },
|
||
slider: {
|
||
name: '影响半径',
|
||
sliderValue: 500,
|
||
bufferFunc: 'plotBufferFunc',
|
||
sliderFunc: 'showGoodsList',
|
||
},
|
||
buttons: [
|
||
{
|
||
name: '次生衍生事件分析',
|
||
id: 'btnDerivativeAnalysis',
|
||
func: 'showDerivativeAnalysis',
|
||
},
|
||
{
|
||
name: '次生衍生事件分析',
|
||
id: 'btnDerivativeAnalysis',
|
||
func: 'showDerivativeAnalysis',
|
||
},
|
||
],
|
||
}
|
||
this.hiMapFun.addFeaturesOnMap('gud_env_layer', features, layerConfigInfo)
|
||
},
|
||
methods: {
|
||
showDialog() {
|
||
this.showFlag = !this.showFlag
|
||
},
|
||
changeCheckbox(element) {
|
||
if (element.currentTarget.checked) {
|
||
// 将layerName与configInfoJson作为全局变量便于其他方法直接调用
|
||
this.layerName = element.currentTarget.name
|
||
const configInfo = element.currentTarget.value
|
||
this.configInfoJson = JSON.parse(configInfo)
|
||
// this.hiMapFun.showLayer(layerName, configInfoJson);
|
||
this.hiMapFun.showLayer(this.configInfoJson, this.AjaxGetLayerInfo)
|
||
} else {
|
||
this.hiMapFun.removeLayerByLayerName(element.currentTarget.name)
|
||
}
|
||
},
|
||
loadLayerConfigInfo() {
|
||
loadLayers().then((response) => {
|
||
if (response.code === 200) {
|
||
this.layerData = response.data
|
||
}
|
||
})
|
||
},
|
||
// Ajax请求回调函数
|
||
AjaxGetLayerInfo() {
|
||
// 获取hiMapFun对象
|
||
const hiMapFun = this.hiMapFun
|
||
const layerName = this.layerName
|
||
const configInfo = this.configInfoJson
|
||
let filterType = ''
|
||
if (configInfo.filterType !== undefined) {
|
||
filterType = configInfo.filterType
|
||
}
|
||
const filterUrl = configInfo.FilterUrl
|
||
let responseData = []
|
||
const params = {
|
||
filterType: filterType,
|
||
FilterUrl: filterUrl,
|
||
}
|
||
loadResourceLayerInfo(params).then(function (response) {
|
||
if (response.data.length === 0) {
|
||
console.log('该图层不存在数据')
|
||
} else {
|
||
responseData = response.data
|
||
const UUID = []
|
||
response.data.forEach((data) => {
|
||
UUID.push(data.uuid)
|
||
})
|
||
hiMapFun.showLayersByUuid(UUID, layerName, configInfo, responseData)
|
||
}
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
#leaflet-map {
|
||
width: 100%;
|
||
height: 96%;
|
||
}
|
||
.container-fluid {
|
||
padding-right: 0px;
|
||
padding-left: 0px;
|
||
margin-right: auto;
|
||
margin-left: auto;
|
||
}
|
||
#maptool {
|
||
position: absolute;
|
||
right: 0.2%;
|
||
top: 60px;
|
||
z-index: 99999;
|
||
}
|
||
|
||
#maptool ul {
|
||
width: 123px;
|
||
}
|
||
|
||
#maptool li {
|
||
padding: 1px;
|
||
height: 38px;
|
||
display: block;
|
||
background-color: #424f57;
|
||
text-transform: uppercase;
|
||
cursor: pointer;
|
||
font-size: 18px;
|
||
color: #ffffff;
|
||
font-family: '微软雅黑';
|
||
text-align: left;
|
||
}
|
||
|
||
#maptool li:hover {
|
||
}
|
||
|
||
#maptool li > img {
|
||
margin-left: 10px;
|
||
margin-top: 5px;
|
||
transform: translate(0, 3px);
|
||
}
|
||
|
||
#maptool ul > #menu li a {
|
||
font-size: 18px;
|
||
color: #ffffff;
|
||
font-family: '微软雅黑';
|
||
background-color: #424f57;
|
||
}
|
||
</style>
|