# 切换地图
# 切换图层(栅格瓦片)
栅格瓦片切换图层是通过后台修改图层样式来达到切换效果
// 切换cad图层
export const switchCadLayers = async (map: Map, layers: {name: string; isOff: boolean}[]) => {
let svc = map.getService();
// 如果是栅格瓦片
await map.switchLayers(svc, layers.reduce((sum, val) => {
if (!val.isOff) {
// @ts-ignore
sum.push(val.name);
}
return sum;
}, []))
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 切换图层(矢量瓦片)
矢量瓦片切换图层是通过前端修改样式来达到切换效果
// 切换cad图层
export const switchCadLayers = async (map: Map, layers: {name: string; isOff: boolean}[]) => {
let svc = map.getService();
// 如果是矢量瓦片
let onLayers = layers.reduce((sum, val) => {
if (!val.isOff) {
// @ts-ignore
sum.push(val.name);
}
return sum;
}, []); // 要开的图层
switchVectorLayers(map, onLayers)
}
// 矢量瓦片切换图层 onLayers 要显示的图层名称数组
export const switchVectorLayers = (map: Map, onLayers: string[]) => {
// 通过图层名称来查找图层id
const getLayerIdByName = (name: string) => {
return svc.getMapLayers().findIndex(layer => layer.name === name)
}
// 增加实体图层判断条件,只要满足任何一种类型即可,如 ['图层一','图层二']
const conditionLayers = (layers: string[], inputIsIndex: boolean) => {
if (!Array.isArray(layers)) layers = [layers];// 先转成数组，再统一用数组去算吧
let layerIndexs: number[] = [];
if (!inputIsIndex) {
// 如果输入的不是图层索引，是图层名称，则需要转成图层索引
layerIndexs = layers.map(layer => getLayerIdByName(layer)); // 把图层名称转为图层索引，在矢量瓦片中图层是用索引来表示的
}
if (layerIndexs.length == 0) {
layerIndexs = [-1]; // 如果全部关闭，防止数组为空，加一个不存在的
}
return [
"match",
['get', 'layer'],
layerIndexs,
true,
false
]
}
// 获取之前的默认的矢量图层样式，然后在当前样式中，对矢量图层的数据进行图层进行过滤
let style = map.getStyle();
let svc = map.getService();
let vectorStyle = svc.vectorStyle();
let vectorLayerIds = vectorStyle.layers.map(layer => layer.id);
let filter = conditionLayers(onLayers, false);
for (let i = 0; i < style.layers.length; i++) {
if (vectorLayerIds.includes(style.layers[i].id)) {
// @ts-ignore
style.layers[i].filter = filter; // 设置过滤条件
}
}
map.setStyle(style);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
# 切换图形(地图对象不变)
通过调用 switchMap 来切换图形。
切换图形(地图对象不变) (opens new window)
/**
* 切换地图，请确保之前打开过地图,开始前触发`mapopenstart`事件，打开后触发`mapopenfinish`事件
* @param param 打开选项
* @param isKeepOldLayers 是否保留之前的图层数据，默认false
* @param isVectorStyle 是否为矢量样式
* @param isSetCenter 是否默认设置为地图中心点
* @param isFitBounds 默认是否缩放
* @param source 数据源id，如果修改了默认的栅格或瓦片source，需要传此参数
*/
switchMap(param: IOpenMapParam, isKeepOldLayers?:boolean, isVectorStyle?:boolean, isSetCenter?: boolean, isFitBounds?: boolean, source?: string): Promise<any>;
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 切换图形(地图对象改变)
这个方法是清空之前地图对象关联的div，再重新创建一个新的div，与创建的新的map对象相关联
切换图形(地图对象改变) (opens new window)
// 创建一个新的div对象
const createNewMapDivId = ()=> {
// 先清空之前的
let parentDiv = document.getElementById("map");
parentDiv.innerHTML = "";
let newMapDiv = document.createElement("div");
newMapDiv.id = vjmap.RandomID(6);
newMapDiv.style.position = 'absolute';
newMapDiv.style.width = "100%";
newMapDiv.style.height = "100%";
parentDiv.appendChild(newMapDiv);
return newMapDiv.id;
}
const openNewMap = async (mapid, isVector) => {
// 打开地图
let res = await svc.openMap({
mapid: mapid,
mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
style: vjmap.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式
})
if (res.error) {
message.error(res.error)
return;
}
// 获取地图的范围
let mapExtent = vjmap.GeoBounds.fromString(res.bounds);
// 建立坐标系
let prj = new vjmap.GeoProjection(mapExtent);
// 新建地图对象
let map = new vjmap.Map({
container: createNewMapDivId(), // 这里要创建一个新的div对象，与新的map对象相绑定
style: isVector ? svc.vectorStyle() : svc.rasterStyle(), // 栅格瓦片样式
center: prj.toLngLat(mapExtent.center()), // 中心点
zoom: 2,
renderWorldCopies: false
});
// 地图关联服务对象和坐标系
map.attach(svc, prj);
// 使地图全部可见
map.fitMapBounds();
}
let curMapId;
const switchMap = async mapid => {
if (curMapId == mapid) return; // 如果一样，不用管了
await openNewMap(mapid);
curMapId = mapid;
}
await switchMap("sys_zp");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
提示
地图销毁前记得调用 map.remove() 销毁地图对象 (opens new window)