Skip to content

F
founder_vue
Commit 7780aba7 by liupeng
Options

Merge branch 'pgis_data' of http://47.92.108.28/changchao/founder_vue into pgis_data

parents 2d03a50e 51eee0f6
Showing with 180 additions and 21 deletions
src/main.js
/*
* @Author: LMM
* @Date: 2021-08-06 16:05:33
* @LastEditTime: 2021-08-25 18:17:46
* @LastEditTime: 2021-08-27 17:27:23
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\main.js
......
src/utils/map.js
/*
* @Author: your name
* @Date: 2021-08-11 14:55:07
* @LastEditTime: 2021-08-26 09:45:59
* @LastEditTime: 2021-08-27 17:33:26
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\utils\map.js
......@@ -137,6 +137,12 @@ function remove_2dLayer() {
_2dlayer = null;
}
}
export function addEzMapLayer(url, layername) {
remove_2dLayer();
_2dlayer = new Ez.TileLayer.EzMap2010(layername, url, { sid: true });
window.map.addLayer(_2dlayer);
}
export function addWMTSLayer(url, layername) {
remove_2dLayer();
let opt;
......@@ -181,6 +187,7 @@ function remove_3DTileset() {
export function add3DTileset(url) {
// url = "http://47.92.249.229:8080/3dtiles/SL_JZWMX/tileset.json";
remove_3DTileset();
url = "http://172.18.71.226:8083/data/sjcsdata/lzjzw3dtiles/tileset.json";
if (url instanceof Array) {
_3DTileset = [];
url.forEach((item) => {
......@@ -211,3 +218,63 @@ export function changeViewerCenter(center) {
},
});
}
// 三维地图添加图层
let _temp3DLayer = [];
export function removeImageryLayer() {
if (_temp3DLayer && _temp3DLayer.length > 0) {
_temp3DLayer.forEach((layer) => {
window.viewer.imageryLayers.remove(layer);
});
_temp3DLayer = [];
}
}
export function addImageryLayer(layerObj) {
removeImageryLayer();
if (!layerObj) {
return;
}
if (layerObj instanceof Array) {
layerObj.forEach((obj) => {
let layer = add3DLayer(obj);
_temp3DLayer.push(layer);
});
} else {
let layer = add3DLayer(layerObj);
_temp3DLayer.push(layer);
}
}
function add3DLayer(obj) {
let tempLayer = null;
if (!obj.url) {
console.log("加载失败");
}
let tempObj = {
tilingScheme: new Cesium.GeographicTilingScheme(),
tileMatrixLabels: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
],
};
Object.assign(tempObj, obj);
let imgLayer = new Cesium.WebMapTileServiceImageryProvider(tempObj);
tempLayer = window.viewer.imageryLayers.addImageryProvider(imgLayer);
return tempLayer;
}
src/views/Home.vue
<!--
* @Author: LMM
* @Date: 2021-08-06 16:05:33
* @LastEditTime: 2021-08-26 10:51:52
* @LastEditTime: 2021-08-27 17:57:57
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\views\Home.vue
......@@ -9,7 +9,7 @@
<template>
<div class="home">
<titleBlk></titleBlk>
<mapToolBlk></mapToolBlk>
<mapToolBlk v-show="!is3D"></mapToolBlk>
<saveBoxBlk
v-if="isShowSaveBox"
v-on:close="isShowSaveBox = false"
......@@ -19,6 +19,15 @@
<searchBox></searchBox>
<layerArrayBox v-on:changeMap="changeMap"></layerArrayBox>
<homePageRightButton @click="changeDetailLayer"></homePageRightButton>
<layerArrayBox v-show="isShowArrayBox" v-on:changeMap="changeMap"></layerArrayBox>
<div
:style="{
backgroundImage: 'url(' + require('../assets/img/hideBtn.png') + ')',
left: isShowArrayBox ? '340px' : '10px',
}"
class="hideBtn"
@click="isShowArrayBox = !isShowArrayBox"
></div>
</div>
</template>
......@@ -50,6 +59,7 @@ export default {
is3D: this.$root.isShow3D,
isShowSaveBox: false,
showDetail:false,
isShowArrayBox: true,
};
},
computed: {
......@@ -81,4 +91,15 @@ export default {
},
};
</script>
<style lang="scss"></style>
<style lang="scss">
.hideBtn {
background-size: 100% 100%;
position: absolute;
top: calc(50% - 100px);
width: 38px;
height: 233px;
}
.hideBtn:hover {
background-image: url(../assets/img/hideBtn_h.png) !important;
}
</style>
src/views/block/layerArrayBox.vue
<!--
* @Author: your name
* @Date: 2021-08-23 11:12:35
* @LastEditTime: 2021-08-25 18:33:17
* @LastEditTime: 2021-08-27 17:29:02
* @LastEditors: Please set LastEditors
* @Description: 左侧图层组界面
* @FilePath: \founder_vue\src\views\block\layerArrayBox.vue
......@@ -41,6 +41,8 @@ import {
changeMapCenter,
add3DTileset,
changeViewerCenter,
addImageryLayer,
addEzMapLayer,
} from "../../utils/map";
export default {
name: "layerArrayBox",
......@@ -65,9 +67,13 @@ export default {
}
if (this.$root.isShow3D) {
this.$root.isShow3D = false;
this.$emit("changeMap")
this.$emit("changeMap");
}
if (curType.type && curType.type === "ezMap") {
addEzMapLayer(curType.url, curType.serviceName);
} else {
addWMTSLayer(curType.url, curType.serviceName);
}
addWMTSLayer(curType.url, curType.serviceName);
changeMapCenter(curType.center, curType.zoom);
},
......@@ -80,9 +86,13 @@ export default {
}
if (this.$root.isShow3D) {
this.$root.isShow3D = false;
this.$emit("changeMap")
this.$emit("changeMap");
}
if (curType.type && curType.type === "ezMap") {
addEzMapLayer(curType.url, curType.serviceName);
} else {
addWMTSLayer(curType.url, curType.serviceName);
}
addWMTSLayer(curType.url, curType.serviceName);
changeMapCenter(curType.center, curType.zoom);
},
electronicMapSelected(e) {
......@@ -94,9 +104,13 @@ export default {
}
if (this.$root.isShow3D) {
this.$root.isShow3D = false;
this.$emit("changeMap")
this.$emit("changeMap");
}
addWMTSLayer(curType.url, curType.serviceName);
if (curType.type && curType.type === "ezMap") {
addEzMapLayer(curType.url, curType.serviceName);
} else {
addWMTSLayer(curType.url, curType.serviceName);
}
changeMapCenter(curType.center, curType.zoom);
},
threeDModelSelected(e) {
......@@ -108,8 +122,9 @@ export default {
}
if (!this.$root.isShow3D) {
this.$root.isShow3D = true;
this.$emit("changeMap")
this.$emit("changeMap");
}
addImageryLayer(curType.imgLayer);
add3DTileset(curType.url);
changeViewerCenter(curType.center);
},
......
src/views/map/3DMap.vue
<!--
* @Author: LMM
* @Date: 2021-08-09 14:57:49
* @LastEditTime: 2021-08-25 15:49:41
* @LastEditTime: 2021-08-27 16:26:35
* @LastEditors: Please set LastEditors
* @Description: 三维地图
* @FilePath: \founder_vue\src\views\map\3Dview.vue
-->
<template>
<div id="map3dDiv" v-bind:style="{ height: heightWindow, width: '100%' }"></div>
<div
id="map3dDiv"
v-bind:style="{ height: heightWindow, width: '100%' }"
></div>
</template>
<script>
export default {
......@@ -23,15 +26,69 @@ export default {
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjZWQ4OGUyMS0zMzQ4LTQ1ZjAtOTcyMC1kZjE3NWZjMzkzMzMiLCJpZCI6MTI5ODUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjIyODk1NTN9.5BF7xVHVIo2AcorTcH3cIs8hT2ZEbhwPe_uVeWYInF0";
let ezGlobe = new Ez.cesium3d.Globe({
id: "map3dDiv",
id: "map3dDiv",
MapServer: this.baseLayerUrl,
});
// ezGlobe.viewer.scene.terrainProvider = new Cesium.CesiumTerrainProvider({
// url: window.config.mapUrl.terrainProvider,
// }); //地形
window.viewer = ezGlobe.viewer;
window.pageConfig._3DBaseUrl.forEach((baseUrl) => {
let tempObj = {
tilingScheme: new Cesium.GeographicTilingScheme(),
tileMatrixLabels: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
],
};
Object.assign(tempObj,baseUrl)
let imgLayer = new Cesium.WebMapTileServiceImageryProvider(tempObj);
window.viewer.imageryLayers.addImageryProvider(imgLayer);
});
window.viewer.scene.globe.depthTestAgainstTerrain = true;
this.flyHome();
var tileset6 = new Cesium.Cesium3DTileset({ url: "http://172.18.71.226:8083/data/sjcsdata/lzjzw3dtiles/tileset.json" });
window.viewer.scene.primitives.add(tileset6);
window.viewer.scene.camera.flyTo({
destination:Cesium.Cartesian3.fromDegrees(103.846,36.05,500),
orientation : {
heading : Cesium.Math.toRadians(0.0),
pitch : Cesium.Math.toRadians(-40.0),
roll : 0.0
}
});
tileset6.readyPromise.then(function(tileset) {            
            var heightOffset = 37.1;  //高度
            var boundingSphere = tileset.boundingSphere; 
            var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
            var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
            var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
            var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
            tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
          
         })
// this.flyHome();
},
flyHome() {
window.viewer.scene.camera.flyTo({
......@@ -49,7 +106,7 @@ export default {
},
},
mounted() {
const that=this;
const that = this;
window.onresize = () => {
return (() => {
that.heightWindow = window.innerHeight - 1 + "px";
......@@ -59,9 +116,8 @@ export default {
},
};
</script>
<style >
#map3dDiv {
<style>
#map3dDiv {
display: inline-block;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment