Question

我需要在地图中添加一个新的滑块（例如：bootstrap-slider）来处理时间轴

我正在使用OpenLayers 5.3.0，我想找到添加这种新组件（如OpenLayers控件）的方法。

到目前为止，我有一个类似的东西，一个叫做B1Control的控件，我想用滑块元素添加一个新的控件B2Control。

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {defaults as defaultControls, Control} from 'ol/control.js';
import {toStringHDMS} from 'ol/coordinate.js';
import Overlay from 'ol/Overlay.js';
import {fromLonLat, toLonLat} from 'ol/proj.js';

var button = document.createElement('button');
button.innerHTML = 'B1';

var showMessage = function (e) {
   window.alert("Active");
};

button.addEventListener('click', showMessage, false);

var element = document.createElement('div');
element.className = 'button1 ol-unselectable ol-control';
element.appendChild(button);

var B1Control = new Control({
    element: element
});


var slider = new Slider('#ex1', {
    formatter: function(value) {
      return 'Current value: ' + value;
    }
});

var element = document.createElement('div');
element.className = 'slider';
element.appendChild(slider);

var B2Control = new Control({
    element: element
});


const map = new Map({
    target: 'map',
    layers: [
        new TileLayer({
            source: new OSM()
        })
    ],
    view: new View({
        center: [0, 0],
        zoom: 3
    })
});

map.addControl(B1Control);
map.addControl(B2Control);

在这种情况下，我在行（element.appendChild（slider））中获得了此错误未捕获的TypeError：无法在“节点”上执行“ appendChild”：参数1的类型不是“节点”。

在这种情况下如何安装滑块组件？

致谢！

如何使用OpenLayers将新的滑块控件添加到地图中

0 个答案: