Skip to content

蒋波涛 / super_globe_vue

Go to a project
Toggle navigation
Toggle navigation pinning
8f2cd684 by chiangbt
Options

20191205

1 parent 736da9bf
Inline Side-by-side
Showing 5 changed files with 214 additions and 46 deletions
......@@ -22,7 +22,7 @@ SuperGlobeVue是基于vue-cli3和supermap cesium 的一款Globe地球视图。
## 2、设置
### 项目依赖库安装
```
npm install
npm install --registry https://registry.npm.taobao.org
```
### 代码编译及热启动
......
......@@ -45,7 +45,6 @@
<script>
import URL_CONFIG from "./../config/urlConfig.vue";
// import CesiumNavigation from "cesium-navigation-es6";
const Cesium = window.Cesium;
export default {
data: function() {
......
......@@ -28,6 +28,14 @@
<div class="circle4"></div>
</div>
</div>
<!-- 气泡HTML -->
<div id="bubble" class="bubble" style="bottom:0;left:82%;display:none;" >
<div id="tools" style="text-align : right; padding-bottom: 5px;">
<span style="color: rgb(95, 74, 121);padding: 5px;position: absolute;left: 10px;top: 4px;">对象属性</span>
<span class="fui-cross" title="关闭" id="close" style="color: darkgrey;padding:5px"></span>
</div>
<div style="overflow-y:scroll;height:150px" id="tableContainer"><table id="tab"></table></div>
</div>
</div>
</template>
......@@ -45,45 +53,57 @@ export default {
left: "0px",
backgroundColor: "#000000"
},
smviewer: {}
viewer: {}
};
},
mounted: function() {
this.viewer = new Cesium.Viewer("cesiumContainer", {});
this.viewer.scene.globe.depthTestAgainstTerrain = true;
// 使用自定义的navigation
var options = {};
options.enableCompass= true;
options.enableZoomControls= true;
options.enableDistanceLegend= true;
options.enableCompassOuterRing= true;
this.viewer.extend(Cesium.viewerCesiumNavigationMixin, options);
// 隐藏logo
$(".cesium-widget-credits")[0].style.visibility = "hidden";
// 隐藏导航工具
// $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
// 添加OSM地图
let osm = Cesium.createOpenStreetMapImageryProvider({
url: "https://tile-a.openstreetmap.fr/hot",
fileExtension:"png"
$(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
// 添加天地图地图
this.viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
mapStyle : Cesium.TiandituMapsStyle.IMG_C,
token: URL_CONFIG.TOKEN_TIANDITU
}));
var imageryLayers = this.viewer.imageryLayers;
//初始化天地图全球中文注记服务，并添加至影像图层
var labelImagery = new Cesium.TiandituImageryProvider({
mapStyle : Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务（经纬度投影）
token: URL_CONFIG.TOKEN_TIANDITU
});
this.viewer.imageryLayers.addImageryProvider(osm);
imageryLayers.addImageryProvider(labelImagery);
var scene = this.viewer.scene;
var widget = this.viewer.cesiumWidget;
var camera = scene.camera;
var smviewer = this.viewer;
// 场景位置，用于popup定位
var scenePosition = null;
try {
// 添加倾斜摄影模型图层
var promise = scene.addS3MTilesLayerByScp('http://localhost:8090/iserver/services/3D-wz_qidu_qx1/rest/realspace/datas/%E4%B8%83%E9%83%BD_%E5%80%BE%E6%96%9C/config');
Cesium.when(promise, function(layer) {
layer.setQueryParameter({
url: 'http://localhost:8090/iserver/services/data-wz_qidu_qx1/rest/data',
dataSourceName: 'qidu',
dataSetName: 'New_Region'
});
scene.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(120.7630995515332, 28.006422239411936, 100.0),
var promise2 = scene.addS3MTilesLayerByScp("http://localhost:8090/iserver/services/3D-wz_qidu_qx1/rest/realspace/datas/%E4%B8%83%E9%83%BD_%E5%80%BE%E6%96%9C/config",
{ name: "oblique photography" });
Cesium.when.all([promise2], function(obliqueLayers){ // 等倾斜摄影数据加载完了再去加载矢量面，否则矢量面找不到目标去贴对象
camera.setView({ // 先定位，开始渲染定位区域的倾斜
destination : Cesium.Cartesian3.fromDegrees(120.7630995515332, 28.007422239411936, 130.0),
orientation:{
heading:160.4816371653797,
pitch:-0.515,
roll:0
}
});
}, function() {
var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
widget.showErrorPanel(title, undefined, e);
// 去除加载动画
$('#loadingbar').remove();
});
} catch (e) {
if (widget._showRenderLoopErrors) {
......@@ -91,6 +111,128 @@ export default {
widget.showErrorPanel(title, undefined, e);
}
}
var dataSourceName = 'qidu'; // 数据源名称
var dataSetName = 'New_Region'; // 数据集名称
var dataServiceUrl = 'http://localhost:8090/iserver/services/data-wz_qidu_qx1/rest/data/featureResults.rjson?returnContent=true';
var infoboxContainer = document.getElementById("bubble");
var table = document.getElementById("tab");
// 鼠标左键的触发事件，查询要素并弹出显示
var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);
handler.setInputAction(function(e) {
smviewer.entities.removeById('identify-area');
var position = scene.pickPosition(e.position);
// 设置场景位置
scenePosition = position;
var cartographic = Cesium.Cartographic.fromCartesian(position);
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
var queryPoint = { // 查询点对象
x: longitude,
y: latitude
};
// console.log(queryPoint);
queryByPoint(queryPoint);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
var ellipsoid = this.viewer.scene.globe.ellipsoid;
handler.setInputAction(function(e) {
var cartesian = smviewer.camera.pickEllipsoid(e.endPosition, ellipsoid);
if(cartesian){
//将笛卡尔三维坐标转为地图坐标（弧度）
var cartographic = scene.globe.ellipsoid.cartesianToCartographic(cartesian);
//将地图坐标（弧度）转为十进制的度数
var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
var alti_String = (smviewer.camera.positionCartographic.height).toFixed(2);
$('.el-footer').text('经度 : ' + log_String +' | 纬度 : ' + lat_String + ' | 高度 : ' + alti_String);
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
$("#close").click(function(){ // 关闭气泡
$("#bubble").hide();
});
// 每一帧都去计算气泡的正确位置
scene.postRender.addEventListener(function(){
if (scenePosition) {
var canvasHeight = scene.canvas.height;
var windowPosition = new Cesium.Cartesian2();
Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, scenePosition, windowPosition);
infoboxContainer.style.bottom = (canvasHeight - windowPosition.y + 45) + 'px';
infoboxContainer.style.left = (windowPosition.x - 70) + 'px';
infoboxContainer.style.visibility = "visible";
}
});
// 通过点击查询用于表示单体化的面要素，添加到场景中高亮显示。
function queryByPoint(queryPoint) {
var queryObj = {
"getFeatureMode": "SPATIAL",
"spatialQueryMode": "INTERSECT",
"datasetNames": [dataSourceName + ":" + dataSetName],
"geometry": {
id: 0,
parts: [1],
points: [queryPoint],
type: "POINT"
}
};
$("#bubble").hide();
var queryObjJSON = JSON.stringify(queryObj); // 转化为JSON字符串作为查询参数
$.ajax({
type: "post",
url: dataServiceUrl,
data: queryObjJSON,
success: function(result) {
var resultObj = JSON.parse(result);
if (resultObj.featureCount > 0) {
var selectedFeature = resultObj.features[0];
addClapFeature(selectedFeature);
// console.log(selectedFeature);
$("#bubble").show();
for (var i=table.rows.length-1; i>-1; i--){
table.deleteRow(i);
}
for(var index in selectedFeature.fieldNames){
var newRow = table.insertRow();
var cell1 = newRow.insertCell();
var cell2 = newRow.insertCell();
cell1.innerHTML = selectedFeature.fieldNames[index];
cell2.innerHTML = selectedFeature.fieldValues[index];
}
}else{
$("#bubble").hide();
}
},
error: function(msg) {
console.log(msg);
}
})
}
// 将数据服务查询到的要素添加到场景中高亮显示，表示选中效果。
function addClapFeature(feature) {
var lonLatArr = getLonLatArray(feature.geometry.points);
smviewer.entities.add({
id: 'identify-area',
name: '单体化标识面',
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray(lonLatArr),
material: new Cesium.Color(1.0, 0.0, 0.0, 0.3),
},
clampToS3M: true // 贴在S3M模型表面
});
}
function getLonLatArray(points){
// 得到[经度,纬度,经度,纬度...]形式的数组，用于构造面。
var point3D = [];
points.forEach(function(point) {
point3D.push(point.x);
point3D.push(point.y);
});
return point3D;
}
$("#loadingbar").remove();
}
......@@ -98,5 +240,18 @@ export default {
</script>
<style>
.bubble {
padding: 5px;
border-radius: 5px;
}
#tab {
height: unset;
text-align: left;
}
.compass {
top: 60px;
}
.navigation-controls {
top: 170px;
}
</style>
......
@import '~view-design/src/styles/index.less';
// Here are the variables to cover, such as:
@primary-color: #8c0776;
\ No newline at end of file
......@@ -6,19 +6,30 @@
* @FilePath: \superglobevue\src\views\Home.vue
-->
<template>
<div id="map">
<el-container>
<el-header style="height: 50px;"><i class="el-icon-s-opportunity"></i>Header</el-header>
<el-main>
<viewer></viewer>
</el-main>
<el-footer style="height: 22px;">Footer</el-footer>
</el-container>
<!-- <div id="map">
<div id="header">&nbsp;&nbsp;三维地理信息系统</div>
<viewer></viewer>
<div id="footer">
经纬度信息
</div>
</div> -->
</template>
<script>
import viewer from "@/components/viewer_ymo.vue";
import viewer from "@/components/viewer_s3m_wz.vue";
export default {
name: "home",
data() {
return {
isCollapse: true
theme1: 'primary'
};
},
components: {
......@@ -29,28 +40,27 @@ export default {
<style scoped>
.el-header {
padding: 12px 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-flex-negative: 0;
flex-shrink: 0;
height: 50px;
top: 0px;
position: absolute;
z-index: 99;
background-color: white;
width: 100%;
margin-top: -1px;
border-bottom: red;
border-bottom-style: solid;
border-bottom-width: 2px;
background-color: #2d8cf0;
color: white;
text-align: left;
padding: 10px 0px;
padding-left: 10px;
z-index: 99;
font-size: 20pt;
}
.el-aside {
width: 200px;
.el-footer {
height: 22px;
bottom: 0px;
position: absolute;
height: 100%;
z-index: 98;
margin-top: 39px;
margin-left: -20px;
background-color: white;
/* background-color: rgb(238, 241, 246); */
width: 100%;
background-color: rgba(19, 17, 17, 0.5);
color: white;
text-align: left;
padding-top: 2px;
padding-left: 10px;
}
</style>
......