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;
}

三、效果展示