L7可以使用高德地图作为底图,也可以使用高德地图提供的插件,如工具栏,缩放条等。
官方文档中的引入方式如下
const sc = new Scene({id: 'xxxx-map',logoVisible: false,map: new GaodeMap({style: 'default',pitch: 0,zoom: 13.056,plugin: ['AMap.ToolBar', 'AMap.Scale'],}),});
但并不会起效。因为这种写法仅仅是将插件引入,并没有将其实例化和加入地图。还需要参照高德的文档将插件实例化并添加到地图上。
一番摸索后找到方法。
sc.on('loaded', () => {// 实例化并添加插件const toolbar = new (window.AMap as any).ToolBar();const scale = new (window.AMap as any).Scale();(sc.getMapService().map as any).addControl(toolbar);(sc.getMapService().map as any).addControl(scale);});
变量 sc 就是前一段代码创建的L7的Scene的实例,实例化插件的代码写到 loaded事件中。
关键就是怎么找到 AMap 这个东西。L7虽然引入了高德地图(无需再自己引入高德),但没有直接把这个给我们,最终还是从window对象中找到的。
感觉写起来好别扭,如果有其他好办法请务必告诉我。