<template>
|
<div class="panel">
|
<!-- openlayer -->
|
<div id="openlayerContainer" @click="clicktoclose"></div>
|
|
<!-- 页面标题 -->
|
<!-- <div class="titleBg">
|
<img src="@/assets/img/title/title.png" />
|
</div> -->
|
<!-- 历史影像 -->
|
<my-history v-if="state.show"></my-history>
|
<!-- 历史影像关闭按钮 -->
|
<!-- <div class="colseBtn" v-if="state.show" @click="closeHistory(false)">
|
<img class="searchBtn" src="@/assets/closeinput1.png" />
|
</div> -->
|
<!-- 右侧导航框 -->
|
<my-navigation-bar></my-navigation-bar>
|
<!-- 搜索框 -->
|
<my-sousuo v-if="!state.show" v-show="childrendata.ssval"></my-sousuo>
|
<!-- 右上快捷区域（工程树、空间分析） -->
|
<!-- <div class="right-top">
|
<my-layertree :rightshowzy="childrendata"></my-layertree>
|
</div> -->
|
<!-- 原左下菜单 -->
|
<!-- <my-menu v-on:getshowsta="datafromchild" ref="menu"></my-menu> -->
|
<!-- 左下快捷区域（复位、指北等） -->
|
<!-- <my-left-bottom :test="childrendata"></my-left-bottom> -->
|
<!-- 右下快捷区域（放大缩小） -->
|
<my-right-bottom :test="childrendata"></my-right-bottom>
|
|
<!-- 各种面板 -->
|
<!-- 设置面板 -->
|
<my-setting-panel></my-setting-panel>
|
<!-- 位置面板 -->
|
<my-collection-panel></my-collection-panel>
|
<!-- 指北针面板 -->
|
<!-- <my-direction-panel></my-direction-panel> -->
|
<!-- 新增收藏面板 -->
|
<my-add-collection-panel></my-add-collection-panel>
|
<!-- 窨井、摄像头统计面板 -->
|
<my-statistics-panel></my-statistics-panel>
|
<!-- 窨井统计分析面板 -->
|
<my-manhole-panel></my-manhole-panel>
|
<!-- 摄像头统计分析面板 -->
|
<my-video-panel></my-video-panel>
|
<!-- 图层面板 -->
|
<my-layer-panel></my-layer-panel>
|
<!-- 漫游面板 -->
|
<my-roam-panel></my-roam-panel>
|
<!-- 图层树面板 -->
|
<my-layer-tree-panel></my-layer-tree-panel>
|
<!-- 土地管理弹窗 -->
|
<my-land-admin-info></my-land-admin-info>
|
<my-slider></my-slider>
|
<my-poplayer></my-poplayer>
|
</div>
|
</template>
|
<script>
|
import store from "@/utils/store2.js";
|
import { setClick, leftClick, touchClick } from "@/utils/map2.js";
|
import _GLOBAL from "@/assets/GLOBAL2";
|
// import { leftClick, loadLayer } from "@/utils/map.js";
|
import leftBottom from "@/components/leftMenu/bottom2.vue";
|
import rightBottom from "@/components/rightMenu/bottom2.vue";
|
import sousuo from "@/components/leftMenu/sousuo2.vue";
|
import menu from "@/components/menu/menu.vue";
|
import NavigationBar from "./rightNavigation/NavigationBar2.vue";
|
import layertree from "@/components/rightMenu/layerTree2.vue";
|
import settingPanel from "./sideMenu/settingMenu/main.vue";
|
import collectionPanel from "./sideMenu/collectionMenu/main2.vue";
|
import directionPanel from "./sideMenu/directionMenu/main.vue";
|
import addCollectionPanel from "./sideMenu/addCollectionMenu/main2.vue";
|
import statisticsPanel from "./sideMenu/statisticsMenu/main.vue";
|
import manholePanel from "./sideMenu/manholeStatistics/main.vue";
|
import videoPanel from "./sideMenu/videoStatistics/main.vue";
|
import layerPanel from "./sideMenu/layerMenu/main2.vue";
|
import roamPanel from "./sideMenu/roamPanel/main.vue";
|
import layerTreePanel from "./sideMenu/layerTreePanel/main2.vue";
|
import history from "./poplayer/history2.vue";
|
import landAdminInfo from "./poplayer/landAdmin2.vue";
|
import mainPoplayer from "./poplayer/poplayer2.vue";
|
import sliderAlpha from "./sideMenu/sliderAlpha/main2.vue";
|
import Axios from "axios";
|
import {
|
addImageLayer,
|
addAnnotationLayer,
|
addHxLayer,
|
addYzLayer,
|
loadBaseMap,
|
loadGeoMap,
|
listenDirection,
|
getCurrentPosition,
|
} from "@/utils/tool";
|
// import Map from "ol/Map.js";
|
// import TileLayer from "ol/layer/Tile.js";
|
// import View from "ol/View.js";
|
// import { get as getProjection, getTransform } from "ol/proj";
|
// import { getWidth, getTopLeft, applyTransform } from "ol/extent";
|
// import WMTS from "ol/source/WMTS";
|
// import WMTSTileGrid from "ol/tilegrid/WMTS";
|
// import XYZ from "ol/source/XYZ";
|
// import {createXYZ} from "ol/tilegrid";
|
|
export default {
|
name: "viewer2",
|
components: {
|
"my-sousuo": sousuo,
|
"my-left-bottom": leftBottom,
|
"my-right-bottom": rightBottom,
|
"my-menu": menu,
|
"my-layertree": layertree,
|
"my-navigation-bar": NavigationBar,
|
"my-setting-panel": settingPanel,
|
"my-collection-panel": collectionPanel,
|
"my-direction-panel": directionPanel,
|
"my-add-collection-panel": addCollectionPanel,
|
"my-statistics-panel": statisticsPanel,
|
"my-manhole-panel": manholePanel,
|
"my-video-panel": videoPanel,
|
"my-layer-panel": layerPanel,
|
"my-roam-panel": roamPanel,
|
"my-layer-tree-panel": layerTreePanel,
|
"my-history": history,
|
"my-land-admin-info": landAdminInfo,
|
"my-slider": sliderAlpha,
|
"my-poplayer": mainPoplayer,
|
},
|
data() {
|
return {
|
date: "",
|
parentItem: {},
|
childrendata: {
|
fwval: true,
|
zbzval: false,
|
qpval: false,
|
zymlval: false,
|
zymlmenu: false,
|
kjcxval: false,
|
dxmsval: false,
|
snmsval: false,
|
ssval: true,
|
zoomval: true,
|
},
|
timer: null,
|
count: 0,
|
state: store.history,
|
};
|
},
|
created() {},
|
mounted() {
|
this.$nextTick(function () {
|
ol.Map.prototype.getLayerByName = function (name) {
|
var layer;
|
this.getLayers().array_.forEach(function (lyr) {
|
if (name == lyr.values_.name) {
|
layer = lyr;
|
}
|
});
|
return layer;
|
};
|
|
const layers = [];
|
|
const TDTKey = "f234b950740b8c2e0d9959a51c169d21";
|
const tiandituUrl = "http://t0.tianditu.gov.cn";
|
let options = { proj: "EPSG:3857", layer: "img", matrixSets: "c" };
|
let _proj = options.proj;
|
let _layer = options.layer;
|
let _key = TDTKey;
|
let _matrixSets = options.matrixSets;
|
|
let projection = ol.proj.get(_proj);
|
let projectionExtent = projection.getExtent();
|
let origin = projectionExtent
|
? ol.extent.getTopLeft(projectionExtent)
|
: [-180, 90];
|
let fromLonLat = ol.proj.getTransform("EPSG:3857", projection);
|
let width = projectionExtent
|
? ol.extent.getWidth(projectionExtent)
|
: ol.extent.getWidth(
|
ol.extent.applyTransform([-180.0, -90.0, 180.0, 90.0], fromLonLat)
|
);
|
|
let resolutions = [];
|
let matrixIds = [];
|
for (let z = 1; z < 19; z++) {
|
resolutions[z] = width / (256 * Math.pow(2, z));
|
matrixIds[z] = z;
|
}
|
let wmtsTileGrid = new ol.tilegrid.WMTS({
|
origin: origin,
|
resolutions: resolutions,
|
matrixIds: matrixIds,
|
});
|
console.log(
|
"url:",
|
`${tiandituUrl}/${_layer}_${_matrixSets}/wmts?tk=${_key}`
|
);
|
let wmtsSource = new ol.source.WMTS({
|
url: `${tiandituUrl}/${_layer}_${_matrixSets}/wmts?tk=${_key}`,
|
layer: _layer,
|
version: "1.0.0",
|
matrixSet: _matrixSets,
|
format: "tiles",
|
projection: projection,
|
requestEncoding: "KVP",
|
style: "default",
|
tileGrid: wmtsTileGrid,
|
});
|
let wmtsLayer = new ol.layer.Tile({
|
name: "影像地图",
|
id: _layer + "_" + _matrixSets,
|
source: wmtsSource,
|
});
|
|
let wmtsSource1 = new ol.source.WMTS({
|
url: `${tiandituUrl}/cia_${_matrixSets}/wmts?tk=${_key}`,
|
layer: "cia",
|
version: "1.0.0",
|
matrixSet: _matrixSets,
|
format: "tiles",
|
projection: projection,
|
requestEncoding: "KVP",
|
style: "default",
|
tileGrid: wmtsTileGrid,
|
});
|
let wmtsLayer1 = new ol.layer.Tile({
|
name: "路网图层",
|
id: "cia_c",
|
source: wmtsSource1,
|
});
|
|
let wmtsSource2 = new ol.source.WMTS({
|
url: `${tiandituUrl}/vec_c/wmts?tk=${_key}`,
|
layer: "vec",
|
version: "1.0.0",
|
matrixSet: _matrixSets,
|
format: "tiles",
|
projection: projection,
|
requestEncoding: "KVP",
|
style: "default",
|
tileGrid: wmtsTileGrid,
|
});
|
let wmtsLayer2 = new ol.layer.Tile({
|
name: "二维地图",
|
id: "cva_c",
|
source: wmtsSource2,
|
});
|
// wmtsLayer2.setVisible(false);
|
////二维地图
|
// layers.push(wmtsLayer2);
|
////卫星影像
|
// layers.push(wmtsLayer);
|
////路网
|
// layers.push(wmtsLayer1);
|
|
const map = new ol.Map({
|
layers: layers,
|
target: "openlayerContainer",
|
view: new ol.View({
|
center: ol.proj.fromLonLat([116.505348, 39.795592]),
|
projection: "EPSG:3857",
|
zoom: 11.5,
|
minZoom: 7,
|
maxZoom: 19.5,
|
enableRotation: false,
|
// constrainResolution: true,
|
smoothResolutionConstraint: false,
|
}),
|
});
|
|
window.mapapi = map;
|
window.layersArray = window.mapapi.getLayers();
|
// addImageLayer();
|
// addAnnotationLayer();
|
window.mapapi.getView().setZoom(14);
|
loadGeoMap();
|
// loadBaseMap();
|
addHxLayer();
|
addYzLayer();
|
|
setClick(true);
|
touchClick();
|
|
getCurrentPosition();
|
listenDirection();
|
// leftClick()
|
|
window.layerOpen = function (name, options) {
|
layuiLayer.close(SmartEarthPopupData.layerProp);
|
|
var width = options.width;
|
var height = options.height;
|
var offset = options.offset;
|
var fn = options.fn || {};
|
|
//获取相关回调事件
|
var cancelFn = null;
|
var successFn = null;
|
var endFn = null;
|
for (var key in fn) {
|
cancelFn = key == "cancel" ? fn[key] : cancelFn;
|
successFn = key == "success" ? fn[key] : successFn;
|
endFn = key == "end" ? fn[key] : endFn;
|
}
|
|
SmartEarthPopupData.layerProp = layuiLayer.open({
|
title: name,
|
skin: "title-class",
|
// title:false,
|
type: 2, //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
|
// shade: options.shade !== undefined ? options.shade : 0.3,
|
shade: 0,
|
shadeClose: false,
|
closeBtn: 1,
|
resize: false,
|
offset: offset,
|
area: [
|
typeof width === "number" ? width + "px" : width,
|
// "100%",
|
typeof height === "number" ? height + "px" : height,
|
],
|
content: options.url,
|
success: function (layero, index) {
|
if (successFn && typeof successFn === "function") {
|
successFn(layero, index);
|
}
|
},
|
cancel: function () {
|
if (cancelFn && typeof cancelFn === "function") {
|
cancelFn();
|
}
|
},
|
end: function () {
|
if (endFn && typeof endFn === "function") {
|
endFn();
|
}
|
},
|
});
|
};
|
});
|
},
|
methods: {
|
clicktoclose() {
|
// clearTimeout(this.timer);
|
// this.timer = setTimeout(() => {
|
// this.count++;
|
// if (this.count == 2) {
|
// // console.log("单击事件");
|
// // 关闭所有弹窗
|
// //this.$refs.menu.closeall();
|
// // 清除定位中的位置标记
|
// //this.$refs.menu.clearFlyPoint();
|
// } else {
|
// // 执行放大操作
|
// // console.log("双击");
|
// // Viewer.camera.zoomIn();
|
// // console.log(window.clickPOI);
|
// // let p = sgworld.Navigate.getDegrees();
|
// // console.log(p);
|
// // Viewer.camera.flyTo({
|
// // destination: Cesium.Cartesian3.fromDegrees(
|
// // window.clickPOI.lon,
|
// // window.clickPOI.lat,
|
// // p.height / 1.8
|
// // ),
|
// // duration: 1.0,
|
// // });
|
// }
|
// this.count = 0;
|
// }, 300);
|
// this.count++;
|
},
|
datafromchild(data) {
|
for (var i in data) {
|
this.childrendata[i] = data[i];
|
}
|
},
|
closeHistory(val) {
|
store.setHistoryShow(val);
|
},
|
showBottom() {
|
let handler3D = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
|
handler3D.setInputAction((wheelment) => {
|
// 滚动滚轴，得到当前的视点高度
|
// 单位换算，当大于1000米的时候显示“千米”，小于1000米的时候显示单位为“米”
|
var cHeightM = Viewer.camera.positionCartographic.height;
|
var cHeightKm = (cHeightM / 1000).toFixed(0);
|
// 当cHeight的值改变时，赋值给window中的sdHeight
|
window.sdHeight = this.cHeight;
|
|
//当滑动的距离小于2km，取消聚合
|
// if (window.dataClustering && window.dataClustering.enabled) {
|
if (parseFloat(cHeightKm) < 2) {
|
window.dataClustering && (window.dataClustering.enabled = false);
|
} else {
|
window.dataClustering && (window.dataClustering.enabled = true);
|
}
|
}, Cesium.ScreenSpaceEventType.WHEEL);
|
},
|
getQYInfo() {
|
console.log(window.gisBaseUrl);
|
Axios.get(
|
window.gisBaseUrl +
|
"/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=企业链企业"
|
).then((res) => {
|
console.log(res);
|
});
|
},
|
},
|
};
|
</script>
|
<style scoped>
|
.panel,
|
#openlayerContainer {
|
width: 100%;
|
height: 100%;
|
background: black;
|
/* position: absolute !important; */
|
z-index: 0;
|
}
|
|
.titleBg {
|
position: absolute;
|
left: 0rem;
|
top: 0rem;
|
width: 100%;
|
height: 0.43rem;
|
background-color: #127eff;
|
text-align: center;
|
/* background-image: url("~@/assets/img/title/u2.png") !important;
|
background-repeat: no-repeat;
|
background-size: 100% 100% !important; */
|
}
|
|
.titleBg img {
|
width: 207px;
|
margin-top: 5px;
|
}
|
|
.bottomLeft {
|
display: none;
|
}
|
|
.colseBtn {
|
position: absolute;
|
z-index: 2;
|
top: 0.55rem;
|
left: 0.2rem;
|
}
|
|
.colseBtn img {
|
width: 30px;
|
}
|
</style>
|
