123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269 |
- <script setup>
- </script>
- <template>
- <div id="cesiumContainer" class="jt-map"></div>
- <div id="cesiumContainer2" class="mapview" style="display: none;"></div>
- </template>
- <script>
- import * as jt3dSDK from '@/jtMap3d/index.js';
- import jt3dNavigation from "cesium-navigation-es6";
- let jt3d = undefined;
- export default {
- /* 数据 */
- data() {
- return {
- name: "jt-map3d",
- }
- },
- /* 方法 */
- methods: {
- /**
- * 初始化
- */
- init(el) {
- //初始化大球
- this.initMap3d(el);
- //设置默认视图
- this.setView(jt3d);
- // 初始化项目区域范围视角
- this.fullMap(jt3d);
- //加载天空盒子
- this.addSkybox(jt3d);
- // 比例尺、指南针
- this.initNavigation();
- //单击事件
- // this.clickEntity(jt3d);
- //调用父组件的方法,onload是在父组件的的动态组件component上面的方法,并将jt3d传过去
- this.$emit("onload", jt3d);
- // console.log('this.$parent',this.$parent)
- // this.$parent.jtMap3DOnload(jt3d);
- },
- /**
- * 单击事件
- */
- clickEntity() {
- let _self = this;
- if (jt3d.handlerLeftClick) {
- jt3d.handlerLeftClick.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); //移除事件
- }
- jt3d.handlerLeftClick = new Cesium.ScreenSpaceEventHandler(
- window.viewer.scene.canvas
- );
- //注册大球单机事件
- jt3d.handlerLeftClick.setInputAction(function(e) {
- var pick = window.viewer.scene.pick(e.position); //拾取当前的entity对象
- var cartesian = window.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 jt3dSDK.jtMap3d({
- container: el,
- });
- jt3d.statusBar.show = true;
- window.viewer = jt3d._viewer;
- // this.statusBar = new jt3dSDK.StatusBar(window.viewer);
- // this.statusBar.show = 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: 121.563298,
- south: 37.284514,
- east: 121.565298,
- north: 37.286514,
- isRemove: false, //定位完成后是否删除
- duration: 3, //飞行时间
- heading: 0,
- pitch: -90,
- range: 115000
- };
- let optionsE = {
- west: 121.563298,
- south: 37.284514,
- east: 121.565298,
- north: 37.286514,
- isRemove: true, //定位完成后是否删除
- duration: 3, //飞行时间
- heading: 0,
- pitch: -60,
- range: 115000
- };
- var fullMapPromise = jt3d.fullMap(optionsS);
- fullMapPromise.then(function(flyPromise) {
- jt3d.fullMap(optionsE);
- });
- },
- /**
- * 设置天空盒子
- */
- addSkybox(jt3d) {
- //设置天空盒子,默认蓝天
- this.SceneEffects = new jt3dSDK.SceneEffects.SkyBox(window.viewer);
- this.SceneEffects.setGroundSkyBox();
- },
- /**
- * 比例尺、指南针
- * @param {Object} options 具有以下属性:
- * @param {Number} options.longitude 经度,以度为单位
- * @param {Number} options.latitude 纬度,以度为单位
- * @param {Number} [options.height=0.0] 椭球的高度,以米为单位
- * @param {Number} [options.heading=0.0] 指向,默认值0.0(北)
- * @param {Number} [options.pitch=-90] 视角,默认值-90(向下看)。俯仰,人如果在赤道上空,俯仰角为0可见地球。如果在北纬,俯仰角为负才能见地球
- * @param {Number} [options.roll=0.0] 翻滚
- * @param {Number} [options.enableCompass=true] 用于启用或禁用罗盘。true是启用罗盘,false是禁用罗盘。默认值为true。如果将选项设置为false,则罗盘将不会添加到地图中。
- * @param {Number} [options.enableZoomControls=true] 用于启用或禁用缩放控件。true是启用,false是禁用。默认值为true。如果将选项设置为false,则缩放控件将不会添加到地图中。
- * @param {Number} [options.enableDistanceLegend=true] 用于启用或禁用距离图例。true是启用,false是禁用。默认值为true。如果将选项设置为false,距离图例将不会添加到地图中。
- * @param {Number} [options.enableCompassOuterRing=true] 用于启用或禁用指南针外环。true是启用,false是禁用。默认值为true。如果将选项设置为false,则该环将可见但无效。
- */
- initNavigation() {
- let options = {};
- // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
- options.defaultResetView = Cesium.Rectangle.fromDegrees(121.13766, 36.99670, 121.94984, 37.55286);
- // options.defaultResetView = Cesium.Cartographic(103.84,31.15,24000000);
- // options.defaultResetView = Cesium.Cartographic.fromDegrees(jtMap3dBase.Math.toRadians(103.84), Cesium.Math.toRadians(31.15), 24000000);
- options.orientation = {
- heading: Cesium.Math.toRadians(0),
- pitch: Cesium.Math.toRadians(-90),
- roll: 0,
- }
- //相机延时
- options.duration = 4 //默认为3s
- // 用于启用或禁用罗盘。
- options.enableCompass = true;
- // 用于启用或禁用指南针外环。
- options.enableCompassOuterRing = true;
- // 用于启用或禁用缩放控件。
- options.enableZoomControls = true;
- // 用于启用或禁用距离图例。
- options.enableDistanceLegend = false;
- //修改重置视图的tooltip
- options.resetTooltip = "重置视图";
- //修改放大按钮的tooltip
- options.zoomInTooltip = "放大";
- //修改缩小按钮的tooltip
- options.zoomOutTooltip = "缩小";
- //如需自定义罗盘控件,请看下面的自定义罗盘控件
- new jt3dNavigation(window.viewer, options);
- },
- /**
- * 地图绕点自旋
- */
- setMapSpin() {
- //移除左键单击事件
- if (jt3d.handlerLeftClick) {
- jt3d.handlerLeftClick.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
- }
- let SketchViewModel = new jt3dSDK.SketchViewModel(window.viewer, {
- isClear: true,
- isDrawPoint: false, //是否标记参考点
- isRetainDrawPoint: false, //绘制完成是否保留绘制点
- iconType: 'blue',
- }, );
- SketchViewModel.sketchTools('point', {
- onComplete(cPoint, gPoint) {
- jt3d.setMapSpinByPoint(cPoint, {
- // height: 100000
- });
- },
- onError(message) {}
- });
- },
- /**
- * 地图指北
- */
- setMapNorth() {
- jt3d.setMapNorth();
- jt3d.isSpan = false;
- },
- },
- mounted() {
- this.init("cesiumContainer");
- let mapView1 = document.getElementById("cesiumContainer");
- var canvas = window.viewer.canvas; // 获取画布
- console.log('画布', canvas.width)
- }
- };
- </script>
- <style scoped>
- #cesiumContainer {
- height: 100vh;
- margin: 0;
- padding: 0;
- border: 0px solid red;
- }
- </style>
|