代码分离
This commit is contained in:
parent
46885a917f
commit
7638096eb6
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<script setup>
|
||||
import * as Cesium from 'cesium';
|
||||
import { CustomBaiduImageryProvider } from "./CustomBaiduImageryProvider.js";
|
||||
import { useConfigSetting } from './mixins/useConfigSetting.js';
|
||||
|
||||
const props = defineProps({
|
||||
options: {
|
||||
|
|
@ -25,8 +25,6 @@ onMounted(async () => {
|
|||
|
||||
// 初始化地图
|
||||
const initMap = async () => {
|
||||
let terrainProvider = await Cesium.createWorldTerrainAsync()
|
||||
|
||||
const oldOptions = {
|
||||
// 动画仪表盘
|
||||
animation: false,
|
||||
|
|
@ -70,6 +68,7 @@ const initMap = async () => {
|
|||
configJson = {}
|
||||
}
|
||||
if (props.options.isTerrainProvider) {
|
||||
let terrainProvider = await Cesium.createWorldTerrainAsync()
|
||||
// 是否使用自定义地形
|
||||
if(props.options.cesiumTerrainProviderUrl) {
|
||||
const customTerrainProvider = await Cesium.CesiumTerrainProvider.fromUrl(props.options.cesiumTerrainProviderUrl);
|
||||
|
|
@ -87,114 +86,14 @@ const initMap = async () => {
|
|||
// 隐藏logo
|
||||
viewer.cesiumWidget.creditContainer.style.display = 'none'
|
||||
|
||||
setInitConfig();
|
||||
const { setInitConfig } = useConfigSetting(viewer);
|
||||
|
||||
setInitConfig(props.options);
|
||||
|
||||
// 取消左键双击
|
||||
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
|
||||
}
|
||||
|
||||
// 设置初始值
|
||||
const setInitConfig = () => {
|
||||
let options = props.options;
|
||||
mapSetView(options);
|
||||
// 地形夸张
|
||||
if (options.terrainExaggeration) {
|
||||
viewer.scene.globe.terrainExaggeration = options.terrainExaggeration;
|
||||
}
|
||||
|
||||
setMapImg(options);
|
||||
setModel(options);
|
||||
}
|
||||
|
||||
// 设置地图
|
||||
const setMapImg = (options) => {
|
||||
if (!options.ditu) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (options.ditu === 'amap') {
|
||||
const gaodeVector = new Cesium.UrlTemplateImageryProvider({
|
||||
url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
|
||||
name: "高德矢量地图",
|
||||
});
|
||||
viewer.imageryLayers.addImageryProvider(gaodeVector);
|
||||
} else if (options.ditu === 'tencent') {
|
||||
const tencentVector = new Cesium.UrlTemplateImageryProvider({
|
||||
url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=1&version=297",
|
||||
customTags: {
|
||||
sx: function (imageryProvider, x, y, level) {
|
||||
return x >> 4;
|
||||
},
|
||||
sy: function (imageryProvider, x, y, level) {
|
||||
return ((1 << level) - y) >> 4;
|
||||
},
|
||||
},
|
||||
name: "腾讯矢量地图",
|
||||
});
|
||||
viewer.imageryLayers.addImageryProvider(tencentVector);
|
||||
} else if (options.ditu === 'baidu') {
|
||||
const baiduVector = new CustomBaiduImageryProvider({
|
||||
url: "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
|
||||
});
|
||||
viewer.imageryLayers.addImageryProvider(baiduVector);
|
||||
} else if (options.ditu === 'tianditu') {
|
||||
const tiandituImage = new Cesium.WebMapTileServiceImageryProvider({
|
||||
url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=25129831bd91c81af49d3ecf578f6b3c",
|
||||
layer: "img",
|
||||
style: "default",
|
||||
format: "tiles",
|
||||
tileMatrixSetID: "w",
|
||||
maximumLevel: 18,
|
||||
credit: new Cesium.Credit("© Tianditu", "http://www.tianditu.gov.cn/"),
|
||||
name: "天地图影像地图",
|
||||
});
|
||||
viewer.imageryLayers.addImageryProvider(tiandituImage);
|
||||
}
|
||||
}
|
||||
|
||||
// 地图设置视角
|
||||
const mapSetView = (options) => {
|
||||
let destination = Cesium.Cartesian3.fromDegrees(options.setView.x, options.setView.y, options.setView.z);
|
||||
let orientation = {
|
||||
heading: Cesium.Math.toRadians(options.setView.heading),
|
||||
pitch: Cesium.Math.toRadians(options.setView.pitch),
|
||||
roll: Cesium.Math.toRadians(options.setView.roll)
|
||||
}
|
||||
|
||||
if (options.setView.duration === '默认') {
|
||||
viewer.camera.flyTo({
|
||||
destination,
|
||||
orientation
|
||||
})
|
||||
} else {
|
||||
viewer.camera.flyTo({
|
||||
destination,
|
||||
orientation,
|
||||
duration: options.setView.duration
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 设置模型
|
||||
const setModel = async (options) => {
|
||||
// 3d模型参数
|
||||
const tilesetOption = {
|
||||
maximumScreenSpaceError: 1, // 应对大疆一键生成的模型问题；如模型能正常显示但文件加载太过频繁，可增大数值
|
||||
skipLevelOfDetail: true,
|
||||
// baseScreenSpaceError: 1024,
|
||||
// skipScreenSpaceErrorFactor: 16,
|
||||
skipLevels: 5,
|
||||
// immediatelyLoadDesiredLevelOfDetail: false,
|
||||
// loadSiblings: false,
|
||||
// cullWithChildrenBounds: true
|
||||
};
|
||||
for (const url of options.modelList) {
|
||||
const primitive = await Cesium.Cesium3DTileset.fromUrl(url, tilesetOption);
|
||||
if(primitive) {
|
||||
viewer.scene.primitives.add(primitive);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (viewer) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,112 @@
|
|||
import { CustomBaiduImageryProvider } from "../CustomBaiduImageryProvider.js";
|
||||
import * as Cesium from 'cesium';
|
||||
export function useConfigSetting(viewer) {
|
||||
// 设置初始值
|
||||
const setInitConfig = (options) => {
|
||||
// 设置视角
|
||||
mapSetView(options);
|
||||
// 地形夸张
|
||||
if (options.terrainExaggeration) {
|
||||
viewer.scene.globe.terrainExaggeration = options.terrainExaggeration;
|
||||
}
|
||||
// 设置底图
|
||||
setMapImg(options);
|
||||
// 设置模型
|
||||
setModel(options);
|
||||
}
|
||||
|
||||
// 设置地图
|
||||
const setMapImg = (options) => {
|
||||
if (!options.ditu) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (options.ditu === 'amap') {
|
||||
const gaodeVector = new Cesium.UrlTemplateImageryProvider({
|
||||
url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
|
||||
name: "高德矢量地图",
|
||||
});
|
||||
viewer.imageryLayers.addImageryProvider(gaodeVector);
|
||||
} else if (options.ditu === 'tencent') {
|
||||
const tencentVector = new Cesium.UrlTemplateImageryProvider({
|
||||
url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=1&version=297",
|
||||
customTags: {
|
||||
sx: function (imageryProvider, x, y, level) {
|
||||
return x >> 4;
|
||||
},
|
||||
sy: function (imageryProvider, x, y, level) {
|
||||
return ((1 << level) - y) >> 4;
|
||||
},
|
||||
},
|
||||
name: "腾讯矢量地图",
|
||||
});
|
||||
viewer.imageryLayers.addImageryProvider(tencentVector);
|
||||
} else if (options.ditu === 'baidu') {
|
||||
const baiduVector = new CustomBaiduImageryProvider({
|
||||
url: "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
|
||||
});
|
||||
viewer.imageryLayers.addImageryProvider(baiduVector);
|
||||
} else if (options.ditu === 'tianditu') {
|
||||
const tiandituImage = new Cesium.WebMapTileServiceImageryProvider({
|
||||
url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=25129831bd91c81af49d3ecf578f6b3c",
|
||||
layer: "img",
|
||||
style: "default",
|
||||
format: "tiles",
|
||||
tileMatrixSetID: "w",
|
||||
maximumLevel: 18,
|
||||
credit: new Cesium.Credit("© Tianditu", "http://www.tianditu.gov.cn/"),
|
||||
name: "天地图影像地图",
|
||||
});
|
||||
viewer.imageryLayers.addImageryProvider(tiandituImage);
|
||||
}
|
||||
}
|
||||
|
||||
// 地图设置视角
|
||||
const mapSetView = (options) => {
|
||||
let destination = Cesium.Cartesian3.fromDegrees(options.setView.x, options.setView.y, options.setView.z);
|
||||
let orientation = {
|
||||
heading: Cesium.Math.toRadians(options.setView.heading),
|
||||
pitch: Cesium.Math.toRadians(options.setView.pitch),
|
||||
roll: Cesium.Math.toRadians(options.setView.roll)
|
||||
}
|
||||
|
||||
if (options.setView.duration === '默认') {
|
||||
viewer.camera.flyTo({
|
||||
destination,
|
||||
orientation
|
||||
})
|
||||
} else {
|
||||
viewer.camera.flyTo({
|
||||
destination,
|
||||
orientation,
|
||||
duration: options.setView.duration
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 设置模型
|
||||
const setModel = async (options) => {
|
||||
// 3d模型参数
|
||||
const tilesetOption = {
|
||||
maximumScreenSpaceError: 1, // 应对大疆一键生成的模型问题；如模型能正常显示但文件加载太过频繁，可增大数值
|
||||
skipLevelOfDetail: true,
|
||||
// baseScreenSpaceError: 1024,
|
||||
// skipScreenSpaceErrorFactor: 16,
|
||||
skipLevels: 5,
|
||||
// immediatelyLoadDesiredLevelOfDetail: false,
|
||||
// loadSiblings: false,
|
||||
// cullWithChildrenBounds: true
|
||||
};
|
||||
for (const url of options.modelList) {
|
||||
const primitive = await Cesium.Cesium3DTileset.fromUrl(url, tilesetOption);
|
||||
if(primitive) {
|
||||
viewer.scene.primitives.add(primitive);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
setInitConfig
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue