[英]How to extend a class with mapbox-gl FullscreenButton
I want to wrap the standard mapbox-gl FullscreenButton, see here , to add following features: 我想包装标准mapbox-gl FullscreenButton,请参见此处 ,以添加以下功能:
I tried the following: fiddle . 我尝试了以下方法: 小提琴 。 Somehow you first have to hit return in the ES6/Babel window before the code will run and the map shows...
您必须首先以某种方式在ES6 / Babel窗口中单击return,然后代码才能运行,并且地图显示...
Problems I ran into: 我遇到的问题:
"TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at e.addControl ( https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.js:390:3490 ) at jekuwak.js:69:5"
“ TypeError:无法在'Node'上执行'appendChild':参数1不是'Node'类型。在e.addControl( https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0 /mapbox-gl.js:390:3490 )在jekuwak.js:69:5“
2. When 1 is solved (I workaround by adding needsclick via Chrome Devtools), the this._mapContainer.webkitRequestFullscreen()
is triggered. 2.解决1后 (我通过通过Chrome Devtools添加needsclick来解决),将触发
this._mapContainer.webkitRequestFullscreen()
。
What do I change to get the full page fullscreen instead of just the mapcontainer? 我如何更改才能全屏显示整个页面,而不仅仅是mapcontainer?
For #1: 对于#1:
const fs = new mapboxgl.FullscreenControl();
map.addControl(fs)
fs._fullscreenButton.classList.add('needsclick');
For #2: 对于#2:
The FullscreenControl
is not extensible in this way – it has been designed to operate on the map canvas and changing that would probably be more trouble than just writing the functionality you want from scratch. FullscreenControl
不能以这种方式进行扩展–它被设计为可以在地图画布上进行操作和更改,这可能比仅从头开始编写所需的功能要麻烦得多。 If you want to make your whole window
fullscreen, I suggest you implement the full-screen functionality independently of mapboxgl. 如果要使整个
window
全屏显示,建议您独立于mapboxgl实现全屏显示功能。 If you want to be able to use the icons provided with mapboxgl you can add the appropriate CSS classes to the element you create. 如果您希望能够使用mapboxgl随附的图标,则可以将适当的CSS类添加到您创建的元素中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.