# 样式与可视化效果搭配

以下是几种常见的可视化效果与地图样式搭配的使用场景。

# 使用亮色 / 暗色底图搭配日间 / 夜间白模效果

为日间白模搭配亮色的地图样式,为夜间白模搭配暗色地图样式。

style-example-night-building style-example-day-building

# 使用暗色底图搭配灯光点效果

灯光点可视化效果,通过提高数据密集的区域的亮度,来提醒用户。在暗色主题下,高亮的区域会更加明显。

style-example-light-point

# 将可视化图层插入底图样式中,再搭配实景可视化效果

可以将一个可视化图层插入到底图样式中间,来达到将部分图层显示出来的效果,例如,将卫星影像插入到铁路图层下面,这样所有铁路图层以上的图层,都会显示出来。

var map = new aimap.Map({
    container: 'map',
    center: [121.45162, 31.63681],
    zoom: 18,
    pitch: 55,
    maxPitch: 65,
    style: "aimap://styles/aimap/normal-v4",
});

map.on('style.load', () => {
     var tileLayer = new aimap.TileLayer({
         map,
         data: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', //用户自己的光栅图层
         dataOptions: {
             maxZoom: 18,
         },
         style: {
             'raster-opacity': 1
         },
         zIndex: 'transitline_railway_case'
     });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

接着可以再叠加实景图层,最终达到如下图的效果:

style-example-oblique-photography

地图中的道路,兴趣点等依旧显示,卫星影像与实景效果达到了良好的过渡。

最后更新于: 3/25/2022, 7:20:06 PM