<template>
|
<div class="layerPanel">
|
<div class="mapMode">
|
<div class="title">地图模式</div>
|
<div class="container">
|
<div
|
class="layerItem"
|
:key="value.id"
|
v-for="(value, index) in eMapModeList"
|
@click.stop="handleEMapClick(value, index)"
|
>
|
<img :src="value.src" :class="{ active: curEMapModelIndex == index }" />
|
<span :class="{ spanActive: curEMapModelIndex == index }">
|
{{
|
value.name
|
}}
|
</span>
|
</div>
|
<!-- <div
|
class="layerItem"
|
:key="value0.id"
|
v-for="(value0, index0) in sMapModelList"
|
@click.stop="handleSMapClick(value0, index0)"
|
>
|
<img :src="value0.src" :class="{ active: curSMapModelIndex == index0 }" />
|
<span :class="{ spanActive: curSMapModelIndex == index0 }">
|
{{
|
value0.name
|
}}
|
</span>
|
</div>-->
|
</div>
|
</div>
|
|
<div class="areaType">
|
<div class="title ZTtitle">
|
专题应用
|
<!-- 不显示更多图层 -->
|
<span class="more" v-show="false" @click.stop="showLayerTree">
|
更多图层
|
<i class="el-icon-arrow-right"></i>
|
</span>
|
</div>
|
<div class="container">
|
<div
|
class="layerItem"
|
v-for="(ZTValue, ZTIndex) in zhuantiList"
|
:key="ZTValue.id"
|
@click.stop="handleZTlick(ZTValue, ZTIndex)"
|
>
|
<img :src="ZTValue.src" :class="{ active: curZTIndex == ZTIndex }" />
|
<span :class="{ spanActive: curZTIndex == ZTIndex }">
|
{{
|
ZTValue.name
|
}}
|
</span>
|
</div>
|
<div
|
class="layerItem"
|
v-for="(funcValue, funcIndex) in FuncList"
|
:key="funcValue.id"
|
@click.stop="handleFuncClick(funcIndex)"
|
>
|
<img :src="funcValue.src" :class="{ active: curFuncIndex == funcIndex }" />
|
<span :class="{ spanActive: curFuncIndex == funcIndex }">
|
{{
|
funcValue.name
|
}}
|
</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
loadHXQ,
|
loadJKQ,
|
loadXZ,
|
clearMap,
|
loadManhole,
|
loadCamera,
|
loadEnterprise,
|
loadLayer,
|
clearLayerByTypeId,
|
clearLayerByTypeIdArr
|
} from "@/utils/map.js";
|
import _GLOBAL from "@/assets/GLOBAL2";
|
import store from "@/utils/store2.js";
|
import ZTTitem from "@/utils/ztt2.js";
|
import { layers } from "../../../../static/json/layer.js";
|
import {
|
addImageLayer,
|
addAnnotationLayer,
|
addHxLayer,
|
addYzLayer,
|
loadBaseMap,
|
loadGeoMap,
|
clearAll
|
} from "@/utils/tool";
|
export default {
|
name: "LayerPanel",
|
data() {
|
return {
|
eMapModeList: [
|
{
|
id: "ewdt",
|
name: "二维地图",
|
active: false,
|
type: "er",
|
src: require("@/assets/img/layer/ewdt.png")
|
},
|
{
|
id: "yxdt",
|
name: "影像地图",
|
active: true,
|
type: "er",
|
src: require("@/assets/img/layer/yxdt.png")
|
}
|
],
|
sMapModelList: [
|
{
|
id: "swmx",
|
name: "三维模型",
|
active: false,
|
type: "san",
|
src: require("@/assets/img/layer/swmx.png")
|
}
|
],
|
FuncList: [
|
{
|
id: "tdgl",
|
name: "土地管理",
|
active: false,
|
src: require("@/assets/img/layer/tudiguanli.png")
|
},
|
{
|
id: "history",
|
name: "历史影像",
|
active: false,
|
src: require("@/assets/img/layer/lishiyingxiang.png")
|
}
|
],
|
zhuantiList: ZTTitem,
|
//curMapModelIndex: 1,
|
curEMapModelIndex: 0,
|
curSMapModelIndex: -1,
|
curAreaTypeIndex: -1,
|
curFuncIndex: -1,
|
curZTIndex: -1,
|
state: store.thematicLayer,
|
basicMapChecked: store.basicMapChecked,
|
state1: store.tdglInfo
|
};
|
},
|
mounted() {
|
this.$nextTick(() => {
|
setTimeout(() => {
|
switch (this.$route.query.showlayer) {
|
case "SPJK":
|
debugger;
|
this.handleZTlick(ZTTitem[0], 0);
|
break;
|
case "QYXX":
|
this.handleZTlick(ZTTitem[1], 1);
|
break;
|
case "SZGT":
|
this.handleZTlick(ZTTitem[2], 2);
|
break;
|
case "TDGL":
|
this.handleFuncClick(0);
|
break;
|
case "LSYX":
|
this.handleFuncClick(1);
|
break;
|
default:
|
break;
|
}
|
// loadEnterprise();
|
// 初始加载地图
|
// this.handleEMapClick(this.eMapModeList[1], 1);
|
}, 1000);
|
});
|
},
|
methods: {
|
// 二维底图选择
|
handleEMapClick(result, index) {
|
if (this.curEMapModelIndex == index) return;
|
this.curEMapModelIndex = index;
|
clearAll();
|
switch (result.name) {
|
case "二维地图":
|
loadGeoMap();
|
// loadBaseMap();
|
// addAnnotationLayer();
|
addHxLayer();
|
addYzLayer();
|
// window.mapapi.getView().setZoom(14);
|
break;
|
case "影像地图":
|
addImageLayer();
|
addAnnotationLayer();
|
addHxLayer();
|
addYzLayer();
|
break;
|
}
|
},
|
// 跳转到三维
|
handleSMapClick(result, index) {
|
store.setLayerPanelShow(false);
|
this.$router.push("/viewer3D");
|
},
|
// 点位图 点击
|
handleZTlick(result, index) {
|
console.log(result, index);
|
const val = layers.filter(res => {
|
if (res.name == result.name) {
|
return res;
|
}
|
});
|
const children = val[0].children;
|
if (this.curZTIndex == index) {
|
this.curZTIndex = -1;
|
|
store.setThematicLayerItemId("");
|
} else {
|
this.curZTIndex = index;
|
store.setThematicLayerItemId(children);
|
}
|
},
|
// 功能项 点击
|
handleFuncClick(index) {
|
if (this.curFuncIndex == index) {
|
store.setTdglFlag(false);
|
store.setPoplayerListAction({});
|
store.setPoplayerShowAction(false);
|
this.curFuncIndex = -1;
|
// window.clusterLayer && window.clusterLayer.clear();
|
if (window.tdglLine) {
|
window.mapapi.removeLayer(window.tdglLine);
|
window.tdglLine = null;
|
}
|
|
if (window.tdgllayer) {
|
store.setSliderShow(false);
|
window.mapapi.removeLayer(window.tdgllayer);
|
window.tdgllayer = null;
|
}
|
} else {
|
this.curFuncIndex = index;
|
// 隐藏底部图层面版
|
store.setLayerPanelShow(false);
|
// 隐藏右上角菜单面板
|
store.setMenuListShow(false);
|
// 隐藏底部漫游面板
|
store.setRoamPanelShow(false);
|
switch (index) {
|
case 0:
|
//显示滑动条
|
store.setSliderShow(true);
|
store.setTdglFlag(true);
|
var url = layers[8].children[0].urls;
|
//加载地块模型
|
window.tdgllayer = new ol.layer.Tile({
|
source: new ol.source.TileWMS({
|
ratio: 3,
|
url:
|
"https://skyzt.bda.gov.cn/gisserver/wmsserver/chengshiguihua_dikuaibianhao",
|
params: {
|
VERSION: "1.1.1",
|
SRS: "EPSG:3857",
|
FORMAT: "image/png",
|
TILED: true,
|
LAYERS: ""
|
}
|
})
|
});
|
|
// window.tdgllayer = new ol.layer.Tile({
|
// source: new ol.source.XYZ({
|
// projection: "EPSG:4326",
|
// format: new ol.format.MVT(),
|
// tileGrid: ol.tilegrid.createXYZ({
|
// // extent: [-50.582, -90, 180, 70.1558],
|
// extent: [-180, -90, 180, 90]
|
// }),
|
// tilePixelRatio: 3,
|
// tileUrlFunction: function (tileCoord, pixelRatio, proj) {
|
// console.log(tileCoord, '参数')
|
// console.log(Math.pow(2, tileCoord[0]) + tileCoord[2] - 1)
|
// // return url + (tileCoord[0] - 1) + '/' + tileCoord[1] + '/' + (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + '.jpeg';
|
// return (
|
// url +
|
// (tileCoord[0]) +
|
// "/" +
|
// tileCoord[1] +
|
// "/" +
|
// (Math.pow(2, tileCoord[0]) + tileCoord[2] - 1) +
|
// ".jpeg"
|
// );
|
|
// },
|
// }),
|
// });
|
|
window.mapapi.addLayer(window.tdgllayer);
|
break;
|
case 1:
|
this.curFuncIndex = -1;
|
store.setTdglFlag(false);
|
store.setSliderShow(false);
|
window.mapapi.removeLayer(window.tdgllayer);
|
store.setHistoryShow(true);
|
break;
|
}
|
}
|
},
|
showLayerTree() {
|
store.setLayerTreeShow(true);
|
}
|
},
|
// watch: {
|
// // 基础图层
|
// "basicMapChecked.val": {
|
// handler: function(newVal, oldVal) {
|
// if (newVal == "三维模型") {
|
// debugger;
|
// this.handleSMapClick(
|
// {
|
// id: "swmx",
|
// name: "三维模型",
|
// active: false,
|
// type: "san",
|
// src: require("@/assets/img/layer/swmx.png")
|
// },
|
// 1
|
// );
|
// }
|
// },
|
// immediate: true, //刷新加载 立马触发一次handler
|
// deep: true // 可以深度检测到 obj 对象的属性值的变化
|
// }
|
// },
|
computed: {
|
alpha() {
|
return store.tdglInfo.alpha;
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.layerPanel {
|
width: 100%;
|
/* height: 396px; */
|
position: absolute;
|
bottom: 0px;
|
align-items: center;
|
/* padding: 0.1rem; */
|
background: #ffffff;
|
/* z-index: 1000; */
|
/* padding-left: 0.25rem; */
|
border-radius: 15px 15px 0px 0px;
|
}
|
.mapMode {
|
width: 100%;
|
margin-top: 24px;
|
padding-left: 28px;
|
}
|
|
@font-face {
|
font-family: "YouSheBiaoTiHei";
|
src: url("../../../../static/YouSheBiaoTiHei.ttf");
|
}
|
.title {
|
width: 72px;
|
height: 14px;
|
font-family: "YouSheBiaoTiHei";
|
font-weight: 400;
|
font-size: 19px;
|
color: #2e2e2e;
|
line-height: 15px;
|
margin-bottom: 18px;
|
}
|
.mapMode .container {
|
display: flex;
|
align-items: center;
|
text-align: center;
|
flex-wrap: wrap;
|
}
|
|
.layerItem {
|
/* font-size: 14px; */
|
font-family: "微软雅黑";
|
font-weight: 400;
|
cursor: pointer;
|
text-align: center;
|
}
|
.mapMode .layerItem {
|
width: 0.8rem;
|
margin-right: 24px;
|
}
|
.mapMode img {
|
display: block;
|
width: 100%;
|
border-radius: 11px;
|
border: 1px dashed #127dff;
|
margin-bottom: 11px;
|
}
|
span {
|
font-family: "微软雅黑";
|
font-size: 0.12rem;
|
color: #6e6969;
|
line-height: 12px;
|
}
|
.mapMode .active,
|
.areaType .active {
|
color: #127dff;
|
border: 2px solid #127dff;
|
border-radius: 10px;
|
}
|
|
.spanActive {
|
color: #127dff;
|
}
|
.areaType {
|
width: 100%;
|
margin-top: 30px;
|
}
|
|
.areaType .ZTtitle {
|
margin-left: 28px;
|
margin-bottom: 3px;
|
}
|
.areaType .container {
|
margin-top: 18px;
|
padding: 0 4%;
|
display: grid;
|
justify-items: center;
|
grid-template-columns: repeat(4, 1fr);
|
overflow: hidden;
|
}
|
.areaType .layerItem {
|
margin-bottom: 15px;
|
}
|
|
.areaType img {
|
margin: 0 auto;
|
/* background-color: green; */
|
display: block;
|
width: 0.5rem;
|
border-radius: 11px;
|
box-shadow: 0 0 5px 5px rgb(196 222 236 / 30%);
|
margin-bottom: 11px;
|
}
|
|
.more {
|
float: right;
|
margin-right: 20px;
|
font-size: 0.12rem;
|
color: #127dff;
|
line-height: 25px;
|
font-weight: 500;
|
font-family: unset;
|
cursor: pointer;
|
}
|
</style>
|
