<template>
|
<div class="panel">
|
<!-- openlayer -->
|
<div id="openlayerContainer" @click="clicktoclose"></div>
|
|
<div id="ponitPanel">
|
<div id="ponitPanel-close" @click.stop="closehandle"></div>
|
<div class="title">点位详情</div>
|
<div id="ponitPanel-content">
|
|
</div>
|
|
</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 } 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/history.vue";
|
import landAdminInfo from "./poplayer/landAdmin.vue";
|
import poplayer from "./poplayer/main2.vue";
|
import sliderAlpha from "./sideMenu/sliderAlpha/main.vue";
|
import Axios from "axios";
|
|
// 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": poplayer
|
},
|
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 () {
|
console.log("openlayer init");
|
|
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:4326", 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:4326", 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(wmtsLayer);
|
////二维地图
|
layers.push(wmtsLayer2);
|
////路网
|
layers.push(wmtsLayer1);
|
|
const map = new ol.Map({
|
layers: layers,
|
target: "openlayerContainer",
|
view: new ol.View({
|
center: [116.505348, 39.795592],
|
projection: "EPSG:4326",
|
zoom: 12,
|
}),
|
});
|
|
window.map = map;
|
setClick(true)
|
// var url =
|
// "https://skyzt.bda.gov.cn/gisserver/tmsserver/chengshiguihua_dikuaibianhao_tms/";
|
|
// var tmslayer = new ol.layer.Tile({
|
// source: new ol.source.XYZ({
|
// projection: projection,
|
// tileGrid: ol.tilegrid.createXYZ({
|
// extent: [50.731, -90, 180, 70.0478],
|
// }),
|
// tileUrlFunction: function (tileCoord, pixelRatio, proj) {
|
// // return url + (tileCoord[0] - 1) + '/' + tileCoord[1] + '/' + (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + '.jpeg';
|
// return (
|
// url +
|
// (tileCoord[0] - 1) +
|
// "/" +
|
// tileCoord[1] +
|
// "/" +
|
// (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) +
|
// ".jpeg"
|
// );
|
// },
|
// }),
|
// });
|
// window.map.addLayer(tmslayer);
|
|
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;
|
}
|
|
#ponitPanel {
|
/* display: none; */
|
width: 80vw;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url("./poplayer/img/bg.png");
|
z-index: 999;
|
color: #fff;
|
font-family: SourceHanSansSC-R;
|
padding: 10px 5px 10px 5px;
|
font-size: 16px;
|
pointer-events: all;
|
}
|
|
.title {
|
width: 100%;
|
text-align: center;
|
font-size: 20px;
|
font-weight: 700;
|
letter-spacing: 4px;
|
padding-left: 26px;
|
}
|
|
|
#ponitPanel-close {
|
pointer-events: all;
|
width: 28px;
|
height: 28px;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url("./poplayer/img/close.png");
|
margin-top: 8px;
|
margin-right: 5px;
|
float: right;
|
cursor: pointer;
|
}
|
|
#ponitPanel-content {
|
width: 100%;
|
margin: auto;
|
}
|
|
.ponitPanel-item {
|
width: 90%;
|
overflow: hidden;
|
margin-bottom: 7px;
|
margin-left: 25px;
|
margin-right: 20px;
|
word-break: break-all;
|
}
|
|
.ponitPanel-name {
|
/* min-width: 100px; */
|
float: left;
|
}
|
|
.ponitPanel-value {
|
max-width: 400px;
|
float: left;
|
color: aqua;
|
}
|
</style>
|
