jtBaseApp/src/components/CrMap/CrMap.vue

<template>
	<div id="cesiumContainer" class="jt-map"></div>
	<div class="jt-map-tools">
		<button @click="openFloatLayer()">打开浮动图层</button>
		<button @click="closeFloatLayer()">关闭浮动图层</button>
	</div>
</template>
<script setup>
import { param } from 'jquery';
import { defineExpose, onMounted, getCurrentInstance } from 'vue';
/* 注册方法 */
const emit = defineEmits(['onEditProperty']);

import { CrMap } from './CrMap.js';
import CommonTools from './CommonTools.js';
import { SketchViewModel } from './SketchViewModel.js';

import { DrawTools } from './DrawTools.js';

import { point } from '@turf/turf';
const { proxy } = getCurrentInstance();
/* 组件对外提供的方法 */
defineExpose({
	/* 长度测量方法 */
	onMeasureLength: function() {
		proxy.commonTools.measureLength();
	},
	/* 面积测量方法 */
	onMeasureArea: function() {
		proxy.commonTools.measureArea();
	},
	/* 测量高度方法 */
	onMeasureHeight: function() {
		proxy.commonTools.measureHeight();
	},
	/* 空间测距 */
	onMeasureSpatialLength: function() {
		proxy.commonTools.measureSpatialLength();
	},
	/* 三角测量 */
	onMeasureTriangle: function() {
		proxy.commonTools.measureTriangle();
	},
	/* 清理资源 */
	onToolsClear: function() {
		proxy.commonTools.clear();
	},
	/* 区域查询 */
	onQueryByPolygon: function() {
		proxy.commonTools.queryByPolygon(function(res) {
			console.log('坐标串', res);
		});
	},
	/* 点查询 */
	onQueryByPoint: function() {
		proxy.commonTools.queryByPoint(function(res) {
			console.log('坐标串', res);
		});
	},
	/* 多点查询 */
	onQueryByMultiplePoint: function() {
		proxy.commonTools.queryByMultiplePoint(function(res) {
			console.log('坐标数组', res);
		});
	},
	/**
	 * 线查询
	 */
	onQueryByLine: function() {
		proxy.commonTools.queryByLine(function(res) {
			console.log('坐标串', res);
		});
	},
	/**
	 * 圆查询
	 */
	onQueryByCircle: function() {
		proxy.commonTools.queryByCircle(function(center, radius) {
			console.log('中心点及半径', center, radius);
		});
	},
	/**
	 * 矩形查询
	 */
	onQueryByRectangle: function() {
		proxy.commonTools.queryByRectangle(function(res) {
			console.log('坐标串', res);
		});
	},

	/* 绘制体 */
	onDrawPolygonBody: function() {
		proxy.commonTools.drawPolygonBody(function() {});
	},

	/* 拾取物体 */
	onPickPolygonBody: function(callComplete) {
		proxy.commonTools.pickPolygonBody(function(res) {
			if (res != undefined) callComplete(res);
		});
	},

	/**
	 * 设置拾取的体对象样式及高度
	 * @@param {JSON} options 配置项
	 * @param {Array<Number>} options.color 颜色[0~~255,0~255,0~255,0~1]
	 * @param {Number} options.height 高度
	 * @param {Function} options.onComplete(message) 完成回调,如果message为undefined则代表成功，否则为失败消息
	 */
	onSetPolygonBody: function(options) {
		proxy.commonTools.setPolygonBody({
			color: options.color,
			height: options.height,
			onComplete: options.onComplete
		});
	},

	/**
	 * 移除拾取的体对象
	 * @param {Function} onComplete(message) 完成回调，message为undifined为成功，否则为失败消息
	 */
	onRemovePolygonBody: function(onComplete) {
		proxy.commonTools.removePolygonBody(onComplete);
	},

	/* 测试工具 */
	onTestDemo: function() {
		let cameraViewer = {
			lng: 118.22480916041573,
			lat: 35.140818266338854,
			alt: 164.9208475038474,
			pitch: -40.80823993511622,
			heading: 1.717840652315993,
			roll: 359.9998582097622
		};

		proxy.CMapApi.cameraFlyToo(cameraViewer);

		proxy.commonTools.testDemo();
	},
	/**
	 * 获取相机视角
	 */
	onGetCameraViewer: function() {
		let param = proxy.CMapApi.getCameraViewParams();
		console.log('相机视角', JSON.stringify(param));
	},

	/**
	 * 绘制要素
	 * @param {Array<Number>} points 经纬度点集合
	 */
	onDrawFeacture: function(points) {
		proxy.commonTools.drawPolygonFeacture(points);
	},

	/**
	 * 清除绘制内容
	 */
	onClearDraw: function() {
		proxy.drawTools.Clear();
	},

	/**
	 * 鼠标点击绘制可编辑贴地线
	 */
	onMouseDrawEditLine: function() {
		proxy.drawTools.draw(DrawTools.DrawType.Polyline, {
			isEdit: true
		});
	},

	/**
	 * 鼠标点击绘制可编辑贴地箭头线
	 */
	onMouseDrawEditArrowLine: function() {
		proxy.drawTools.draw(DrawTools.DrawType.ArrowPolyline, {
			isEdit: true
		});
	},

	/**
	 * 鼠标点击绘制可编辑贴地发光线
	 */
	onMouseDrawEditGrawLine: function() {
		proxy.drawTools.draw(DrawTools.DrawType.GrowPolyline, {
			isEdit: true
		});
	},

	/**
	 * 鼠标点击绘制可编辑贴地动态
	 */
	onMouseDrawEditDynamicLine: function() {
		proxy.drawTools.draw(DrawTools.DrawType.DynamicPolyline, {
			isEdit: true
		});
	},

	/**
	 * 鼠标点击绘制可编辑贴地描边线
	 */
	onMouseDrawEditOutlineLine: function() {
		proxy.drawTools.draw(DrawTools.DrawType.OultliePolyline, {
			isEdit: true
		});
	},

	/**
	 * 鼠标点击绘制可编辑贴地面
	 */
	onMouseDrawEditPolygon: function() {
		proxy.drawTools.draw(DrawTools.DrawType.Polygon, {
			isEdit: true
		});
	},

	/**
	 * 鼠标点击绘制可编辑矩形
	 */
	onMouseDrawEditRectangle: function() {
		proxy.drawTools.draw(DrawTools.DrawType.Rectangle, {
			isEdit: true
		});
	},

	/**
	 * 鼠标点击绘制可编辑圆
	 */
	onMouseDrawEditCircle: function() {
		proxy.drawTools.draw(DrawTools.DrawType.Circle, {
			isEdit: true
		});
	},

	/**
	 * 鼠标点击绘制可编辑动态墙
	 */
	onMouseDrawDynamicEditWall: function() {
		proxy.drawTools.draw(DrawTools.DrawType.DynamicWall, {
			isEdit: true
		});
	},

	/**
	 * 鼠标点击绘制可编辑颜色墙
	 */
	onMouseDrawColorEditWall: function() {
		proxy.drawTools.draw(DrawTools.DrawType.NormalWall, {
			isEdit: true
		});
	},

	/**
	 * 鼠标点击绘制可编辑文字墙
	 */
	onMouseDrawEditText: function() {
		proxy.drawTools.draw(DrawTools.DrawType.TextWall, {
			isEdit: true
		});
	},

	/**
	 * 绘制可编辑动态圆
	 */
	onMouseDrawDynamicCircle: function() {
		proxy.drawTools.draw(DrawTools.DrawType.DynamicCircle, {
			isEdit: true
		});
	},

	/**
	 * 绘制可编辑体
	 */
	onMoouseDrawPolygonBody: function() {
		proxy.drawTools.draw(DrawTools.DrawType.House, {
			isEdit: true
		});
	},

	/**
	 * 绘制视频墙
	 */
	onMouseDrawEditVideoWall: function() {
		proxy.drawTools.draw(DrawTools.DrawType.VideoWall, {
			isEdit: true
		});
	},

	/**
	 * 绘制空间线
	 */
	onMouseDrawEditSpatialPolyline: function() {
		proxy.drawTools.draw(DrawTools.DrawType.SpatialLine, {
			isEdit: true
		});
	},

	/**
	 * 绘制OD线
	 */
	onMouseDrawEditOdline: function() {
		proxy.drawTools.draw(DrawTools.DrawType.OdLine, {
			isEdit: true
		});
	},

	/**
	 * 更新墙属性
	 * @param {JSON} params 参数配置项
	 */
	onSubmitEditProperty: function(params) {
		proxy.drawTools.updateEditEntityProperty(params);
	},

	/**
	 * 删除当前编辑的实体
	 */
	onRemoveEditEntity: function() {
		proxy.drawTools.removeEditEntity();
	},

	/**
	 * 旋转实体
	 */
	onRotationEntity: function() {
		proxy.drawTools.rotationEntity({
			x: 90,
			y: 0,
			z: 0
		});
	}
});

const openFloatLayer = function() {
	/* 添加网格地图 */
	window['floatGHT'].show();
};

const closeFloatLayer = function() {
	console.log(window['floatGHT']);
	window['floatGHT'].hide();
};

/* 初始化 */
onMounted(() => {
	let _self = proxy;
	proxy.CMapApi = new CrMap({
		selector: 'cesiumContainer',
		sourcePath: './resource/'
	});

	/* 创建工具集 */
	proxy.commonTools = new CommonTools(proxy.CMapApi.getViewer(), {
		isClear: false
	});

	/* 创建绘制类工具 */
	proxy.sketchViewModel = new SketchViewModel(proxy.CMapApi.getViewer(), {
		iconType: SketchViewModel.SketchIconType.Blue,
		isDrawPoint: true,
		isRetainDrawPoint: true
	});

	/* 创建绘制类工具 */
	proxy.drawTools = new DrawTools(proxy.CMapApi.getViewer(), {
		iconType: DrawTools.IconType.Blue,
		isDrawPoint: true,
		isRetainDrawPoint: true
	});

	/* 创建监听 */
	proxy.drawTools.onEditProperty = param => {
		// console.log('===调用编辑代理>>>', param);
		emit('onEditProperty', param);
	};

	/* 添加暗夜版图层 */
	proxy.CMapApi.addLayer({
		layId: 'mapbox',
		layName: '暗夜版底图',
		layType: CrMap.LayerType.mapboxLayer,
		isShow: true,
		config: {}
	});

	/* 添加模版影像地图 */
	// proxy.CMapApi.addLayer({
	// 	layId: 'tileGrid',
	// 	layName: '网格',
	// 	layType: CrMap.LayerType.tileGridLayer,
	// 	isShow: true,
	// 	config: {}
	// });

	/* 添加实景地图 */
	proxy.CMapApi.addLayer({
		layId: 'yt3d',
		layName: '烟台实景',
		layType: CrMap.LayerType.tilesetsLayer,
		isShow: true,
		config: {
			url: ['http://218.59.194.82:13080/crdata/sdly/crtiles/tileset.json', 'http://218.59.194.82:13080/crdata/sdyt/crtile/zxc/1tiles/tileset1.json']
		}
	});

	/* 添加实景地图 */
	proxy.CMapApi.addLayer({
		layId: 'qp3d01',
		layName: '牟平三维',
		layType: CrMap.LayerType.tilesetsLayer,
		isShow: true,
		config: {
			url: ['http://218.59.194.82:13480/ytmp/3dtiles/shijing/1/tileset1.json'],
			offsetHeight: 10
		}
	});

	// /* 添加实景地图 */
	// proxy.CMapApi.addLayer({
	// 	layId: 'lsq3d',
	// 	layName: '兰山区实景',
	// 	layType: CrMap.LayerType.tilesetsLayer,
	// 	isShow: true,
	// 	config: {
	// 		url: [
	// 			'http://218.59.194.82:13080/crdata/sdly/crtiles/tileset.json',
	// 			'http://218.59.194.82:13080/crdata/lyls/tiles/tileset.json',
	// 			'http://218.59.194.82:13080/crdata/lyls/3Dtiles/tileset.json'
	// 		]
	// 	}
	// });

	//http://10.88.77.134/lyls/3Dtiles/tileset.json
	// 'http://218.59.194.82:13080/crdata/sdly/crtiles/tileset.json',
	// 'http://218.59.194.82:13080/crdata/lyls/tiles/tileset.json',
	// 'http://218.59.194.82:13080/crdata/lyls/3Dtiles/tileset.json'

	/* 添加影像图 */
	proxy.CMapApi.addLayer({
		layId: 'yxt',
		layName: '影像图',
		layType: CrMap.LayerType.wmtsLayer,
		isShow: true,
		config: {
			url: 'http://218.59.194.74:6080/arcgis/rest/services/LYLSQ_YX_102100_202112/MapServer/WMTS'
		}
	});

	/* 添加模版影像地图 */
	// proxy.CMapApi.addLayer({
	// 	layId: 'mpYxt',
	// 	layName: '牟平影像图',
	// 	layType: CrMap.LayerType.templateLayer,
	// 	isShow: true,
	// 	config: {
	// 		url: 'http://202.102.167.52:16282/geoserver/gwc/service/tms/1.0.0/ytmp%3Atdt@EPSG%3A900913@png/{z}/{x}/{reverseY}.png',
	// 		minimumLevel: 0,
	// 		maximumLevel: 18
	// 	}
	// });

	/* 添加网格地图 */
	// proxy.CMapApi.addLayer({
	// 	layId: 'floatGHT',
	// 	layName: '浮动规划图',
	// 	layType: CrMap.LayerType.floatLayer,
	// 	isShow: true,
	// 	config: {
	// 		providerType: 'ArcGisMapServerImageryProvider',
	// 		url: 'http://218.59.194.74:6080/arcgis/rest/services/LYLSQ_GHT_102100_202112/MapServer',
	// 		// url: 'http://218.59.194.82:6080/arcgis/rest/services/LSQZRZY_RE_WEB_V1/MapServer',
	// 		// layers: '24',
	// 		opacity: 0.45
	// 	}
	// });

	// proxy.CMapApi.addLayer({
	// 	layId: 'floatGHT',
	// 	layName: '浮动规划图',
	// 	layType: CrMap.LayerType.floatLayer,
	// 	isShow: true,
	// 	config: {
	// 		providerType: 'ArcGisMapServerImageryProvider',
	// 		url: 'http://218.59.194.74:6080/arcgis/rest/services/LYLSQ_YX_102100_202112/MapServer',
	// 		// url: 'http://218.59.194.82:6080/arcgis/rest/services/LSQZRZY_RE_WEB_V1/MapServer',
	// 		// layers: '24',
	// 		opacity: 1.0
	// 	}
	// });

	/* 添加网格地图 */
	// proxy.CMapApi.addLayer({
	// 	layId: 'floatGHT',
	// 	layName: '浮动规划图',
	// 	layType: CrMap.LayerType.floatLayer,
	// 	isShow: true,
	// 	config: {
	// 		providerType: 'UrlTemplateImageryProvider',
	// 		// url: 'http://202.102.167.52:16282/geoserver/gwc/service/tms/1.0.0/ytmp%3Amap_zrzy_trfhl@EPSG%3A900913@png/{z}/{x}/{reverseY}.png',
	// 		url: 'http://202.102.167.52:16282/geoserver/gwc/service/tms/1.0.0/ytmp%3Atdt@EPSG%3A900913@png/{z}/{x}/{reverseY}.png',
	// 		opacity: 1
	// 	}
	// });

	/* 进入中国位置 */
	proxy.CMapApi.setMapRange({
		lng: 103.84, //经度
		lat: 31.15, // 维度
		alt: 24000000, // 高度
		heading: 0, //偏航
		pitch: -90, //俯仰，人如果在赤道上空，俯仰角为0可见地球。如果在北纬，俯仰角为负才能见地球
		roll: 0.0 //翻滚
	});

	/* 飞行到指定位置 */
	proxy.CMapApi.flyToRectangle({
		// strLng: 118.22087954757484,
		// strLat: 35.14124100849915,
		// endLng: 118.22865486061352,
		// endLat: 35.14589687229257,
		strLng: 118.05,
		strLat: 34.953,
		endLng: 118.53,
		endLat: 35.434,
		success: function() {
			/* 设置地形*/
			_self.CMapApi.setTerrain({
				// url: 'http://218.59.194.82:13080/crdata/shandong/dem'
				// url: 'http://202.102.167.52:16381/crdata/dem'
				// url: 'https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path'
				url: 'http://218.59.194.82:13480/sddem/dem/'
			});
			/* 初始化显示图层 */
			_self.CMapApi.showInit();
		}
	});

	/* 查询ArcGIS服务试试 */
	proxy.CMapApi.queryAGServerExtent(
		'http://218.59.194.82:6080/arcgis/rest/services/LSQZRZY_RE_WEB_V1/MapServer',
		'0',
		function(res) {
			console.log(JSON.stringify(res));
		},
		function(err) {
			console.log('查询范围错误', err);
		}
	);
});
</script>
<style>
.jt-map {
	position: relative;
	top: 0px;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: blue;
}

.jt-map-tools {
	position: absolute;
	left: 100px;
	top: 30px;
}

.cesium-performanceDisplay-defaultContainer {
	top: unset !important;
	bottom: 100px !important;
	right: 10px !important;
}
</style>