上海建设工程交易中心网站,软件正版化情况及网站建设情况,中文网站建设和英文网站建设的区别,权威的扬中网站建设目录
0. 预览效果 1. 代码库包
2. 技术点
3. 一些注意事项#xff08;配置参数#xff09;
4. 相关代码详情 0. 预览效果 包含的功能#xff1a; ① 地球按照一定速度自转 ② 修改加载的geojson面样式 ③ 添加 文字 标注#xff01; 1. 代码库包 直接采用vue-cli5 创建…目录
0. 预览效果 1. 代码库包
2. 技术点
3. 一些注意事项配置参数
4. 相关代码详情 0. 预览效果 包含的功能 ① 地球按照一定速度自转 ② 修改加载的geojson面样式 ③ 添加 文字 标注 1. 代码库包 直接采用vue-cli5 创建项目选择vue3routervuex等然后这里选择的datav不是官方的由于官方的datav-vue3有些问题暂时采用的为DataV Vue3TSVite版 | DataV - Vue3
2. 技术点 ① css 父相子绝父元素position: relative; 子元素position: absolute; datav中的BorderBox11cesium中viewer的挂接的元素下面就有这种。 ②这里布局写的有点随意可以参考其他的可视化大屏的布局多采用几行几列的形式如flex:0 1 50%此外这里数据都是写死的后面可以通过配置数据库实现。 ③css height top width left 等等 尽量按照 n%的形式。
3. 一些注意事项配置参数 项目采用的JavaScript而非typescript ①参考博主的另一篇关于vue3 cesium安装配置webpack的博客 ② vue.config.js配置如下
const { defineConfig } require(vue/cli-service)
// el 按需自动引入
const AutoImport require(unplugin-auto-import/webpack)
const Components require(unplugin-vue-components/webpack)
const { ElementPlusResolver } require(unplugin-vue-components/resolvers)
// cesium 配置
const CopyWebpackPlugin require(copy-webpack-plugin)
const webpack require(webpack)
const path require(path)let cesiumSource ./node_modules/cesium/Source/ //按理说应该是未打包的
const cesiumWorkers ../Build/Cesium/Workers;module.exports defineConfig({transpileDependencies: true,publicPath: ./,outputDir: dist, // 输出文件目录lintOnSave: false, // eslint 是否在保存时检查 关闭语法检查// assetsDir: static, // 配置js、css静态资源二级目录的位置configureWebpack: {output: {sourcePrefix: },amd: {toUrlUndefined: true},resolve: {alias: {: path.resolve(src),cesium: path.resolve(__dirname, cesiumSource)},// 参考别人说的我不太懂webpack所以都不知道咋解决https zlib问题 cesium github有example介绍了如何解决fallback: { https: false, zlib: false, http: false, url: false },},plugins: [// 对于webpack版本此处有不同配置webpack低版本5.x执行下面4行注释的代码对于webpack高版本9.x及以上patterns是可以的。new CopyWebpackPlugin({patterns: [{ from: path.join(cesiumSource, cesiumWorkers), to: Workers },{ from: path.join(cesiumSource, Assets), to: Assets },{ from: path.join(cesiumSource, Widgets), to: Widgets },{ from: path.join(cesiumSource, ThirdParty), to: ThirdParty },],}),// new CopyWebpackPlugin([ { from: path.join(cesiumSource, Workers), to: Workers}]),// new CopyWebpackPlugin([ { from: path.join(cesiumSource, Assets), to: Assets}]),// new CopyWebpackPlugin([ { from: path.join(cesiumSource, Widgets), to: Widgets}]),// new CopyWebpackPlugin([ { from: path.join(cesiumSource, ThirdParty), to: ThirdParty}]),new webpack.DefinePlugin({CESIUM_BASE_URL: JSON.stringify(./)// CopyWebpackPlugin from的绝对路径}),// el 自动引入AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],module: {unknownContextCritical: /^.\/.*$/,unknownContextCritical: false}}
})4. 相关代码详情 ①index.html 修改 ②App.vue ③HomeView.vue
templateBorderBox11 idcontainer titleVue3 Cesium DataV可视化大屏 :title-width400 :animatefalsediv idCesiumContainer/divrouter-link toproject01BorderBox13 idbox01 title第一板块 :title-width200div idtitle第一板块/div img src../../public/img01.jpg alt/BorderBox13/router-linkBorderBox13 idbox02 title第二板块 :title-width200div idtitle第二板块/div img src../../public/img02.jpg alt/BorderBox13BorderBox13 idbox03 title第三板块 :title-width200div idtitle第三板块/div img src../../public/img03.jpg alt/BorderBox13BorderBox13 idbox04 title第四板块 :title-width200div idtitle第四板块/div img src../../public/img04.jpg alt/BorderBox13router-link toproject05BorderBox13 idbox05 title第五板块 :title-width200div idtitle第五板块/div img src../../public/img05.jpg alt/BorderBox13/router-linkBorderBox13 idbox06 title第六板块 :title-width200div idtitle第六板块/div img src../../public/img06.jpg alt/BorderBox13BorderBox13 idbox07 title第七板块 :title-width200div idtitle第七板块/div img src../../public/img07.jpg alt/BorderBox13BorderBox13 idbox08 title第八板块 :title-width200div idtitle第八板块/div img src../../public/img08.jpg alt/BorderBox13/BorderBox11
/templatescriptimport { BorderBox11, BorderBox13 } from kjgl77/datav-vue3;import {reactive, ref, onMounted} from vue;import * as Cesium from cesium/Cesium.js;import cesium/Widgets/widgets.css;export default {name: App,components: {BorderBox11,BorderBox13,},setup(){var legend reactive({});// 地球旋转function rotate(time, viewer) {viewer.clock.multiplier 300; //速度viewer.clock.shouldAnimate true;var previousTime viewer.clock.currentTime.secondsOfDay;const onTickCallback () {var spinRate 1;var currentTime viewer.clock.currentTime.secondsOfDay;var delta (currentTime - previousTime) / 1000;previousTime currentTime;viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta);}// 开启地图自转效果viewer.clock.onTick.addEventListener(onTickCallback);};const firstCesium (){let viewer new Cesium.Viewer(CesiumContainer, {sceneModePicker: false,navigationHelpButton: false,baseLayerPicker: false,animation: false,timeline: false,geocoder: false,homeButton: false,// infoBox: false,});// 设置自动旋转rotate(4000, viewer);// 设置背景颜色// viewer.scene.skyBox.show false;// viewer.scene.backgroundColor Cesium.Color.DARKBLUE;// viewer.scene.sun.show false;// viewer.scene.moon.show false;// 去掉logoviewer.cesiumWidget.creditContainer.style.display none; // 去掉背景图层// viewer.imageryLayers.removeAll();// 鼠标右键 倾斜操作viewer.scene.screenSpaceCameraController.tiltEventTypes [Cesium.CameraEventType.RIGHT_DRAG];// 鼠标滑轮 放缩操作viewer.scene.screenSpaceCameraController.zoomEventTypes [Cesium.CameraEventType.WHEEL,// Cesium.CameraEventType.PINCH];// 鼠标左键 3D下聚焦局部时给人感觉是平移-本质是地球旋转范围小-旋转类似平移viewer.scene.screenSpaceCameraController.rotateEventTypes [Cesium.CameraEventType.LEFT_DRAG];let geojsonLayer Cesium.GeoJsonDataSource.load(http://192.168.1.127:80/HeBei_DiZhi/ZG.json, // 这里是json文件的地址).then((dataSource){const entities dataSource.entities.values;const colorHash {};for (let i 0; i entities.length; i) {//For each entity, create a random color based on the state name.//Some states have multiple entities, so we store the color in a//hash so that we use the same color for the entire state.const entity entities[i];// console.log(i, entity);const name entity.name;let color colorHash[name];if (!color) {color Cesium.Color.fromRandom({alpha: 1.0,});legend[name] color.toCssHexString();colorHash[name] color;}//Set the polygon material to our random color.entity.polygon.material color;//Remove the outlines.entity.polygon.outline false;// entity.polygon.extrudedHeight // entity.properties.Population / 50.0;}viewer.dataSources.add(dataSource);viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(115, 38, 1000000, Cesium.Ellipsoid.WGS84),label: {text: 中华人民共和国,showBackground: true,fillColor: Cesium.Color.WHITE,font: 24px sans-serif,// pixelOffset: new Cesium.Cartesian2(20, -15),// scaleByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 8e5, 0),backgroundColor: Cesium.Color.TRANSPARENT,}});})};onMounted(() {firstCesium()});return {legend,}}}
/scriptstyle langscss scoped#container {position: relative;height: 100%;width: 100%;background-color: darkblue;}#CesiumContainer {position: absolute;top: 15%;left: 20%;height: 70%;width: 60%;}#box01 {position: absolute;top: 8%;left: 2.5%;height: 20%;width: 15%;}#title {position: absolute;top: 2%;left: 3.5%;font-size: 0.4vh;color: white;}#box02 {position: absolute;top: 30%;left: 2.5%;height: 20%;width: 15%;}#box03 {position: absolute;top: 8%;right: 2.5%;height: 20%;width: 15%;}#box04 {position: absolute;top: 30%;right: 2.5%;height: 20%;width: 15%;}#box05 {position: absolute;top: 52%;left: 2.5%;height: 20%;width: 15%;}#box06 {position: absolute;top: 52%;right: 2.5%;height: 20%;width: 15%;}#box07 {position: absolute;top: 74%;left: 2.5%;height: 20%;width: 15%;}#box08 {position: absolute;top: 74%;right: 2.5%;height: 20%;width: 15%;}img {position: absolute;top: 20%;left: 15%;height: 70%;width: 70%;}#legend {position: absolute;bottom: 100px;right: 20px;}/style ④ router index.js
