当前位置：首页 > backend >正文

WebGIS开发智慧机场项目实战（2）

backend 2025/5/17 8:42:57

1.地图主题控件

scene.on('loaded', () => {const mapTheme = new L7.MapTheme({});scene.addControl(mapTheme);
});

1.1 地图操作

1.1.1 切换底图

setMapStyle(style: string): void 设置地图样式

需求：点击事件控制图层的切换

let isToggle;
scene.on("loaded", () => {scene.on("click", () => {isToggle = !isToggle;if (isToggle) {scene.setMapStyle("dark");} else {scene.setMapStyle("normal");}})
})

1.1.2 视图操作

![](https://i-blog.csdnimg.cn/img_convert/b64c4976047fa0ae6efed6c391e2c1e7.png)

const zoom = scene.getZoom(); //获取zoom scene.setZoom(zoom+1) //设置zoom

完整代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/@antv/l7"></script><script src="https://lib.baomitu.com/jquery/3.6.3/jquery.min.js"></script><style>* {margin: 0;padding: 0;}#map {position: absolute;top: 0;right: 0;bottom: 0;left: 0;}button {width: 200px;height: 50px;position: fixed;z-index: 100;top: 50px;}#big {left: 50px;}#small {left: 270px;}button:hover {background-color: #652e8093;cursor: pointer;}</style>
</head>
<body><button id="big">放大</button><button id="small">缩小</button><button id="reset">复位地图</button><div id="map"></div><script>var { Scene, GaodeMap } = L7;const scene = new Scene({id: 'map',map: new GaodeMap({style: 'normal', // 样式URLcenter: [114.30, 30.50],pitch: 90,zoom: 12,minZoom: 6}),logoVisible: false,});scene.on("loaded", () => {const zoom = scene.getZoom();const { lng, lat } = scene.getCenter();let center = [lng, lat];$("#reset").click(() => {scene.setZoomAndCenter(zoom, center);});$("#big").click(() => {scene.zoomIn();});$("#small").click(() => {const zoom = scene.getZoom();scene.setZoom(zoom - 1);});});</script>
</body>
</html>

1.2 scene方法总结：

scene.getZoom()	获取缩放级别
scene.setZoom()	设置缩放级别
scene.zoomIn()	放⼤
scene.zoomOut()	缩小
scene.getCenter()	获取中心点
scene.setCenter([lng, lat])	设置中心点
scene.setZoomAndCenter(zoom, cente r)	设置缩放级别和中心点