从零开始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记得变一下
版权声明:本文为yinzisang原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。