陕西建设厅继续教育网站,什么网站可以赚钱啊,建设部网站查询,网站线框图使用ViteVue3.2Cesium。Vite需要Node.js版本14.18及以上版本。Vite命令创建的工程会自动生成vite.config.js文件#xff0c;来配置一些相关的参数。
1、使用Vite创建vue3项目 # npm npm init vitelatest cesium-app -- --template vue # yarn yarn create vite cesium-app… 使用ViteVue3.2Cesium。Vite需要Node.js版本14.18及以上版本。Vite命令创建的工程会自动生成vite.config.js文件来配置一些相关的参数。
1、使用Vite创建vue3项目 # npm npm init vitelatest cesium-app -- --template vue # yarn yarn create vite cesium-app --template vue # pnpm pnpm create vite cesium-app -- --template vue ***注设置项目名称为cesium-app
2、引入Cesium插件 # npm npm install cesium vite-plugin-cesium vite -D # yarn yarn add cesium vite-plugin-cesium vite -D # pnpm pnpm install cesium vite-plugin-cesium vite -D 3、创建vite.config.js
import { defineConfig } from vite
import vue from vitejs/plugin-vue
import cesium from vite-plugin-cesium;
export default defineConfig({plugins: [vue(),cesium()]
});
4、页面中使用
templatedivdiv classfull-container :styleviewStyle idcesiumContainer /div idloadingOverlayh1Loading.../h1/div/div
/templatescript setup
import { reactive, onMounted } from vue;
import * as Cesium from cesium;const props defineProps({viewStyle: {},viewerProperty: {},dropBackground: {default: false,},
});onMounted(() {const _this this;const tianDiTuToken 自己注册的天地图key;// 服务负载子域const subdomains [0, 1, 2, 3, 4, 5, 6, 7];// 创建图层const viewer new Cesium.Viewer(cesiumContainer, {animation: false, //是否创建动画小器件左下角仪表timeline: false, //是否显示时间轴geocoder: false, //是否显示geocoder小器件右上角查询按钮baseLayerPicker: false, //是否显示图层选择器fullscreenButton: false, //是否显示全屏按钮homeButton: true, //是否显示Home按钮infoBox: false, //是否显示信息框sceneModePicker: false, //是否显示3D/2D选择器scene3DOnly: false, //如果设置为true则所有几何图形以3D模式绘制以节约GPU资源selectionIndicator: false, //是否显示选取指示器组件navigationHelpButton: false, //是否显示右上角的帮助按钮baselLayerPicker: false, // 将图层选择的控件关掉才能添加其他影像数据shadows: true, //是否显示背影imageryProvider: new Cesium.WebMapTileServiceImageryProvider({// 影像底图url: http://t0.tianditu.com/img_w/wmts?servicewmtsrequestGetTileversion1.0.0LAYERimgtileMatrixSetwTileMatrix{TileMatrix}TileRow{TileRow}TileCol{TileCol}styledefaultformattilestk${tianDiTuToken},layer: tdtBasicLayer,style: default,format: image/jpeg,subdomains: subdomains,tileMatrixSetID: GoogleMapsCompatible,maximumLevel: 18,}),});// 将图层挂载到window上window.cesiumViewer viewer;viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({//影像注记url: http://t0.tianditu.com/cia_w/wmts?servicewmtsrequestGetTileversion1.0.0LAYERciatileMatrixSetwTileMatrix{TileMatrix}TileRow{TileRow}TileCol{TileCol}styledefault.jpgtk${tianDiTuToken},subdomains: subdomains,layer: tdtCiaLayer,style: default,format: image/jpeg,tileMatrixSetID: GoogleMapsCompatible,maximumLevel: 18,}));//优化项--关闭相关特效viewer.scene.debugShowFramesPerSecond false; //显示fpsviewer.scene.moon.show false; //月亮viewer.scene.fog.enabled false; //雾viewer.scene.sun.show false; //太阳viewer.scene.skyBox.show false; //天空盒viewer.resolutionScale 1.0; //画面细度默认值为1.0//去除版权信息viewer._cesiumWidget._creditContainer.style.display none;// 将三维球定位到中国viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),orientation: {heading: Cesium.Math.toRadians(348.4202942851978),pitch: Cesium.Math.toRadians(-89.74026687972041),roll: Cesium.Math.toRadians(0),},complete: function callback() {// 定位完成之后的回调函数},});
});
/scriptstyle langscss scoped
.fullSize,
.full-container {position: absolute;/*top: 0;*//*left: 0;*/border: none;height: 100%;width: 100%;margin: 0px;display: inherit;
}
.doubleViewer {width: 50%;
}#loadingOverlay {position: absolute;top: 0;left: 0;opacity: 0.9;width: 100%;height: 100%;display: none;
}#loadingOverlay h1 {text-align: center;position: relative;top: 50%;margin-top: -0.5em;
}#mousePositionId {position: absolute;right: 30px;bottom: 50px;z-index: 100;font-size: 20px;
}
.layer-picker-class {float: right;
}
/style
style
html {overflow-x: hidden;overflow-y: hidden;
}
/style
