从零开始vue使用cesium通过nginx发布3d地形数据并展示(续二)_yinzisang的博客-CSDN博客
基本上大型项目都得使用nginx来发布服务(切片数据太大),因为我们这是测试demo所以直接放在publc文件夹里
先上图:
第一步:使用cesiumlab制作地图切片
cesiumlab官网:Cesium实验室官网
我这里下载的是2.5版本的,3版本有bug不能注册账号
因为是后端提供给我的切片数据(还没拼接,只有台湾的地形数据),所以我不需要下载直接将数据放进
打开cesiumlab 选择地形切片,点击添加,储存类型选择散列文件其余随意
添加完成后出现这一堆文件
将该文件放在项目中的public里,这只是测试所以我放在了public里,正常需要通过tomcat(推荐nginx发布)来发布引用
在viewer里写如下代码:
var viewer = new Cesium.Viewer("cesiumContainer", { imageryProvider: Cesium.createWorldImagery({ style: Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS, }), baseLayerPicker: false, terrainProvider : new Cesium.CesiumTerrainProvider({ url : 'cesium', requestVertexNormals : true }) }); var layers = viewer.scene.imageryLayers; var blackMarble = layers.addImageryProvider( new Cesium.IonImageryProvider({ assetId: 3812 }) ); blackMarble.alpha = 0.5; blackMarble.brightness = 2.0; layers.addImageryProvider( new Cesium.SingleTileImageryProvider({ url: "../images/Cesium_Logo_overlay.png", rectangle: Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75), }) );
因为我把这些文件放在了piublic里的cesium文件里,具体需要看自己的位置
最终效果图实现,
核心代码:
var viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: new Cesium.CesiumTerrainProvider({ // url: Cesium.IonResource.fromAssetId(1), url: "data/dem" }), }) });
url记得变一下