Skip to content

蒋波涛 / super_globe_vue

Go to a project
Toggle navigation
Toggle navigation pinning
faebabd6 by unknown
Options

'20191205'

1 parent fa498086
Inline Side-by-side
Showing 2 changed files with 70 additions and 18 deletions
<!--
* @Author: jiangbotao
* 本例中使用了铁岭的倾斜摄影数据发布的服务
* 1、必须同时发布为三维和Rest服务
* 2、使用要素查询方式来选择倾斜摄影覆盖面
* 3、使用Popup来弹出倾斜摄影覆盖面的信息
* @Date: 2019-12-03 22:52:56
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-05 13:16:55
* @LastEditTime: 2019-12-05 21:30:15
* @FilePath: \superglobevue\src\components\viewer.vue
-->
<template>
......@@ -28,6 +32,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">
<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>
......@@ -52,6 +64,7 @@ export default {
},
mounted: function() {
this.viewer = new Cesium.Viewer("cesiumContainer", { navigationInstructionsInitiallyVisible: false });
// 使用自定义的navigation
var options = {};
options.enableCompass= true;
options.enableZoomControls= true;
......@@ -67,21 +80,8 @@ export default {
var scene = this.viewer.scene;
var widget = this.viewer.cesiumWidget;
var camera = scene.camera;
var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);
handler.setInputAction(function(e) {
smviewer.entities.removeById('identify-area');
var position = scene.pickPosition(e.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);
// 场景位置，用于popup定位
var scenePosition = null;
try {
var promise2 = scene.addS3MTilesLayerByScp("http://www.supermapol.com/realspace/services/3D-dynamicDTH/rest/realspace/datas/Config%20-%201/config",
......@@ -107,7 +107,42 @@ export default {
var dataSourceName = '铁岭矢量面'; // 数据源名称
var dataSetName = 'New_Region3D_1'; // 数据集名称
var dataServiceUrl = 'http://www.supermapol.com/realspace/services/data-dynamicDTH/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);
$("#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 = {
......@@ -130,7 +165,20 @@ export default {
success: function(result) {
var resultObj = JSON.parse(result);
if (resultObj.featureCount > 0) {
addClapFeature(resultObj.features[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];
}
}
},
error: function(msg) {
......@@ -173,4 +221,8 @@ export default {
.navigation-controls {
top: 180px;
}
.bubble {
padding: 10px;
border-radius: 10px;
}
</style>
......
......@@ -2,7 +2,7 @@
* @Author: jiangbotao
* @Date: 2019-12-03 22:31:08
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-05 13:17:59
* @LastEditTime: 2019-12-05 21:29:53
* @FilePath: \superglobevue\src\views\Home.vue
-->
<template>
......