Skip to content

蒋波涛 / super_globe_vue

Go to a project
Toggle navigation
Toggle navigation pinning
479c22f1 by unknown
Options

'20191205'

1 parent c2f5681b
Inline Side-by-side
Showing 6 changed files with 98 additions and 31 deletions
......@@ -20,30 +20,20 @@ SuperGlobeVue是基于vue-cli3和supermap cesium 的一款Globe地球视图。
系统通过vue.config.js进行了eslint的配置。
## 2、设置
## Project setup
### 项目依赖库安装
```
npm install
```
### Compiles and hot-reloads for development
### 代码编译及热启动
```
npm run serve
```
### Compiles and minifies for production
### 代码编译及发布
```
npm run build
```
### Run your unit tests
```
npm run test:unit
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
......
This diff could not be displayed because it is too large.
......@@ -14,6 +14,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link href="./Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script type="text/javascript" src="./Build/Cesium/Cesium.js" data-main="js/main"></script>
<script type="text/javascript" src="./Build//Cesium/Widgets/CesiumNavigation/viewerCesiumNavigationMixin.js"></script>
<script type="text/javascript" src="./Build/Cesium/Workers/zlib.min.js" data-main="js/main"></script>
<script type="text/javascript" src="./js/jquery.min.js" data-main="js/main"></script>
<link href="./css/bootstrap.min.css" rel="stylesheet">
......
......@@ -2,7 +2,7 @@
* @Author: jiangbotao
* @Date: 2019-12-03 22:52:56
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 22:25:49
* @LastEditTime: 2019-12-04 23:31:19
* @FilePath: \superglobevue\src\components\viewer.vue
-->
<template>
......@@ -33,6 +33,7 @@
<script>
import URL_CONFIG from "./../config/urlConfig.vue";
// import CesiumNavigation from "cesium-navigation-es6";
const Cesium = window.Cesium;
export default {
data: function() {
......@@ -40,7 +41,7 @@ export default {
styleObject: {
width: "100%",
height: '100%',
// position: "absolute",
position: "absolute",
top: "0px",
bottom: "0px",
left: "0px",
......@@ -50,15 +51,38 @@ export default {
};
},
mounted: function() {
this.viewer = new Cesium.Viewer("cesiumContainer", {});
this.viewer = new Cesium.Viewer("cesiumContainer", { navigationInstructionsInitiallyVisible: false });
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";
$(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
var smviewer = this.viewer;
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);
try {
var promise2 = scene.addS3MTilesLayerByScp("http://www.supermapol.com/realspace/services/3D-dynamicDTH/rest/realspace/datas/Config%20-%201/config",
{ name: "oblique photography" });
......@@ -71,17 +95,6 @@ export default {
roll : 2.0174972803488345e-11
}
});
// 加载矢量面数据
var promise1 = scene.addS3MTilesLayerByScp('http://www.supermapol.com/realspace/services/3D-dynamicDTH/rest/realspace/datas/New_Region3D_1_%E9%93%81%E5%B2%AD%E7%9F%A2%E9%87%8F%E9%9D%A2/config', {
name:'vector area'
});
Cesium.when.all([promise1], function(vectorLayers){
var vectorLayer = scene.layers.find('vector area'); // 矢量图层
vectorLayer.style3D._fillForeColor.alpha = 0; // 矢量图层填充前景色透明
vectorLayer.selectedColor = new Cesium.Color(1.0, 0.0, 0.0, 0.5); // 选中时给一个可见颜色
vectorLayer.selectColorType = 1; // 选中颜色的显示类型为替换色
vectorLayer.selectEnabled = true; // 矢量图层可选
});
// 去除加载动画
$('#loadingbar').remove();
});
......@@ -91,10 +104,73 @@ export default {
widget.showErrorPanel(title, undefined, e);
}
}
var dataSourceName = '铁岭矢量面'; // 数据源名称
var dataSetName = 'New_Region3D_1'; // 数据集名称
var dataServiceUrl = 'http://www.supermapol.com/realspace/services/data-dynamicDTH/rest/data/featureResults.rjson?returnContent=true';
// 通过点击查询用于表示单体化的面要素，添加到场景中高亮显示。
function queryByPoint(queryPoint) {
var queryObj = {
"getFeatureMode": "SPATIAL",
"spatialQueryMode": "INTERSECT",
"datasetNames": [dataSourceName + ":" + dataSetName],
"geometry": {
id: 0,
parts: [1],
points: [queryPoint],
type: "POINT"
}
};
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) {
addClapFeature(resultObj.features[0]);
}
},
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;
}
}
};
</script>
<style>
.compass {
top: 10px;
}
.navigation-controls {
top: 120px;
}
</style>
......
......@@ -4,7 +4,7 @@
* 2、添加了超图发布的矢量瓦片服务
* @Date: 2019-12-02 09:05:50
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 19:56:13
* @LastEditTime: 2019-12-04 22:37:19
* @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
-->
<template>
......
......@@ -2,7 +2,7 @@
* @Author: jiangbotao
* @Date: 2019-12-03 22:31:08
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 22:35:32
* @LastEditTime: 2019-12-05 10:46:13
* @FilePath: \superglobevue\src\views\Home.vue
-->
<template>
......