<template>
|
<div class="layerPanel">
|
<div class="mapMode">
|
<div class="title" style="margin-top: 0px">地图模式</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" style="margin-top: 10px">
|
<div class="title">
|
专题应用
|
<!-- 不显示更多图层 -->
|
<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>
|
<div class="title2"></div>
|
<div class="container">
|
<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 class="yjsxt">
|
<div class="title">城市部件</div>
|
<div class="container">
|
<div
|
class="layerItem"
|
:key="value2.id"
|
v-for="(value2, index2) in yjList"
|
@click.stop="handleYJClick(index2)"
|
>
|
<img :src="value2.src" :class="{ active: curYjIndex == index2 }" />
|
<span :class="{ spanActive: curYjIndex == index2 }">{{
|
value2.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: [],
|
areaTypeList: [
|
{
|
id: "规划范围",
|
name: "规划范围",
|
active: false,
|
src: require("@/assets/img/layer/ghfw.png"),
|
},
|
{
|
id: "XingZhengQuHuaTu",
|
name: "行政区划",
|
active: false,
|
src: require("@/assets/img/layer/xzqh.png"),
|
},
|
{
|
id: "GuiHuaDanYuanHuaFenTu",
|
name: "规划单元",
|
active: false,
|
src: require("@/assets/img/layer/ghdy.png"),
|
},
|
{
|
id: "ZhuYaoGongNengQuGuiHuaShiYiTu",
|
name: "功能区域",
|
active: false,
|
src: require("@/assets/img/layer/gnq.png"),
|
},
|
],
|
yjList: [
|
{
|
id: "yinjing",
|
name: "窨井",
|
active: false,
|
src: require("@/assets/img/layer/yj.png"),
|
},
|
{
|
id: "shext",
|
name: "摄像头",
|
active: false,
|
src: require("@/assets/img/layer/sxt.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: 1,
|
curSMapModelIndex: -1,
|
curAreaTypeIndex: -1,
|
curYjIndex: -1,
|
curFuncIndex: -1,
|
curZTIndex: -1,
|
state: store.thematicLayer,
|
basicMapChecked: store.basicMapChecked,
|
state1: store.tdglInfo,
|
};
|
},
|
mounted() {
|
this.$nextTick(() => {
|
// setTimeout(() => {
|
// this.handleEMapClick(
|
// {
|
// id: "yxdt",
|
// name: "影像地图",
|
// active: true,
|
// type: "er",
|
// src: "/static/img/yxdt.cf4698e.png",
|
// },
|
// 1
|
// );
|
// loadEnterprise();
|
// }, 2000);
|
});
|
},
|
methods: {
|
changeLayerView(max, enableTilt) {
|
window.Viewer.scene.screenSpaceCameraController.maximumZoomDistance = max;
|
window.Viewer.scene.screenSpaceCameraController.enableTilt = enableTilt;
|
},
|
handleMapClick(result, index) {
|
const val = layers.filter((res) => {
|
if (res.name == result.name) {
|
return res;
|
}
|
});
|
const children = val[0].children;
|
if (this.curMapModelIndex == index) {
|
clearLayerByTypeId(result.id);
|
this.curMapModelIndex = -1;
|
} else {
|
this.curMapModelIndex = index;
|
if (result.type == "er") {
|
clearLayerByTypeIdArr(["ewdt", "yxdt"]);
|
} else {
|
clearLayerByTypeIdArr(["3Dcs", "swmx"]);
|
}
|
// clearLayerByTypeIdArr(['ewdt', 'yxdt', '3Dcs', 'swmx']);
|
_GLOBAL.layers[result.id] = [];
|
children.forEach((item) => {
|
let itemLayer = loadLayer(item);
|
_GLOBAL.layers[result.id].push(itemLayer);
|
console.log(_GLOBAL.layers[result.id]);
|
});
|
}
|
},
|
// 二维底图选择
|
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) {
|
// 设置相机
|
if (result.name == "3D城市") {
|
window.Viewer.scene.globe.maximumScreenSpaceError = 2;
|
this.changeLayerView(45000, true);
|
} else if (result.name == "三维模型") {
|
window.Viewer.scene.globe.maximumScreenSpaceError = 2;
|
this.changeLayerView(80000, true);
|
}
|
// 切换图层
|
const val = layers.filter((res) => {
|
if (res.name == result.name) {
|
return res;
|
}
|
});
|
const children = val[0].children;
|
if (this.curSMapModelIndex == index) {
|
// clearLayerByTypeId(result.id);
|
// this.curSMapModelIndex = -1;
|
} else {
|
this.curEMapModelIndex = -1;
|
this.curSMapModelIndex = index;
|
clearLayerByTypeIdArr(["ewdt", "yxdt"]);
|
clearLayerByTypeIdArr(["3Dcs", "swmx"]);
|
_GLOBAL.layers[result.id] = [];
|
children.forEach((item) => {
|
let itemLayer = loadLayer(item);
|
_GLOBAL.layers[result.id].push(itemLayer);
|
console.log(_GLOBAL.layers[result.id]);
|
});
|
}
|
},
|
// 专题图选择
|
handleAreaClick(result, index) {
|
const val = layers.filter((res) => {
|
if (res.name == result.name) {
|
return res;
|
}
|
});
|
const children = val[0].children;
|
if (this.curAreaTypeIndex == index) {
|
this.curAreaTypeIndex = -1;
|
let _data = sgworld.ProjectTree.getObject(children[0].id);
|
if (_data) {
|
sgworld.ProjectTree.setVisibility(children[0].id, false);
|
}
|
// clearLayerByTypeIdArr(['GuiHuaFanWeiShiYiTu', 'XingZhengQuHuaTu', 'GuiHuaDanYuanHuaFenTu', 'ZhuYaoGongNengQuGuiHuaShiYiTu']);
|
store.setThematicLayerItemId("");
|
} else {
|
this.curAreaTypeIndex = index;
|
//清除
|
//clearLayerByTypeIdArr(['GuiHuaFanWeiShiYiTu', 'XingZhengQuHuaTu', 'GuiHuaDanYuanHuaFenTu', 'ZhuYaoGongNengQuGuiHuaShiYiTu']);
|
let arr = [
|
"GuiHuaFanWeiShiYiTu",
|
"XingZhengQuHuaTu",
|
"GuiHuaDanYuanHuaFenTu",
|
"ZhuYaoGongNengQuGuiHuaShiYiTu",
|
];
|
arr.forEach((item) => {
|
sgworld.ProjectTree.getObject(item) &&
|
sgworld.ProjectTree.setVisibility(item, false);
|
});
|
let dataObj = sgworld.ProjectTree.getObject(result.id);
|
if (dataObj) {
|
sgworld.ProjectTree.setVisibility(result.id, true);
|
} else {
|
_GLOBAL.layers[result.id] = [];
|
children.forEach((item) => {
|
let itemLayer = loadLayer(item);
|
_GLOBAL.layers[result.id].push(itemLayer);
|
console.log(_GLOBAL.layers[result.id]);
|
});
|
}
|
store.setThematicLayerItemId(result.id);
|
}
|
},
|
// 窨井加载
|
handleYJClick(index) {
|
if (this.curYjIndex == index) {
|
this.curYjIndex = -1;
|
window.clusterLayer && window.clusterLayer.clear();
|
} else {
|
this.curYjIndex = index;
|
switch (index) {
|
case 0:
|
loadManhole();
|
break;
|
case 1:
|
loadCamera();
|
break;
|
case 2:
|
loadEnterprise();
|
break;
|
}
|
}
|
},
|
// 第二行 专题图 点击
|
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:4326",
|
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);
|
store.setHistoryShow(true);
|
break;
|
}
|
}
|
},
|
showLayerTree() {
|
store.setLayerTreeShow(true);
|
},
|
},
|
watch: {
|
"state.itemId": {
|
handler: function (newVal, oldVal) {
|
let that = this;
|
if (newVal == "") {
|
this.curAreaTypeIndex = -1;
|
} else {
|
let index = -1;
|
if (newVal == "GuiHuaFanWeiShiYiTu") {
|
index = 0;
|
} else if (newVal == "XingZhengQuHuaTu") {
|
index = 1;
|
} else if (newVal == "GuiHuaDanYuanHuaFenTu") {
|
index = 2;
|
} else if (newVal == "ZhuYaoGongNengQuGuiHuaShiYiTu") {
|
index = 3;
|
}
|
this.curAreaTypeIndex = index;
|
}
|
},
|
},
|
// 基础图层
|
"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%;
|
position: absolute;
|
bottom: 0px;
|
align-items: center;
|
padding: 0.1rem;
|
background: white;
|
z-index: 1000;
|
padding-left: 0.25rem;
|
}
|
|
.title {
|
height: 25px;
|
font-size: 16px;
|
font-family: Source Han Sans SC;
|
font-weight: 700;
|
color: #181818;
|
line-height: 25px;
|
margin: 10px 0px 10px 0;
|
}
|
|
.title2 {
|
height: 15px;
|
}
|
|
.container {
|
display: flex;
|
align-items: center;
|
text-align: center;
|
}
|
|
.layerItem {
|
/* font-size: 14px; */
|
font-family: Source Han Sans SC;
|
font-weight: 400;
|
margin-right: 30px;
|
cursor: pointer;
|
}
|
|
.active {
|
color: #4187ff;
|
border: 2px solid #4187ff;
|
border-radius: 10px;
|
}
|
|
.spanActive {
|
color: #4187ff;
|
}
|
|
img {
|
display: block;
|
width: 60px;
|
height: 40px;
|
margin-bottom: 5px;
|
}
|
|
.more {
|
float: right;
|
margin-right: 20px;
|
font-size: 0.12rem;
|
color: #4187ff;
|
line-height: 25px;
|
font-weight: 500;
|
font-family: unset;
|
cursor: pointer;
|
}
|
</style>
|
