40e47cbe by jikai

111111

1 parent de8344c0
......@@ -6,9 +6,19 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Widgets/widgets.css"
rel="stylesheet">
<!-- <script src="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> -->
<link href="./Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<!-- <link href="./css/bootstrap.min.css" rel="stylesheet"> -->
<link href="./css/pretty.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>
<!-- <script src="./js/bootstrap.min.js"></script> -->
<script src="./js/spectrum.js"></script>
<script type="text/javascript" src="./js/supermap/SuperMap.Include.js"></script>
<script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
</head>
<body>
<noscript>
......
export default
class Roller {
constructor(obj) {
this.imageryLayers = obj.imageryLayers;
this.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
url: obj.url,
layer: "tdtBasicLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: false
})).splitDirection = Cesium.ImagerySplitDirection.LEFT;
}
screen(opt) {
var slider = opt.slider, handler = new Cesium.ScreenSpaceEventHandler(slider), moveActive = false;
function move(movement) {
if (!moveActive) return;
var relativeOffset = movement.endPosition.x;
var splitPosition =
(slider.offsetLeft + relativeOffset) /
slider.parentElement.offsetWidth;
slider.style.left = 100.0 * splitPosition + "%";
opt.viewer.scene.imagerySplitPosition = splitPosition;
}
handler.setInputAction(function () {
moveActive = true;
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(function () {
moveActive = true;
}, Cesium.ScreenSpaceEventType.PINCH_START);
handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);
handler.setInputAction(function () {
moveActive = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);
handler.setInputAction(function () {
moveActive = false;
}, Cesium.ScreenSpaceEventType.PINCH_END);
constructor(viewer) {
let body = $('body');
this.initRollerShutter(viewer, {
splitDirection: new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE), // 初始时屏蔽左侧
verticalSplitPosition: body.width() / 2,
horizontalSplitPosition: body.height() / 2,
imageryLayers: [viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
key : 'AqYgyS1gIIDGsxmOlncqrgA83cHnhClLwZmIJXbYXX36pfxKYtUGk12Q3splaf4Y',
url : '//dev.virtualearth.net'
}))], // 参与卷帘的影像图层数组
latestSplitDirection: null // 用于在禁用卷帘后恢复之前的卷帘方向
});
}
initRollerShutter(a, b) {
this.setRollerShutterSplit(a, b);
this.bindSliderEvt(a, b);
}
setRollerShutterSplit(viewer, rollerShutterConfig) {
let splitPosition = null, imageryLayer, body = $("body");
if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE)) || rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE))) {
splitPosition = rollerShutterConfig.verticalSplitPosition;
} else if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.TOP)) || rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.BOTTOM))) {
splitPosition = rollerShutterConfig.horizontalSplitPosition;
}
for (imageryLayer of rollerShutterConfig.imageryLayers) {
imageryLayer.splitDirection = rollerShutterConfig.splitDirection;
}
if (splitPosition) { // 如果禁用卷帘就没有必要设置分割位置
if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE)) || rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE))) {
viewer.scene.imagerySplitPosition.x = splitPosition / body.width();
} else if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.TOP)) ||
rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.BOTTOM))) {
viewer.scene.imagerySplitPosition.y = splitPosition / body.height();
}
}
}
bindSliderEvt(viewer, rollerShutterConfig) {
let verticalSlider = document.getElementById('vertical-slider'); // 垂直分割条
let horizontalSlider = document.getElementById('horizontal-slider'); // 水平分割条
verticalSlider.addEventListener('mousedown', mouseDown, false);
horizontalSlider.addEventListener('mousedown', mouseDown, false);
let windowHeight = $('body').height();
let sliderMove = e => { // 鼠标拖拽时执行
// 解决拖拽鼠标粘滞的问题
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE)) || rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE))) {
verticalSlider.style.left = e.clientX + 'px';
rollerShutterConfig.verticalSplitPosition = e.clientX;
} else if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.TOP)) || rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.BOTTOM))) {
let clientY = e.clientY;
if (clientY < 0) {
clientY = 0;
} else if (clientY > windowHeight) {
clientY = windowHeight - $('#horizontal-slider').height();
}
horizontalSlider.style.top = clientY + 'px';
rollerShutterConfig.horizontalSplitPosition = windowHeight - clientY;
}
this.setRollerShutterSplit(viewer, rollerShutterConfig);
}
document.addEventListener('mouseup', mouseUp, false);
function mouseUp(e) {
document.removeEventListener('mousemove', sliderMove, false);
}
function mouseDown(e) {
document.addEventListener('mousemove', sliderMove, false);
}
}
}
\ No newline at end of file
......
......@@ -55,6 +55,7 @@
},
startAnalysis() {
// this.isAnalysis = true;
this.$parent.viewpoint.chooseView();
},
stopAnalysis() {
// this.isAnalysis = false;
......
......@@ -74,8 +74,6 @@
sdgc: '', // 水底高程
swsd: '', // 水位深度
ymsd: '', // 淹没速度
isXmbj: true,
// isAnalysis: true
}
......@@ -90,12 +88,19 @@
},
startAnalysis() {
// this.isAnalysis = true;
let viewer = this.$parent.viewer;
this.$parent.flood.floodParse(viewer.scene, this.$parent.flood.positions2d, 0, 50);
this.$parent.flood.handlerPolygon.clear();
},
stopAnalysis() {
// this.isAnalysis = false;
this.$parent.viewer.entities.removeAll();
// this.$parent.flood.handlerPolygon.clear();
},
handleIsXmbj(flag) {
this.isXmbj = flag;
this.$parent.flood.handlerPolygon.deactivate();
!flag && this.$parent.flood.handlerPolygon.activate();
}
}
}
......
......@@ -19,24 +19,6 @@
</div>
<div class="func-input">
<div class="btn-wrapper2" :class="[isCF?'add-bg2': '']" @click="handleIsXmbj('isCF')">
<span class="center">春分</span>
</div>
<div class="btn-wrapper2" :class="[isXZ?'add-bg2': '']" @click="handleIsXmbj('isXZ')">
<span class="center">夏至</span>
</div>
<div class="btn-wrapper2" :class="[isQF?'add-bg2': '']" @click="handleIsXmbj('isQF')">
<span class="center">秋分</span>
</div>
<div class="btn-wrapper2" :class="[isLD?'add-bg2': '']" @click="handleIsXmbj('isLD')">
<span class="center">立冬</span>
</div>
<div class="btn-wrapper2" :class="[isDZ?'add-bg2': '']" @click="handleIsXmbj('isDZ')">
<span class="center">冬至</span>
</div>
</div>
<div class="func-input">
<span>时间间隔 </span>
<el-input-number v-model="timeS" controls-position="right" :min="0" :max="1000"
style="margin:0 12px; width: 245px;"></el-input-number>
......@@ -63,6 +45,7 @@
</template>
<script>
import shadow from "../assets/js/map/shadow";
let maxW = 24 * 60 * 60 * 1000 - 1 * 60 * 1000
export default {
name: 'yyAnslysis',
......@@ -92,13 +75,15 @@
}
}
},
mounted() {},
mounted() {
this.shadow instanceof shadow || (this.shadow = new shadow());
},
methods: {
closePop() {
this.$emit('closePop', 'yyAnslysis')
},
startAnalysis() {
console.log(this.shadow);
},
stopAnalysis() {
......
......@@ -52,12 +52,12 @@
<div class="bottomNav">
<bottomNav></bottomNav>
</div>
<div class="leftAssert">
<!-- <div class="leftAssert">
<leftAssert @EFadb='EFadb' @EKgfz='EKgfz' @EGzfx='EGzfx'></leftAssert>
</div>
<div class="mapPop">
</div> -->
<!-- <div class="mapPop">
<mapPop></mapPop>
</div>
</div> -->
<div class="allSee" v-if='allSee'>
<allSee @closePop='closePop'></allSee>
</div>
......@@ -81,26 +81,53 @@
<kgAnalusis @closePop='closePop'></kgAnalusis>
</div>
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
<div id="cesiumContainer">
<div class="" ref="slider"></div>
<div id="vertical-slider" style="display: none;"></div>
<div id="horizontal-slider" style="display: none;"></div>
</div>
<!-- <div id="split_up" style="display: none;"></div>
<div id="split_bottom" style="display: none;"></div>
<div id="split_left" style="display: none;"></div>
<div id="split_right" style="display: none;"></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 measureTools from "../assets/js/map/MeasureTools";
import drawTool from "../assets/js/map/drawTool";
import objectManage from '../assets/js/map/maputils';
import createDraw from '../assets/js/map/createDraw';
import roller from "../assets/js/map/roller";
import addCompany from '../assets/js/map/addCompany';
import flood from "../assets/js/map/flood";
import viewpoint from "../assets/js/map/viewpoint";
import visual from "../assets/js/map/visual";
import TopTitle from '../components/topTitle';
import rightTopFunc from '../components/rightTopFunc';
import rightFunc from '../components/rightFunc';
import bottomNav from '../components/bottomNav';
import leftAssert from '../components/leftAssert';
import mapPop from '../components/mapPop';
// import leftAssert from '../components/leftAssert';
// import mapPop from '../components/mapPop';
import allSee from '../components/allSee'; //通视
import ymAnslysis from '../components/ymAnslysis'; //淹没分析
......@@ -108,6 +135,8 @@
import tjxAnslysis from '../components/tjxAnslysis'; // 天际线分析
import yyAnslysis from '../components/yyAnslysis'; // 阴影分析
import kgAnalusis from '../components/kgAnalusis'; // 控高分析
import URL_CONFIG from "./../config/urlConfig.vue";
const Cesium = window.Cesium;
export default {
components: {
......@@ -115,8 +144,8 @@
rightTopFunc,
rightFunc,
bottomNav,
leftAssert,
mapPop,
// leftAssert,
// mapPop,
allSee,
ymAnslysis,
......@@ -128,10 +157,7 @@
data() {
return {
viewer: undefined,
entity: undefined,
devTypes: ['point', 'polyline', 'polygon'],
roll: {r: undefined, b: false},
isRoller: false,
isReturn: false, // 复位
enlarge: false, // 放大
narrow: false, // 缩小
......@@ -157,54 +183,42 @@
}
},
mounted() {
// ***********************************初始化地图********************************************
Cesium.Ion.defaultAccessToken = this.config.mapToken;
this.viewer = new Cesium.Viewer('cesiumContainer', {
geocoder: false,
homeButton: false,
sceneModePicker: false,
fullscreenButton: false,
vrButton: false,
baseLayerPicker: true,
infoBox: false,
selectionIndicator: false,
animation: false,
timeline: false,
shouldAnimate: true,
navigationHelpButton: false,
navigationInstructionsInitiallyVisible: false,
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: 'https://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali'
this.viewer = new Cesium.Viewer('cesiumContainer');
// this.viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
// credit : new Cesium.Credit('天地图全球影像服务'),
// token: URL_CONFIG.TOKEN_TIANDITU
// }));
let scene = this.viewer.scene
scene.shadowMap.darkness = 1.275; //设置第二重烘焙纹理的效果(明暗程度)
scene.skyAtmosphere.brightnessShift=0.4;
scene.debugShowFramesPerSecond = true;
scene.hdrEnabled = false;
scene.sun.show = false;
this.draw = new createDraw(this.viewer);
Cesium.when.all([
scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND1, {
name: 'ground'
}),
scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD, {
name: 'build'
})
], layer => {
// this.layers = layer;
objectManage.viewer = this.viewer;
scene.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(116.44621857300415, 39.899281526734555, 216.7793905027196),
orientation : {
heading : 0.41348036210986194,
pitch : -0.13636490404291735,
roll : 6.283185307179563
}
});
// ***********************************倾斜摄影加载********************************************
let tileset = new Cesium.Cesium3DTileset({
url : 'http://localhost:9000/model/e44fe150d09b11eaabec1d24e8548b3a/tileset.json',
skipLevelOfDetail : true,
baseScreenSpaceError : 1024,
skipScreenSpaceErrorFactor : 16,
skipLevels : 1,
immediatelyLoadDesiredLevelOfDetail : false,
loadSiblings : false,
cullWithChildrenBounds : true
}), height = -2440;
this.viewer.scene.primitives.add(tileset);
tileset.readyPromise.then(argument => {
var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + height);
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
setTimeout(() => { this.viewer.flyTo(tileset) }, 2000);
}, function(e){
if (widget._showRenderLoopErrors) {
var title = '加载SCP失败,请检查网络连接状态或者url地址是否正确?';
widget.showErrorPanel(title, undefined, e);
}
});
// ********************************Draw********************************************
this.draw = new drawTool.drawTool({
viewer: this.viewer,
hasEdit: true,
})
},
methods: {
searchRoat(val) {
......@@ -255,131 +269,33 @@
}
// 距离
,Edistance(val) {
new measureTools.measureTools(this.viewer).measurePolyLine();
this.draw.handlerDis.activate();
}
// 面积
,Earea(val) {
new measureTools.measureTools(this.viewer).measurePolygon();
this.draw.handlerArea.activate();
}
// 标记
,Emarker(val) {
// this.draw.type.point || (this.draw.type.point = new tool.attributes.point({viewer: this.viewer}));
// this.draw.create('point');
this.draw.startDraw({
type: "polyline",
style: {
material: Cesium.Color.YELLOW,
clampToGround: true
}
});
this.draw.handlerHeight.activate();
}
// 卷帘
,ErollerShutter() {
this.roll.r || (this.roll.r = new roller({
imageryLayers: this.viewer.imageryLayers,
url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=ebf64362215c081f8317203220f133eb'
})).screen({
slider: this.$refs.slider,
viewer: this.viewer
})
this.$refs.slider.className = (this.roll.b = !this.roll.b) ? 'slider' : '';
this.viewer.scene.imagerySplitPosition = this.roll.b && this.$refs.slider.offsetLeft / this.$refs.slider.parentElement.offsetWidth
let slider = document.getElementById('vertical-slider');
slider.style.display = (this.isRoller = !this.isRoller) ? 'block' : 'none';
this.roller instanceof roller || (this.roller = new roller(this.viewer));
}
,EsplitScreen() {
// VERTICAL HORIZONTAL
this.viewer.scene.multiViewportMode = Cesium.MultiViewportMode.HORIZONTAL;
}
// 分屏
,EsplitScreen() {}
// 指北
,EtoNorth() {}
// 顶视
,EtopSee() {}
// 环视
,EroundSee() {
// var parentEntity = this.viewer.entities.add(new Cesium.Entity()), positions = [], cartesian, polyline;
// this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
// this.handler.setInputAction(evt => {
// cartesian = this.viewer.scene.pickPosition(evt.position);
// // cartesian = this.draw.getCatesian3FromPX(evt.position, this.viewer, []);
// positions.push(cartesian.clone());
// // addCompany.createPoint.call(this, {position: cartesian})
// if(positions.length === 1) {
// this.handler.setInputAction(moveEvent => {
// positions[1] = this.viewer.scene.pickPosition(moveEvent.endPosition);
// // positions[1] = this.draw.getCatesian3FromPX(moveEvent.endPosition, this.viewer, []);
// !polyline && (polyline = addCompany.createPolyline.call(this, positions));
// }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// return;
// }
// this.handler.destroy();
// // console.log(Cesium.Cartesian3.distance(positions[0], positions[1]));
// // var cartesian = this.draw.getCatesian3FromPX(evt.position, this.viewer, []);
// var viewPointEntity = this.viewer.entities.add({
// parent: parentEntity,
// position: positions[0],
// ellipsoid: {
// radii: new Cesium.Cartesian3(5, 5, 5),
// material: Cesium.Color.GREEN
// }
// });
// // // 世界坐标转换为投影坐标
// var webMercatorProjection = new Cesium.WebMercatorProjection(this.viewer.scene.globe.ellipsoid);
// var viewPointWebMercator = webMercatorProjection.project(Cesium.Cartographic.fromCartesian(positions[0]));
// // // 排除碰撞监测的对象
// var objectsToExclude = [viewPointEntity];
// // 目标点集合
// var destPoints = [];
// // 视域点和目标点的距离
// var radius = Cesium.Cartesian3.distance(positions[0], positions[1]); // 视距1000米
// // 计算一圈
// for (var i = 0; i <= 30; i++) {
// // 度数转弧度
// var radians = Cesium.Math.toRadians(i);
// // 计算目标点
// var toPoint = new Cesium.Cartesian3(viewPointWebMercator.x + radius * Math.cos(radians), viewPointWebMercator.y + radius * Math.sin(radians), 10);
// // 投影坐标转世界坐标
// toPoint = webMercatorProjection.unproject(toPoint);
// destPoints.push(Cesium.Cartographic.toCartesian(toPoint.clone()));
// }
// let viewer = this.viewer;
// // 绘制线
// function drawLine(leftPoint, secPoint, color) {
// viewer.entities.add({
// polyline: {
// positions: [leftPoint, secPoint],
// arcType: Cesium.ArcType.NONE,
// width: 5,
// material: color,
// depthFailMaterial: color
// }
// })
// }
// pickFromRay.call(this);
// function pickFromRay() {
// for (var i = 0; i < destPoints.length; i++) {
// // 计算射线的方向,目标点left 视域点right
// var direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(destPoints[i], positions[0], new Cesium.Cartesian3()), new Cesium.Cartesian3());
// console.log(direction);
// // 建立射线
// var ray = new Cesium.Ray(positions[0], direction);
// var result = viewer.scene.pickFromRay(ray, objectsToExclude); // 计算交互点,返回第一个
// showIntersection(result, destPoints[i], positions[0]);
// }
// }
// // 处理交互点
// function showIntersection(result, destPoint, cartesian) {
// // 如果是场景模型的交互点,排除交互点是地球表面
// if (Cesium.defined(result) && Cesium.defined(result.object)) {
// drawLine(result.position, cartesian, Cesium.Color.GREEN); // 可视区域
// drawLine(result.position, destPoint, Cesium.Color.RED); // 不可视区域
// } else {
// drawLine(cartesian, destPoint, Cesium.Color.GREEN);
// }
// }
// this.handler.destroy();
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// this.visual instanceof visual || (this.visual = new visual(this.viewer));
}
// 视域
,Ehorizon(val) {
......@@ -390,11 +306,13 @@
,EallSee(val) {
this[val] = !this[val];
this.onlySelect(val);
this.viewpoint instanceof viewpoint || (this.viewpoint = new viewpoint(this.viewer));
},
// 淹没分析
EymAnslysis(val) {
this[val] = !this[val];
this.onlySelect(val);
this.flood instanceof flood || (this.flood = new flood(this.viewer));
},
// 天际线分析
EtjxAnslysis(val) {
......