openlayer 自定义toolbar 控件

效果如下

1674026878442.png

自定义控件代码

class ToolbarControl extends Control {
  /**
   * @param {Object} [opt_options] Control options.
   */
  constructor (_map, _options) {
    const options = _options //  配置项
    // console.log('控件', options)

    const toolbarContainer = document.createElement('div')
    toolbarContainer.id = 'ol-toolbar-control'
    toolbarContainer.className = `ol-toolbar-control ${options.className}`

    super({
      element: toolbarContainer,
      target: options.target
    })
  }
}

地图添加自定义控件

 let toolbarControl = new ToolbarControl(map, options.toolbarConfig)
    map.addControl(toolbarControl)

初始化地图

let view = new ol.View({
    projection: options.projection,
    center: options.center,
    zoom: options.zoom,
    maxZoom: options.maxZoom,
    minZoom: options.minZoom
  })

  let map = new ol.Map({
    target: id,
    layers: options.mapLayers,
    view: view,
    controls: defaultControls({
      zoom: false,
      rotate: false,
      attribution: false
    })

  })