当前位置: 首页 > Web前端 > vue.js

vue与cesium结合,显示图层等基本信息

时间:2023-04-01 00:22:09 vue.js

1、环境搭建npminstall-Scesium(必须加-S参数,否则会出现引用错误)2、导入文件2.1首先将/node_modules/cesium/Build/Cesium文件夹复制到/public/static目录下和下面的buildModuleUrl结合,否则静态文件不会显示(比如图片等)2.2文件介绍importbuildModuleUrlfrom"cesium/Source/Core/buildModuleUrl";import{Viewer}from"cesium/Source/Cesium";import*asCesiumfrom"cesium/Source/Cesium";import"cesium/Source/Widgets/widgets.css";buildModuleUrl.setBaseUrl("static/");上面:1和5是导入buildModuleUrl,设置cesium静态文件路径2导入cesium类使用的核心3是cesium库4是cesium样式文件(一定要参考)3引入一个3D球体this.viewer=newViewer("cesiumContainer",{//数据源集合需要可视化animation:false,//是否显示动画控件shouldAnimate:true,homeButton:true,//是否显示Home按钮fullscreenButton:false,//是否显示全屏按钮baseLayerPicker:false,//是否显示图层选择控件geocoder:false,//是否显示地名搜索控件timeline:false,//是否显示时间轴控件sceneModePicker:false,//是否显示投影模式控件navigationHelpButton:false,//是否显示帮助信息控件infoBox:false,//是否显示点击元素后显示informationrequestRenderMode:true,//启用请求渲染模式scene3DOnly:false,//每个几何实例只会以3D方式渲染以节省GPU内存sceneMode:3,//初始场景模式12D模式22D循环模式33D模式Cesium.SceneModefullscreenElement:document.body,//全屏渲染的HTML元素暂时找不到有用的imageryProvider:newCesium.UrlTemplateImageryProvider({url:"gis2d/terrain/{z}/{x}/{y}.jpg"//地图瓦片})});this.viewer._cesiumWidget._creditContainer.style.display="none";//去除版权信息4.设置相机缩放范围//相机高度的最小值this.viewer.scene.screenSpaceCameraController.minimumZoomDistance=250000;//相机高度的最大值this.viewer.scene.screenSpaceCameraController.maximumZoomDistance=12000000;//设置相机缩小时的速度this.viewer.scene.screenSpaceCameraController._minimumZoomRate=30000;//设置相机放大时的速率this.viewer.scene.screenSpaceCameraController._maximumZoomRate=5906376272000;5.定位this.viewer.camera.setView({//Cesium的坐标以地心为基准,始终指向南美洲,始终指向亚洲,始终指向北极状态//fromDegrees()方法,将纬度、经度和海拔转换为世界坐标destination:Cesium.Cartesian3.fromDegrees(108.78,31.04,9000000)orientation:{//指向航向:Cesium.Math.toRadians(90,0),//视角pitch:Cesium.Math.toRadians(-90),roll:0.0}});6、添加一张中国地图,并划分为五大区域,并以不同颜色显示//使用GeoJsonDataSource加载json格式的数据vargeojsonOptions={clampToGround:true,//必须添加,否则添加实体对象将被阻止覆盖};vardataSource=Cesium.GeoJsonDataSource.load("json/province.json",geojsonOptions);dataSource.then(data=>{this.viewer.dataSources.add(data);varentities=data.entities.values;varcolorHash={};for(vari=0;i{res.data.forEach(item=>{letlabelInfo=this.viewer.entities.add(newCesium.Entity());//添加实体类labelInfo.position=Cesium.Cartesian3.fromDegrees(//实体位置parseInt(item.X),参数eInt(item.Y),-100);labelInfo.label={//实体显示的文字show:true,showBackground:false,//是否显示背景色fillColor:Cesium.Color.fromCssColorString("#000"),//设置字体颜色//backgroundColor:Cesium.Color.fromCssColorString("#000"),//设置字体背景色阶:0.5,//先放大一倍再缩小字体很巧妙font:"normal28pxMicrosoftYaHei",text:item.stationName,pixelOffset:newCesium.Cartesian2(-40,25),//偏移量horizo??ntalOrigin:Cesium.Horizo??ntalOrigin.LEFT};labelInfo.billboard={//实体图标图片:item.hasFaultAsset?要求(“@/assets/img/location-blue-sm.png”):item.hasTask?要求(“@/assets/img/location-red-sm.png”):要求(“@/assets/img/flag-red-sm.png”),heightReference:Cesium.HeightReference.CLAMP_TO_GROUND};});});8.改变图层this.viewer.imageryLayers.remove(this.viewer.imageryLayers.get(0));this.viewer.imageryLayers.addImageryProvider(newCesium.UrlTemplateImageryProvider({url:this.themeInfo.tilesUrl}));9.删除实体//删除所有这个.viewer.entities.removeAll()//id是添加实体时的id名letentID=viewer.entities.getById('id')viewer.entities.remove(entID);//获取所有实体this.viewer.entities.values