Skip to content

刘远 / 3d_dc

Go to a project
Toggle navigation
Toggle navigation pinning
7cb0b2a7 by jikai
Options

111111

1 parent 562b792a
Inline Side-by-side
Showing 1 changed file with 257 additions and 97 deletions
......@@ -29,16 +29,17 @@
<div class="bottomNav">
<bottomNav></bottomNav>
</div>
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
<!-- <el-button @click="testfun" class="testbtn"></el-button> -->
<!-- <el-select @change="selectChanged" class="testbtn">
<el-option v-for="item in devTypes" :key="item" :label="item" :value="item"></el-option>
</el-select> -->
<div id="cesiumContainer">
<div class="" ref="slider"></div>
</div>
</div>
</template>
<script>
import tool from "../assets/js/map/tool";
import measureTools from "../assets/js/map/MeasureTools";
import drawTool from "../assets/js/map/drawTool";
import roller from "../assets/js/map/roller";
import addCompany from '../assets/js/map/addCompany';
import TopTitle from '../components/topTitle';
import rightTopFunc from '../components/rightTopFunc';
......@@ -56,21 +57,32 @@
return {
viewer: undefined,
entity: undefined,
devTypes: ['point', 'polyline', 'polygon']
devTypes: ['point', 'polyline', 'polygon'],
roll: {r: undefined, b: false}
}
},
mounted() {
// ***********************************初始化地图********************************************
Cesium.Ion.defaultAccessToken = this.config.mapToken;
this.viewer = new Cesium.Viewer('cesiumContainer', {
geocoder:true,
timeline:false,
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'
})
});
// ***********************************倾斜摄影加载********************************************
let tileset = new Cesium.Cesium3DTileset({
url : 'http://localhost:9000/model/e44fe150d09b11eaabec1d24e8548b3a/tileset.json',
......@@ -82,81 +94,24 @@
loadSiblings : false,
cullWithChildrenBounds : true
}), height = -2440;
this.viewer.scene.primitives.add(tileset);
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);
this.viewer.zoomTo(tileset);
});
// ***********************************水位********************************************
setTimeout(() => {
var positions = [
101.67468055555556, 36.54803611111111, 101.66768055555556, 36.55503611111111,
101.65068055555556, 36.56403611111111, 101.67468055555556, 36.54803611111111
], waterHeight = 0,
entity = this.viewer.entities.add({
polygon: {
// hierarchy: Cesium.Cartesian3.fromDegreesArray(positions),
hierarchy: [
new Cesium.Cartesian3(-1036931.6607544887,5024383.265188632,3776882.2179509313),
new Cesium.Cartesian3(-1037689.1138430117,5023931.060901769,3777273.070930741),
new Cesium.Cartesian3(-1038031.7922958151,5024211.372681549,3776809.176021656),
new Cesium.Cartesian3(-1037502.0690553376,5024558.056853799,3776495.627250331)
],
material: Cesium.Color.RED.withAlpha(0.5),
extrudedHeight: new Cesium.CallbackProperty(function () {
return waterHeight;
})
}
setTimeout(() => { this.viewer.flyTo(tileset) }, 2000);
});
// this.viewer.zoomTo(entity);
this.viewer.clock.onTick.addEventListener(function () {
if (waterHeight > 250){
waterHeight = 0;
}
waterHeight += 0.1;
})
}, 30000);
// ********************************Draw********************************************
this.draw = new tool.attributes.drawPolt({
viewer: this.viewer
this.draw = new drawTool.drawTool({
viewer: this.viewer,
hasEdit: true,
})
},
methods: {
selectChanged(e) {
this.draw.type[e] || (this.draw.type[e] = new tool.attributes[e]({viewer: this.viewer}));
this.draw.type[e].startCreate();
console.log(this.draw.type[e]);
},
drawShape() {
},
// ly
// rightTopFunc
searchRoat(val) {
/**
* @param {*} val '为地名地址道路的输入值'
......@@ -192,53 +147,177 @@
// 复位
,isReturn(val) {}
// 放大
,enlarge(val) {}
,enlarge() {
this.viewer.camera.zoomIn(300);
}
// 缩小
,narrow(val) {}
,narrow() {
this.viewer.camera.zoomOut(300);
}
// 坐标
,coordinate(val) {}
// 距离
,distance(val) {}
,coordinate() {
}
// 距离
,distance(val) {
new measureTools.measureTools(this.viewer).measurePolyLine();
}
// 面积
,area(val) {}
,area(val) {
new measureTools.measureTools(this.viewer).measurePolygon();
}
// 标记
,marker(val) {}
,marker(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
}
});
}
// 卷帘
,rollerShutter(val) {}
,rollerShutter() {
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
}
// 分屏
,splitScreen(val) {}
,splitScreen() {}
// 指北
,toNorth(val) {}
,toNorth() {}
// 顶视
,topSee(val) {}
,topSee() {}
// 环视
,roundSee(val) {}
,roundSee() {
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);
}
// 视域
,horizon(val) {}
,horizon() {
}
// 通视
,allSee(val) {}
,allSee() {}
}
}
</script>
<style scoped>
<style>
html, body, #cesiumContainer {
height: 100%;
padding: 0;
margin: 0;
}
.testbtn {
.slider {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 30px;
left: 50%;
top: 0px;
background-color: #d3d3d3;
width: 5px;
height: 100%;
z-index: 9999;
}
</style>
.slider:hover {
cursor: ew-resize;
}
<style scoped>
.home {
position: relative;
width: 100%;
......@@ -269,4 +348,85 @@
z-index: 1000;
bottom: 40px;
}
/*leaflet风格气泡窗口样式模板*/
.cesium-popup {
position: absolute;
text-align: center;
}
.cesium-popup-close-button {
position: absolute;
top: 0;
right: 0;
padding: 4px 4px 0 0;
text-align: center;
width: 18px;
height: 14px;
font: 16px/14px Tahoma, Verdana, sans-serif;
color: #c3c3c3;
text-decoration: none;
font-weight: bold;
background: transparent;
}
.cesium-popup-content-wrapper {
text-align: center;
max-height: 200px;
overflow-y: auto;
background: rgba(63, 72, 84, 0.7);
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
padding: 1px;
text-align: left;
border-radius: 4px;
padding: 8px;
}
.cesium-prompt-content-wrapper {
text-align: center;
max-height: 200px;
overflow-y: auto;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
padding: 1px;
text-align: left;
}
.cesium-popup-content {
line-height: 1.4;
}
.cesium-popup-tip-container {
margin: 0 auto;
width: 40px;
height: 20px;
position: relative;
overflow: hidden;
}
.cesium-popup-tip {
background: rgba(63, 72, 84, 0.7);
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
width: 17px;
height: 17px;
padding: 1px;
margin: -10px auto 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.popupContent{
color: white;
}
.promptDiv{
background: rgba(0, 0, 0, 0.4);
font-size: 10px;
}
.promptContent{
color:white;
}
</style>
\ No newline at end of file
......