Skip to content

蒋波涛 / super_globe_vue

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

'20191204'

1 parent 475f17ba
Inline Side-by-side
Showing 13 changed files with 1064 additions and 52 deletions
......@@ -2,7 +2,7 @@
* @Author: jiangbotao
* @Date: 2019-12-03 22:31:08
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 00:17:53
* @LastEditTime: 2019-12-04 19:44:29
* @FilePath: \superglobevue\.eslintrc.js
*/
module.exports = {
......@@ -21,14 +21,21 @@ module.exports = {
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"indent": [1, 4],
"camelcase": 0,
"indent": [0, 4], // 不理会tab缩进，默认缩进为4个空格
"camelcase": 0, // 不使用驼峰命名法
"eol-last": 0, // 最后一行不需要空格
"no-console": 0, // 允许console
"space-infix-ops": [0, {"int32Hint": false}], // 运算符周围不用空格
"no-tabs": 0,
"semi": [2, "always"],
"space-infix-ops": 2,
"semi": [0, "never"], //双引号
"no-multiple-empty-lines": [0, { "max": 3 }], // 最多允许空三行
"no-trailing-spaces": [0, { "skipBlankLines": true , "ignoreComments": true}],
"space-before-function-paren": ["error", "never"],
"no-unused-vars": [0, { "vars": "all", "args": "none" }],
"key-spacing": [0, { "beforeColon": false, "afterColon": true }],
"keyword-spacing": [0, { "before": false, "after": true }],
"space-after-keywords": [0, "never"],
"space-before-blocks": [0, { "functions": "never", "keywords": "never", "classes": "never" }],
"spaced-comment": [0, "never"],
"comma-dangle": [0, "always"],
"quotes": [0, "double"], //引号类型 `` "" ''
......
......@@ -6336,14 +6336,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -6358,20 +6356,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -6488,8 +6483,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
......@@ -6501,7 +6495,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -6516,7 +6509,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......@@ -6628,8 +6620,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
......@@ -6641,7 +6632,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -6763,7 +6753,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......
......@@ -19,17 +19,4 @@
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
......
<!--
* @Author: jiangbotao
* 限制在一定高度上的视角变化
* 当到一定尺度后开始可以改变视角
* @Date: 2019-12-03 21:30:29
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 20:25:49
* @FilePath: \WebGL_Webpack_Vue\components\viewer6.vue
-->
<template>
<div>
<div id="cesiumContainer" v-bind:style="styleObject"></div>
<div id='loadingbar' class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
<div id="toolbar" style="position: absolute;left: 5px;top: 5px;display: none;">
<select id="imageryOptions" class="selectpicker show-tick form-control">
<!--<option disabled selected value>&#45;&#45;选择服务类型&#45;&#45;</option>-->
<option selected value="WGS">自定义影像&地形-平面场景</option>
<option value="MEC">倾斜数据-三维场景</option>
</select>
</div>
</div>
</template>
<script>
import URL_CONFIG from './../config/urlConfig.vue';
const Cesium=window.Cesium;
export default {
data: function() {
return {
styleObject:{
width: '100%',
position: 'absolute',
top: '0px',
bottom: '0px',
left: '0px',
backgroundColor: '#000000'
},
smviewer:{}
}
},
mounted: function(){
this.smviewer=new Cesium.Viewer('cesiumContainer', {
animation: true
});
var scenecamera=null;
this.smviewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
url : 'https://dev.virtualearth.net',
mapStyle : Cesium.BingMapsStyle.AERIAL,
key : 'AhLx52IuZUuca_C3zK2TzBG2eu1vihUkayqc_e4MISbXZyn5Zw_X--odRqrweVap'
}));
this.smviewer.scene.screenSpaceCameraController.maximumZoomDistance=100000;
this.smviewer.scene.screenSpaceCameraController.enableTilt=false;
var scene = this.smviewer.scene;
scene.camera.setView({
destination : new Cesium.Cartesian3(-1312359.8872867103, 5363468.852567853, 3218043.8251359267),
orientation : {
heading : 0.003361064609361364,
pitch : -1.5310712877149566,
roll : 0
}
});
var stviewer = this.smviewer;
scene.postRender.addEventListener(function(){
scenecamera=scene.camera;
var position = scene.camera.position;
var cartographic = Cesium.Cartographic.fromCartesian(position);
var height = cartographic.height;
if(height<10000){
stviewer.scene.screenSpaceCameraController.enableTilt=true;
}else{
stviewer.scene.screenSpaceCameraController.enableTilt=false;
scene.camera.setView({
destination: Cesium.Cartesian3(scenecamera.position.x, scenecamera.position.y, scenecamera.position.z),
orientation: {
heading: scenecamera.heading,
pitch: -1.5310712877149566,
roll: 0.000000
}
});
}
})
//添加下拉菜单，点击选项切换地图服务
$('#imageryOptions').change(function() {
console.log(scene.camera)
});
$('#toolbar').show();
$('#loadingbar').remove();
}
}
</script>
<style>
</style>
\ No newline at end of file
<!--
* 多个影像图层的动态播放
* @Author: jiangbotao
* @Date: 2019-12-02 09:51:40
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 16:36:03
* @FilePath: \WebGL_Webpack_Vue\components\viewer2.vue
-->
<template>
<div>
<div id="cesiumContainer" v-bind:style="styleObject"></div>
<div id="loadingbar" class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
<div id="toolbar" style="position : absolute;left : 2%; top : 2%;display : none;" >
<div id="progressBar" class="jquery-ui-like"><div></div></div>
</div>
</div>
</template>
<script>
import URL_CONFIG from "./../config/urlConfig.vue";
const Cesium = window.Cesium;
export default {
data: function() {
return {
styleObject:{
width: "100%",
position: "absolute",
top: "0px",
bottom: "0px",
left: "0px",
backgroundColor: "#000000"
},
smviewer:{}
};
},
mounted: function() {
this.smviewer = new Cesium.Viewer("cesiumContainer", {
animation: true
});
this.smviewer.imageryLayers.addImageryProvider(Cesium.createOpenStreetMapImageryProvider({
url : "https://a.tile.openstreetmap.org/"
}));
var num = 10;
$(".cesium-viewer-animationContainer").hide();
// 隐藏logo
$(".cesium-widget-credits")[0].style.visibility = "hidden";
// 隐藏导航工具
// $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
var imageryLayers = this.smviewer.imageryLayers;
//依次利用图片服务url创建SuperMapImageryProvider实例
var imageryProvider0 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG0
});
var imageryProvider1 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG1
});
var imageryProvider2 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG2
});
var imageryProvider3 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG3
});
var imageryProvider4 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG4
});
var imageryProvider5 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG5
});
var imageryProvider6 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG6
});
var imageryProvider7 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG7
});
var imageryProvider8 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG8
});
var imageryProvider9 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG9
});
var imageryProvider10 = new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.TENSE_IMG10
});
//先将第1、第2个provider添加到图层集合中，并将第2个图层设为完全透明
var layer0 = imageryLayers.addImageryProvider(imageryProvider0);
var layer1 = imageryLayers.addImageryProvider(imageryProvider1);
layer1.alpha = 0;
var stviewer = this.smviewer;
this.smviewer.animation.viewModel.timeFormatter = function(date, viewModel) {
$(".cesium-viewer-bottom").css("left", "0");
//在layer0完全透明前，layer0透明度减少，layer1透明度增加
if(layer0.alpha >= 0) {
layer0.alpha -= 0.005;
layer1.alpha += 0.005;
}
if(layer0.alpha < 0) {
//当第一个图层完全透明,开始执行下一轮渐变
changeTimeFormatter(layer0, layer1, imageryProviders);
}
}
var n = 0;
//数组包含除了第1、第2的剩余provider的数组
var imageryProviders = [imageryProvider2, imageryProvider3, imageryProvider4, imageryProvider5, imageryProvider6, imageryProvider7, imageryProvider8, imageryProvider9, imageryProvider10];
function changeTimeFormatter(layer0, layer1, imageryProviders) {
console.log(n);
if(typeof imageryProviders[n] === "undefined") {
//数组中没有成员时,将此回调函数置为空
stviewer.animation.viewModel.timeFormatter = function(){};
return;
}
//移除掉已经不可见的图层
imageryLayers.remove(layer0);
//将layer0指向下一个图层,并将它先设置成完全透明
layer0 = imageryLayers.addImageryProvider(imageryProviders[n++]);
layer0.alpha = 0;
layer1.alpha = 1;
function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find("div").animate({ width: progressBarWidth }, 10).html(percent + "% ");
}
//改变该回调函数，执行下一轮渐变
stviewer.animation.viewModel.timeFormatter = function(date, viewModel) {
if (layer1.alpha >= 0) {
layer1.alpha -= 0.005;
layer0.alpha += 0.005;
num += 0.05;
progress(num.toFixed(1), $("#progressBar"));
}
if (layer1.alpha < 0) {
//执行下一轮渐变
changeTimeFormatter(layer1, layer0, imageryProviders);
}
}
}
this.smviewer.flyTo(layer0);
$("#loadingbar").remove();
$("#toolbar").show();
}
}
</script>
<style>
</style>
<!--
* @Author: jiangbotao
* 添加倾斜摄影场景和倾斜摄影图层
* @Date: 2019-12-02 09:05:50
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 20:20:18
* @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
-->
<template>
<div>
<div id="cesiumContainer" v-bind:style="styleObject"></div>
<div id="loadingbar" class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
</div>
</template>
<script>
import URL_CONFIG from "./../config/urlConfig.vue";
const Cesium=window.Cesium;
export default {
data: function() {
return {
styleObject:{
width: "100%",
position: "absolute",
top: "0px",
bottom: "0px",
left: "0px",
backgroundColor: "#000000"
},
smviewer:{}
}
},
mounted: function(){
this.viewer = new Cesium.Viewer("cesiumContainer", {});
// 隐藏logo
$(".cesium-widget-credits")[0].style.visibility="hidden";
// 隐藏导航工具
// $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
this.viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
url : "https://dev.virtualearth.net",
mapStyle : Cesium.BingMapsStyle.AERIAL,
key : URL_CONFIG.BING_MAP_KEY
}));
var scene = this.viewer.scene;
var widget = this.viewer.cesiumWidget;
$("#loadingbar").remove();
try{
//依次向场景添加S3M图层服务
var promise1 = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_SRSB, {
name : "srsb"
});
var promise2 = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_SRSB_WATER, {
name : "srsb_water"
});
var promise = scene.open(URL_CONFIG.SCENE_SRSB);
Cesium.when(promise, function(){
//查找水面图层
var waterLayer =scene.layers.find("水面@vector");
var style = new Cesium.Style3D();
style.bottomAltitude = 5;
//设置水面图层的底部高程，确保水面与模型贴合
waterLayer.style3D = style;
//设置风格后需刷新
waterLayer.refresh();
//设置相机位置、视角，便于观察场景
var d1 = Cesium.Math.toDegrees(0.8344578907203247);
var d2 = Cesium.Math.toDegrees(0.22751343457105547);
scene.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(13.0353, 47.8084, 100.0),
orientation:{
heading:0.7272,
pitch:-0.2672,
roll:0
}
})
}, function(){
var title = "加载SCP失败，请检查网络连接状态或者url地址是否正确？";
widget.showErrorPanel(title, undefined, e);
});
}catch(e){
if (widget._showRenderLoopErrors) {
var title = "渲染时发生错误，已停止渲染。";
widget.showErrorPanel(title, undefined, e);
}
}
}
}
</script>
<style>
</style>
\ No newline at end of file
......@@ -2,7 +2,7 @@
* @Author: jiangbotao
* @Date: 2019-12-03 22:52:56
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 00:21:45
* @LastEditTime: 2019-12-04 22:23:44
* @FilePath: \superglobevue\src\components\viewer.vue
-->
<template>
......@@ -55,23 +55,17 @@ export default {
// 隐藏导航工具
// $(".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
// 添加OSM地图
let osm = Cesium.createOpenStreetMapImageryProvider({
url: "https://tile-a.openstreetmap.fr/hot",
fileExtension:"png"
});
imageryLayers.addImageryProvider(labelImagery);
this.viewer.imageryLayers.addImageryProvider(osm);
var scene = this.viewer.scene;
var widget = this.viewer.cesiumWidget;
var sceneLayer;
var stviewer = this.viewer;
try {
// 添加倾斜摄影模型图层
var promise = scene.open(URL_CONFIG.SCENE_SRSB);
Cesium.when(promise, function(layers) {
//查找水面图层
......
<!--
* @Author: jiangbotao
* @Date: 2019-12-03 22:52:56
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 22:25:49
* @FilePath: \superglobevue\src\components\viewer.vue
-->
<template>
<div>
<div id="cesiumContainer" v-bind:style="styleObject"></div>
<div id='loadingbar' class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
</div>
</template>
<script>
import URL_CONFIG from "./../config/urlConfig.vue";
const Cesium = window.Cesium;
export default {
data: function() {
return {
styleObject: {
width: "100%",
height: '100%',
// position: "absolute",
top: "0px",
bottom: "0px",
left: "0px",
backgroundColor: "#000000"
},
smviewer: {}
};
},
mounted: function() {
this.viewer = new Cesium.Viewer("cesiumContainer", {});
// 隐藏logo
$(".cesium-widget-credits")[0].style.visibility = "hidden";
// 隐藏导航工具
// $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
var scene = this.viewer.scene;
var widget = this.viewer.cesiumWidget;
var camera = scene.camera;
try {
var promise2 = scene.addS3MTilesLayerByScp("http://www.supermapol.com/realspace/services/3D-dynamicDTH/rest/realspace/datas/Config%20-%201/config",
{ name: "oblique photography" });
Cesium.when.all([promise2], function(obliqueLayers){ // 等倾斜摄影数据加载完了再去加载矢量面，否则矢量面找不到目标去贴对象
camera.setView({ // 先定位，开始渲染定位区域的倾斜
destination : new Cesium.Cartesian3(-2623004.4174251584, 3926981.958360567, 4287374.829655093),
orientation : {
heading: 4.39611370540786,
pitch : -0.43458664812464143,
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();
});
} catch (e) {
if (widget._showRenderLoopErrors) {
var title = '渲染时发生错误，已停止渲染。';
widget.showErrorPanel(title, undefined, e);
}
}
}
};
</script>
<style>
</style>
<!--
* @Author: jiangbotao
* 演示大场景被淹没
* @Date: 2019-12-02 09:05:50
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 22:03:19
* @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
-->
<template>
<div>
<div id="cesiumContainer" v-bind:style="styleObject"></div>
<div id='loadingbar' class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
<div id="toolbar" class="param-container tool-bar">
<div id="setingBar">
<div class="form-group">
<input id="maxHeight" value="71" required="required" class="form-control"/>
<label class="form-label">最大高度 (米) : </label>
</div>
<div class="form-group">
<input id="minHeight" value="60" required="required" class="form-control"/>
<label class="form-label">最小高度 (米) :</label>
</div>
<div class="form-group">
<input id="speed" value="5" required="required" class="form-control"/>
<label class="form-label">淹没速度(米/秒):</label>
</div>
</div>
<div style="margin-left: 40px;">
<button type="button" id="begin" class="button black">开始</button>
<button type="button" id="clear" class="button black">清除</button>
</div>
</div>
</div>
</template>
<script>
import URL_CONFIG from './../config/urlConfig.vue';
const Cesium = window.Cesium;
export default {
data: function() {
return {
styleObject:{
width: '100%',
height: '100%',
position: 'absolute',
top: '0px',
bottom: '0px',
left: '0px',
backgroundColor: '#000000'
},
smviewer:{}
}
},
mounted: function(){
this.viewer=new Cesium.Viewer('cesiumContainer', {});
// 隐藏logo
$(".cesium-widget-credits")[0].style.visibility="hidden";
// 隐藏导航工具
// $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
this.viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
url : 'https://dev.virtualearth.net',
mapStyle : Cesium.BingMapsStyle.AERIAL,
key : URL_CONFIG.BING_MAP_KEY
}));
var scene = this.viewer.scene;
var widget = this.viewer.cesiumWidget;
$(".form-group").show();
$(".element").show();
$('#loadingbar').remove();
try{
var promise = scene.open(URL_CONFIG.SCENE_SRSB);
Cesium.when(promise, function(layers){
// 设置相机视角，便于查看模型
scene.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(13.0353, 47.8084, 100.0),
orientation:{
heading:0.7272,
pitch:-0.2672,
roll:0
}
});
}, function(){
var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
widget.showErrorPanel(title, undefined, e);
});
}catch(e){
if (widget._showRenderLoopErrors) {
var title = '渲染时发生错误，已停止渲染。';
widget.showErrorPanel(title, undefined, e);
}
}
var currentHeight = 0;
var maxValue = 0;
var minValue = 0;
var int = null;
document.getElementById("begin").onclick = function() {
currentHeight = 0;
int = self.setInterval("flood()", 100);
maxValue = parseInt(document.getElementById("maxHeight").value);
minValue = parseInt(document.getElementById("minHeight").value);
};
window.flood = function() {
if(currentHeight > maxValue) {
self.clearInterval(int);
return;
}
var layer = scene.layers.find("srsb");
var hyp = new Cesium.HypsometricSetting();
//创建分层设色对象 设置最大/最小可见高度 颜色表 显示模式 透明度及线宽
var colorTable = new Cesium.ColorTable();
colorTable.insert(100, new Cesium.Color(0, 39/255, 148/255));
colorTable.insert(0, new Cesium.Color(149/255, 232/255, 249/255));
hyp.MaxVisibleValue = currentHeight;
hyp.MinVisibleValue = minValue;
hyp.ColorTable = colorTable;
hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE;
hyp.Opacity = 0.6;
hyp.LineInterval = 10.0;
//设置图层分层设色属性
layer.hypsometricSetting = {
hypsometricSetting : hyp,
analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL
};
currentHeight += (parseInt(document.getElementById("speed").value))/10;
};
document.getElementById("clear").onclick = function() {
self.clearInterval(int);
var layer = scene.layers.find("sci_park");
var hyp = new Cesium.HypsometricSetting();
hyp.MaxVisibleValue = 0;
layer.hypsometricSetting = {
hypsometricSetting : hyp,
analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL
}
};
}
}
</script>
<style>
.form-group::before {
content: attr(data-foo);
color: black;
}
#setingBar{
width:150px;
height:110px;
background: rgba(42, 42, 42, 0.4);
padding: 8px;
border-radius: 4px;
color:cornflowerblue
}
#toolbar{
width: 200px;
}
</style>
\ No newline at end of file
<!--
* @Author: jiangbotao
* 1、展示天地图栅格瓦片数据
* 2、添加了超图发布的矢量瓦片服务
* @Date: 2019-12-02 09:05:50
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 19:56:13
* @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
-->
<template>
<div>
<div id="cesiumContainer" v-bind:style="styleObject"></div>
<div id='loadingbar' class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
</div>
</template>
<script>
import URL_CONFIG from './../config/urlConfig.vue';
const Cesium=window.Cesium;
export default {
data: function(){
return {
styleObject:{
width: '100%',
position: 'absolute',
top: '0px',
bottom: '0px',
left: '0px',
backgroundColor: '#000000'
},
smviewer:{}
}
},
mounted: function(){
this.smviewer=new Cesium.Viewer('cesiumContainer', { animation: true });
// 隐藏logo
$(".cesium-widget-credits")[0].style.visibility="hidden";
$(".cesium-viewer-animationContainer")[0].style.visibility="hidden";
// 隐藏导航工具
// $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
this.smviewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
mapStyle : Cesium.TiandituMapsStyle.IMG_C,
token: URL_CONFIG.TOKEN_TIANDITU
}));
var imageryLayers = this.smviewer.imageryLayers;
//初始化天地图全球中文注记服务，并添加至影像图层
var labelImagery = new Cesium.TiandituImageryProvider({
mapStyle : Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务（经纬度投影）
token: URL_CONFIG.TOKEN_TIANDITU
});
imageryLayers.addImageryProvider(labelImagery);
// 添加超图发布的矢量瓦片图层
this.smviewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
url: 'http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China'
}));
var scene = this.smviewer.scene;
scene.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(120.6994, 27.9938, 100000),
orientation : {
heading : 0.003361064609361364,
pitch : -1.5310712877149566,
roll : 0
}
});
$('#loadingbar').remove();
}
}
</script>
<style>
</style>
\ No newline at end of file
<!--
* 显示基本的三维Globe
* 1、添加SuperMap发布的地形数据
* 2、添加SuperMap发布的影像数据
* 3、量测面积
* 4、淹没区分析
* @Author: jiangbotao
* @Date: 2019-12-02 09:05:50
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 20:09:26
* @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
-->
<template>
<div>
<div id="cesiumContainer" v-bind:style="styleObject"></div>
<div id="loadingbar" class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
<div id="toolbar" class="param-container tool-bar">
<div class="param-item">
<label>颜色透明</label>
<input class="colorPicker" size="8" data-bind="value: color,valueUpdate: 'input'" id="colorPicker">
</div>
<div class="param-item">
<label>颜色透明容限</label>
<input type="range" min="0" max="1" step="0.02" data-bind="value: tolerance,valueUpdate: 'input'" id="tolerance" style="display: block;width:200px;margin: 5px 0">
</div>
<div class="param-item">
<button type="button" id="area" class="button black">测面</button>
<button type="button" id="draw" class="button black">绘面</button>
<button type="button" id="begin" class="button black">淹没分析</button>
</div>
</div>
</div>
</template>
<script>
import URL_CONFIG from "./../config/urlConfig.vue";
const Cesium = window.Cesium;
export default {
data: function() {
return {
styleObject:{
width: '100%',
position: "absolute",
top: "0px",
bottom: "0px",
left: "0px",
backgroundColor: "#000000"
},
smviewer:{}
}
},
mounted: function(){
this.viewer=new Cesium.Viewer("cesiumContainer", {
terrainProvider : new Cesium.CesiumTerrainProvider({
url : URL_CONFIG.SiChuan_TERRAIN,
isSct : true//地形服务源自SuperMap iServer发布时需设置isSct为true
}),
});
// 隐藏logo
$(".cesium-widget-credits")[0].style.visibility="hidden";
// 隐藏导航工具
// $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
// 添加影像数据
var layer = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
url : URL_CONFIG.SiChuan_IMG
}));
var clampMode = 0; // 空间模式
var scene = this.viewer.scene;
var widget = this.viewer.cesiumWidget;
var handlerArea, handlePolygon;
// 设置相机视图
scene.camera.setView({
destination : new Cesium.Cartesian3(-1206939.1925299785, 5337998.241228442, 3286279.2424502545),
orientation : {
heading : 1.4059101895600987,
pitch : -0.20917672793046682,
roll : 2.708944180085382e-13
}
});
// 量测面积代码
var stviewer = this.viewer;
var positions = null;
handlerArea = new Cesium.MeasureHandler(this.viewer, Cesium.MeasureMode.Area, clampMode);
handlerArea.measureEvt.addEventListener(function(result){
var mj = Number(result.area);
var area = mj > 1000000 ? (mj/1000000).toFixed(2) + "km²" : mj.toFixed(2) + "㎡"
handlerArea.areaLabel.text = "面积:" + area;
});
handlerArea.activeEvt.addEventListener(function(isActive){
if(isActive === true){
stviewer.enableCursorStyle = false;
stviewer._element.style.cursor = "";
$("body").removeClass("measureCur").addClass("measureCur");
}else{
stviewer.enableCursorStyle = true;
$("body").removeClass("measureCur");
}
});
$("#area").click(function(){
deactiveAll();
handlerArea&&handlerArea.activate();
});
// 绘制面
handlePolygon = new Cesium.DrawHandler(this.viewer, Cesium.DrawMode.Polygon);
handlePolygon.drawEvt.addEventListener(function(polygon){
var array = [].concat(polygon.object.positions);
positions = [];
for(var i = 0, len = array.length; i < len; i++){
var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
var h=cartographic.height;
if(positions.indexOf(longitude)===-1&&positions.indexOf(latitude)===-1){
positions.push(longitude);
positions.push(latitude);
positions.push(h);
}
}
});
$("#draw").click(function(){
deactiveAll();
handlePolygon && handlePolygon.activate();
});
var hyp = new Cesium.HypsometricSetting();
//设置显示模式
hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE;
//设置线颜色为红色
hyp._lineColor = new Cesium.Color(1.0, 0.0, 0.0, 1.0);
//设置最大/最小可见高度
hyp.MinVisibleValue = 0;
//设置颜色表的最大/最小key值,表示高度
hyp.ColorTableMinKey = 1;
hyp.ColorTableMaxKey = 9000;
//新建颜色表
var colorTable = new Cesium.ColorTable();
var height = 1;
//每隔200m向颜色表插入一个随机色
for(var i = 0; i<90; i++){
height += 200;
colorTable.insert(height, getRandomColor());
}
//返回随机颜色
function getRandomColor(){
return new Cesium.Color(Math.random(), Math.random(), Math.random());
}
hyp.ColorTable = colorTable;
hyp.Opacity = 0.8;
//等高线间隔为200m
hyp.LineInterval = 200.0;
// 淹没分析
var currentHeight = 0;
var maxValue = 0;
var minValue = 0;
var int = null;
function flood(positions){
currentHeight = 0;
int = self.setInterval("flood()", 100);
maxValue = 3300;
minValue = 3000;
hyp.MinVisibleValue = minValue;
currentHeight = minValue;
window.flood = function() {
if(currentHeight > maxValue) {
self.clearInterval(int);
return;
}
hyp.MaxVisibleValue = currentHeight;
hyp.CoverageArea = positions;
console.log(positions);
stviewer.scene.globe.HypsometricSetting = {
hypsometricSetting : hyp,
analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_REGION
};
currentHeight += (500) / 10;
};
}
$("#begin").click(function(){
flood(positions);
handlePolygon.polygon.show = false;
// handlePolygon.polyline.show=false;
});
function clearAll(){
handlerArea && handlerArea.clear();
handlePolygon && handlePolygon.clear();
}
function deactiveAll(){
handlePolygon && handlePolygon.deactivate();
handlerArea && handlerArea.deactivate();
}
// 颜色及透明度设置
$("#colorPicker").spectrum({
color: "rgba(255,255,255)",
showPalette: true,
showAlpha: true,
localStorageKey: "spectrum.demo"
// palette: palette
});
var viewModel = {
color : "#ffffff",
tolerance : 0
};
Cesium.knockout.track(viewModel);
// 通过toolbar的控件控制地图图层的展示
var toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);
Cesium.knockout.getObservable(viewModel, "color").subscribe(
function(newValue) {
var selectedColor = Cesium.Color.fromCssColorString(newValue);
layer.transperantBackColor = selectedColor;
}
);
Cesium.knockout.getObservable(viewModel, "tolerance").subscribe(
function(newValue) {
layer.transperantBackColorTolerance = newValue;
}
);
$("#loadingbar").remove();
$("#toolbar").show();
}
};
</script>
<style>
.cesium-infoBox-visible {
transform: translate(0,0);
visibility: hidden;
opacity: 1;
transition: opacity 0.2s ease-out,transform 0.2s ease-out;
}
</style>
\ No newline at end of file
......@@ -2,7 +2,7 @@
* @Author: jiangbotao
* @Date: 2019-12-03 22:54:10
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 07:12:56
* @LastEditTime: 2019-12-04 19:50:11
* @FilePath: \superglobevue\src\config\urlConfig.vue
-->
<script>
......
......@@ -2,17 +2,17 @@
* @Author: jiangbotao
* @Date: 2019-12-03 22:31:08
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 08:14:36
* @LastEditTime: 2019-12-04 22:35:32
* @FilePath: \superglobevue\src\views\Home.vue
-->
<template>
<div class="home">
<div id="map">
<viewer></viewer>
</div>
</template>
<script>
import viewer from "@/components/viewer.vue";
import viewer from "@/components/viewer_tdt.vue";
export default {
name: "home",
......