<template>
|
<div class="panel">
|
<!-- openlayer -->
|
<div id="openlayerContainer" @click="clicktoclose"></div>
|
</div>
|
</template>
|
<script>
|
import store from "@/utils/store2.js";
|
|
import _GLOBAL from "@/assets/GLOBAL2";
|
|
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: {},
|
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 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;
|
|
var 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)
|
);
|
|
var resolutions = [];
|
var 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);
|
////卫星影像
|
var layers = [];
|
layers.push(wmtsLayer);
|
////二维地图
|
layers.push(wmtsLayer2);
|
////路网
|
layers.push(wmtsLayer1);
|
|
const map = new ol.Map({
|
target: "openlayerContainer",
|
view: new ol.View({
|
center: [116.505348, 39.795592],
|
projection: "EPSG:4326",
|
zoom: 12,
|
}),
|
layers: [wmtsLayer, wmtsLayer1],
|
// layers: [wmtsLayer]
|
// layers: [tmslayer]
|
});
|
|
var url =
|
"https://skyzt.bda.gov.cn/gisserver/tmsserver/chengshiguihua_dikuaibianhao_tms/";
|
|
var tmslayer = new ol.layer.Tile({
|
source: new ol.source.XYZ({
|
projection: "EPSG:4326",
|
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"
|
);
|
},
|
}),
|
});
|
map.addLayer(tmslayer);
|
|
// var url =
|
// "https://skyzt.bda.gov.cn/gisserver/tmsserver/chengshiguihua_dikuaibianhao_tms/";
|
|
// var tmslayer = new ol.layer.Tile({
|
// source: new ol.source.XYZ({
|
// projection: "EPSG:4326",
|
// 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"
|
// );
|
// },
|
// }),
|
// });
|
// 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;
|
}
|
|
.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>
|
