SuperMap iClient3D for WebGL制作立体地图
kele
以重庆市为例,我们来看下如何制作三维立体地图,先看下效果吧
一、数据准备
1.重庆市矢量面
2.重庆市影像图(没有重庆市影像的话,可以通过矢量面裁剪获得)
3.条纹图片
二、数据制作
制作思路:我们观察到立体地图像是一个被拉伸起来的多边形体,顶面是影像地图,侧面是纹理图片,所以我们可以通过矢量面拉伸+贴图的方式实现
1.获取顶面影像贴图
小编只有一张全国的低精度影像,通过裁剪的方式获取重庆市影像
裁剪后得到重庆市的影像图数据集,我们对数据集右键-导出数据集,转出类型选择png
2.制作模型
将矢量面添加到场景,设置为绝对高度,并设置合适的拉伸高度;点开贴图设置,侧面贴图选择条纹贴图,顶面贴图选择第一步导出的影像(横纵向次数都设置为1,表示使用原始影像大小)
制作好之后,在左下角图层管理器中选中图层右键-保存为模型数据集,之后将模型数据集添加到场景生成场景缓存,通过iServer发布为三维服务
3.WebGL展示
scene.shadowMap.darkness = 1.275; //设置第二重烘焙纹理的效果(明暗程度)
scene.skyAtmosphere.show = false; //关闭大气
scene.sun.show = false; //关闭太阳
scene.fog.enabled = false; //关闭雾气
viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
url: 'https://dev.virtualearth.net',
mapStyle: Cesium.BingMapsStyle.CANVAS_DARK,
key: 'AhrJDRCi6VfUJWMk-_eZNGTfDSddoQfoUGRaf1PJg3KPejm6W3H0kjdhJFgIV948'
})); //bingmap黑暗风格地图
var model = viewer.scene.layers.find('重庆');
model.style3D.fillForeColor = Cesium.Color.GRAY; //设置模型颜色
model.style3D.fillForeColor.alpha = 0.8; //设置透明度
var POIEntity = viewer.entities.add({ //底部旋转图片
name: "test1",
position: Cesium.Cartesian3.fromDegrees(107.968180743068,30.0275370765409,1000),
ellipse: {
semiMinorAxis: 300000,
semiMajorAxis: 300000,
height: 100,
material: new Cesium.ImageMaterialProperty({
image: './images/circle02.png',
repeat: new Cesium.Cartesian2(1, 1),
transparent: true,
color: new Cesium.Color(28/255,28/255,28/255)
}),
rotation: new Cesium.CallbackProperty(getRotationValue, false),
stRotation: new Cesium.CallbackProperty(getRotationValue, false),
outline: false, // height must be set for outline to display
numberOfVerticalLines: 100
},
description: '测试数据'
});
var rotation = Cesium.Math.toRadians(30);
function getRotationValue() {
rotation += 0.001;
return rotation;
}
三、效果展示
柯布罗利: 感谢大佬,丢失贴图还真是因为没有勾选标准旧材质的原因。狠狠赞一波!
Chinagototo: 【iDesktopx】桌面无法连接postgis数据源,PG启动失败报错:replication checkpoint has wrong magic 0 instead of 307747550? 帮了大忙,差点就重装集群的PostGreSQL了...
hi_chap: 能在来个链接么 失效了
何生GIS: 矢量轮廓数据要求不高的可以自己去osm下
CSDN-Ada助手: 不知道 Java 技能树是否可以帮到你:https://edu.csdn.net/skill/java?utm_source=AI_act_java