|
|
@@ -1,360 +0,0 @@
|
|
|
-<template>
|
|
|
- <div id="cesiumContainer2" class="ViewerSplitScreen" style="display: none; border-right: 5rem solid #fff"></div>
|
|
|
- <div id="cesiumContainer" class="jt-map" ref="cesiumContainer">
|
|
|
- <div class="back"></div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import {
|
|
|
- Store
|
|
|
- } from '@/store/index'
|
|
|
- let store = Store();
|
|
|
-
|
|
|
- import map_xzqh_zj from '@/assets/dataFile/map_xzqh_zj.json';
|
|
|
-
|
|
|
- let jt3d = undefined;
|
|
|
- export default {
|
|
|
-
|
|
|
- /* 数据 */
|
|
|
- data() {
|
|
|
- return {
|
|
|
- LocateId: 'locate_ID_remove', //标记定位所用ID
|
|
|
- entity: ''
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /* 方法 */
|
|
|
- methods: {
|
|
|
- //定位方法
|
|
|
- startLocation() {
|
|
|
- let that = this
|
|
|
- plusGPSListenerOn(function(lat, lon) {
|
|
|
- console.log('位置坐标', lat, lon)
|
|
|
- let terrainProvider = jt3d._viewer.terrainProvider;
|
|
|
- //异步函数
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- lon = Number(lon)
|
|
|
- lat = Number(lat)
|
|
|
- let promise = new Cesium.sampleTerrainMostDetailed(terrainProvider, [Cesium
|
|
|
- .Cartographic.fromDegrees(lon, lat)
|
|
|
- ]);
|
|
|
- promise.then(function(updatedPositions) {
|
|
|
- if (that.entity) {
|
|
|
- jt3d._viewer.entities.remove(that.entity)
|
|
|
- }
|
|
|
- // if that.entity && jt3d._viewer.entities.remove(that.entity)
|
|
|
- console.log('高度', updatedPositions[0].height)
|
|
|
- let height = updatedPositions[0].height
|
|
|
-
|
|
|
- that.entity = new Cesium.Entity({
|
|
|
- name: "add billboard",
|
|
|
- //位置
|
|
|
- position: Cesium.Cartesian3.fromDegrees(lon, lat, height),
|
|
|
- //图片标签
|
|
|
- billboard: {
|
|
|
- image: 'jt3dSDK/imgs/point/point.png',
|
|
|
- horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平
|
|
|
- verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直位置
|
|
|
- // scale: billboard.scale, //尺寸
|
|
|
- // pixelOffset: new Cesium.Cartesian2(0, billboard.pixelOffset),
|
|
|
- disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
|
|
- scale: 1,
|
|
|
- scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1, 2400, 0) //按距离缩放，即距离大于180米时，图标不显示 Cesium.NearFarScalar(near, nearValue, far, farValue)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
|
|
|
- }
|
|
|
- });
|
|
|
- jt3d._viewer.entities.add(that.entity, {
|
|
|
- range: 1000
|
|
|
- });
|
|
|
-
|
|
|
- // let LocateNowTime = jt3d.PointObject.addBillboard([lon, lat,height], {
|
|
|
- // // id: that.LocateId
|
|
|
- // })
|
|
|
- // LocateNowTime.then(entity => {
|
|
|
- // that.entity = entity
|
|
|
- // })
|
|
|
- resolve(updatedPositions);
|
|
|
- });
|
|
|
- })
|
|
|
- // let getHeight = new that.jt3dSDK.common.getHeigthByPointsMostDetailed(jt3d._viewer,[[lon,lat]])
|
|
|
- // getHeight.then(height=>{
|
|
|
- // // if that.entity && jt3d._viewer.entities.remove(that.entity)
|
|
|
- // console.log('高度',height)
|
|
|
- // let LocateNowTime = jt3d.PointObject.addBillboard([lon,lat,height],{
|
|
|
- // id:that.LocateId
|
|
|
- // })
|
|
|
- // LocateNowTime.then(entity=>{
|
|
|
- // that.entity = entity
|
|
|
- // })
|
|
|
- // })
|
|
|
- });
|
|
|
- },
|
|
|
- /**
|
|
|
- * 初始化
|
|
|
- */
|
|
|
- init(el) {
|
|
|
- //初始化大球
|
|
|
- this.initMap3d(el);
|
|
|
-
|
|
|
- //设置默认视图
|
|
|
- this.setView(jt3d);
|
|
|
-
|
|
|
- // 初始化项目区域范围视角
|
|
|
- this.fullMap(jt3d);
|
|
|
-
|
|
|
- //加载天空盒子
|
|
|
- this.addSkybox(jt3d);
|
|
|
-
|
|
|
- //调用父组件的方法，onload是在父组件的的动态组件component上面的方法,并将jt3d传过去
|
|
|
- this.$emit("onload", jt3d);
|
|
|
- // console.log(this.$parent)
|
|
|
- this.$parent.jtMap3DOnload(jt3d);
|
|
|
-
|
|
|
- //单击事件
|
|
|
- // this.clickEntity(jt3d);
|
|
|
-
|
|
|
- //添加镇街边界线——精灵线
|
|
|
- // this.addBoundaryLine(jt3d);
|
|
|
-
|
|
|
- },
|
|
|
- /**
|
|
|
- * 添加镇街边界线——精灵线
|
|
|
- */
|
|
|
- addBoundaryLine(jt3d) {
|
|
|
- jt3d.PolylineObject.drawPolylineByGeoJson(map_xzqh_zj, {
|
|
|
- width: 5,
|
|
|
- color: '#04FFFF',
|
|
|
- isImageAlpha: true, //用图片自带颜色
|
|
|
- duration: 3000,
|
|
|
- imgUrl: "/jt3dSDK/imgs/polylinematerial/spriteline1.png"
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 单击事件
|
|
|
- */
|
|
|
- clickEntity(jt3d) {
|
|
|
-
|
|
|
- let _self = this;
|
|
|
-
|
|
|
- if (jt3d.handlerLeftClick) {
|
|
|
- jt3d.handlerLeftClick.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); //移除事件
|
|
|
- }
|
|
|
-
|
|
|
- jt3d.handlerLeftClick = new Cesium.ScreenSpaceEventHandler(
|
|
|
- jt3d._viewer.scene.canvas
|
|
|
- );
|
|
|
- //注册大球单机事件
|
|
|
- jt3d.handlerLeftClick.setInputAction(function(e) {
|
|
|
- var pick = jt3d._viewer.scene.pick(e.position); //拾取当前的entity对象
|
|
|
- var cartesian = jt3d._viewer.scene.pickPosition(e.position); //获取当前点坐标
|
|
|
- if (Cesium.defined(cartesian)) {
|
|
|
- //将笛卡尔坐标转换为地理坐标
|
|
|
- let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
|
|
- //将弧度转为度的十进制度表示
|
|
|
- let lng = Cesium.Math.toDegrees(cartographic.longitude);
|
|
|
- let lat = Cesium.Math.toDegrees(cartographic.latitude);
|
|
|
- let alt = cartographic.height; //高度
|
|
|
-
|
|
|
- _self.$parent.$refs._refQueryGraphics.initQuery({
|
|
|
- spatialType: '点',
|
|
|
- coordinate: lng + " " + lat,
|
|
|
- buffer: ''
|
|
|
- });
|
|
|
- }
|
|
|
- }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 创建大球
|
|
|
- */
|
|
|
- initMap3d(el) {
|
|
|
-
|
|
|
- jt3d = new this.jt3dSDK.jtMap3d({
|
|
|
- container: el,
|
|
|
- });
|
|
|
-
|
|
|
- jt3d.statusBar.show = true;
|
|
|
-
|
|
|
- jt3d.layer = new this.jt3dSDK.layer(jt3d._viewer);
|
|
|
-
|
|
|
- jt3d.CommonTools = new this.jt3dSDK.CommonTools(jt3d._viewer, {
|
|
|
- isClear: false,
|
|
|
- isDrawPoint: true,
|
|
|
- isRetainDrawPoint: false,
|
|
|
- iconType: 'blue',
|
|
|
- });
|
|
|
- jt3d.SketchViewModel = new this.jt3dSDK.SketchViewModel(jt3d._viewer, {
|
|
|
- isClear: true,
|
|
|
- isDrawPoint: false,
|
|
|
- isRetainDrawPoint: false,
|
|
|
- iconType: 'blue',
|
|
|
- });
|
|
|
- jt3d.DrawTools = new this.jt3dSDK.DrawTools(jt3d._viewer, {
|
|
|
- isDrawPoint: true, //是否标记参考点
|
|
|
- isRetainDrawPoint: false, //绘制完成是否保留绘制点
|
|
|
- iconType: 'blue',
|
|
|
- });
|
|
|
- jt3d.DrawToolsEdit = new this.jt3dSDK.DrawTools(jt3d._viewer, {
|
|
|
- isDrawPoint: true, //是否标记参考点
|
|
|
- isRetainDrawPoint: true, //绘制完成是否保留绘制点
|
|
|
- iconType: 'blue',
|
|
|
- });
|
|
|
- jt3d.DrawMilitaryPlot = new this.jt3dSDK.DrawMilitaryPlot(jt3d._viewer);
|
|
|
-
|
|
|
- jt3d.LocateUtil = new this.jt3dSDK.LocateUtil(jt3d._viewer);
|
|
|
-
|
|
|
- // jt3d.getHeigthByLngLat = new this.jt3dSDK.getHeigthByLngLat(jt3d._viewer) //获取高度
|
|
|
-
|
|
|
- jt3d.SpatialAnalysis = {};
|
|
|
- jt3d.SpatialAnalysis.SightLine = new this.jt3dSDK.SpatialAnalysis.SightLine(jt3d._viewer);
|
|
|
- jt3d.SpatialAnalysis.ViewShed = new this.jt3dSDK.SpatialAnalysis.ViewShed(jt3d._viewer);
|
|
|
- jt3d.SpatialAnalysis.SunshineShadow = new this.jt3dSDK.SpatialAnalysis.SunshineShadow(jt3d._viewer);
|
|
|
- jt3d.SpatialAnalysis.Profile = new this.jt3dSDK.SpatialAnalysis.Profile(jt3d._viewer);
|
|
|
- jt3d.SpatialAnalysis.CutFill = new this.jt3dSDK.SpatialAnalysis.CutFill(jt3d._viewer);
|
|
|
- jt3d.SpatialAnalysis.HeightLimit = new this.jt3dSDK.SpatialAnalysis.HeightLimit(jt3d._viewer);
|
|
|
- jt3d.SpatialAnalysis.Cutting = new this.jt3dSDK.SpatialAnalysis.Cutting(jt3d._viewer);
|
|
|
- jt3d.SpatialAnalysis.GeologyClipPlan = new this.jt3dSDK.SpatialAnalysis.GeologyClipPlan(jt3d._viewer);
|
|
|
-
|
|
|
- jt3d.TerrainAnalysis = {};
|
|
|
- jt3d.TerrainAnalysis.TerrainExcavation = new this.jt3dSDK.TerrainAnalysis.TerrainExcavation(jt3d._viewer);
|
|
|
- jt3d.TerrainAnalysis.SlopeAspect = new this.jt3dSDK.TerrainAnalysis.SlopeAspect(jt3d._viewer);
|
|
|
-
|
|
|
- jt3d.SceneEffects = {};
|
|
|
- jt3d.SceneEffects.Weather = new this.jt3dSDK.SceneEffects.Weather(jt3d._viewer);
|
|
|
- jt3d.SceneEffects.SkyBox = new this.jt3dSDK.SceneEffects.SkyBox(jt3d._viewer);
|
|
|
- jt3d.SceneEffects.ParticleSystem = new this.jt3dSDK.SceneEffects.ParticleSystem(jt3d._viewer);
|
|
|
-
|
|
|
- jt3d.TrackRoam = new this.jt3dSDK.TrackRoam(jt3d._viewer);
|
|
|
- jt3d.PolylineObject = new this.jt3dSDK.PolylineObject(jt3d._viewer);
|
|
|
- jt3d.PointObject = new this.jt3dSDK.PointObject(jt3d._viewer);
|
|
|
- jt3d.PolygonObject = new this.jt3dSDK.PolygonObject(jt3d._viewer);
|
|
|
-
|
|
|
- window["viewer"] = jt3d._viewer;
|
|
|
- window["viewer"].scene.terrainExaggeration = 100;
|
|
|
-
|
|
|
- //显示帧率
|
|
|
- window["viewer"].scene.debugShowFramesPerSecond = true;
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- /**
|
|
|
- * 设置默认视图-初始化中国区域范围视角
|
|
|
- */
|
|
|
- setView(jt3d) {
|
|
|
- // jt3d.flytoChina();
|
|
|
-
|
|
|
- //初始化中国区域范围视角
|
|
|
- jt3d.setViewChina();
|
|
|
-
|
|
|
- // jt3d.setView({
|
|
|
- // longitude: 103.84, //经度
|
|
|
- // latitude: 31.15, // 维度
|
|
|
- // height: 24000000, // 高度
|
|
|
- // heading: 0, // 偏航
|
|
|
- // pitch: -90, // 俯仰，人如果在赤道上空，俯仰角为0可见地球。如果在北纬，俯仰角为负才能见地球
|
|
|
- // roll: 0.0 // 翻滚
|
|
|
- // });
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 全图-飞行到项目区域范围视角
|
|
|
- */
|
|
|
- fullMap(jt3d) {
|
|
|
- // 初始化项目区域范围视角
|
|
|
- let optionsS = {
|
|
|
- west: 118.69586,
|
|
|
- south: 35.91360,
|
|
|
- east: 122.70061,
|
|
|
- north: 38.65489,
|
|
|
- isRemove: false, //定位完成后是否删除
|
|
|
- duration: 3, //飞行时间
|
|
|
- heading: 0,
|
|
|
- pitch: -90,
|
|
|
- range: 315000
|
|
|
- };
|
|
|
-
|
|
|
- let optionsE = {
|
|
|
- west: 118.69586,
|
|
|
- south: 35.91360,
|
|
|
- east: 122.70061,
|
|
|
- north: 38.65489,
|
|
|
- isRemove: true, //定位完成后是否删除
|
|
|
- duration: 3, //飞行时间
|
|
|
- heading: 0,
|
|
|
- pitch: -60,
|
|
|
- range: 315000
|
|
|
- };
|
|
|
-
|
|
|
- var fullMapPromise = jt3d.fullMap(optionsS);
|
|
|
- fullMapPromise.then(function(flyPromise) {
|
|
|
- jt3d.fullMap(optionsE);
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 设置天空盒子
|
|
|
- */
|
|
|
- addSkybox(jt3d) {
|
|
|
- //设置天空盒子,默认蓝天
|
|
|
- jt3d.SceneEffects.SkyBox.setGroundSkyBox();
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- mounted() {
|
|
|
-
|
|
|
- this.init("cesiumContainer");
|
|
|
- // if (store.userport == 'APP') {
|
|
|
- // setTimeout(res => {
|
|
|
- // this.startLocation()
|
|
|
- // }, 100)
|
|
|
- // setTimeout(res => {
|
|
|
- // jt3d.LocateUtil.flyToEntity(this.entity)
|
|
|
- // }, 10000)
|
|
|
- // }
|
|
|
- }
|
|
|
- };
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .lk-status-bar {
|
|
|
- font-size: 16rem !important;
|
|
|
- }
|
|
|
-
|
|
|
- .back{
|
|
|
- background: url('@/assets/images/backImgshort.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- pointer-events: none;
|
|
|
- position: absolute;
|
|
|
- z-index: 10;
|
|
|
- // background-color: rgba(0,0,0,0);
|
|
|
- // opacity: 0.1;
|
|
|
- }
|
|
|
-
|
|
|
- .jt-map {
|
|
|
- // width: calc(100% - 0rem);
|
|
|
- // height: calc(100vh - 70rem);
|
|
|
- height: 100vh;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- overflow: hidden;
|
|
|
- background-color: blue;
|
|
|
- border: 0rem solid red;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- //分屏样式
|
|
|
- .ViewerSplitScreen {
|
|
|
- float: left;
|
|
|
- width: calc(50% - 2.5rem);
|
|
|
- // height: calc(100vh - 70rem);
|
|
|
- height: 100vh;
|
|
|
- margin: 0;
|
|
|
-
|
|
|
- .lk-status-bar {
|
|
|
- width: calc(50% - 0rem) !important;
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
DESKTOP-GBVU60Q\dell
