如何在下拉菜单中创建Openlayer功能预览？

<script src="https://cdn.jsdelivr.net/npm/ol@6.6.1/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@6.6.1/dist/ol.css" />

<select id="layerSelect"></select>

var layerSelect = document.getElementById('layerSelect');

// 创建一个图层选项
var option1 = document.createElement('option');
option1.value = 'osm';
option1.text = 'OpenStreetMap';

// 创建另一个图层选项
var option2 = document.createElement('option');
option2.value = 'bing';
option2.text = 'Bing Maps';

// 将选项添加到下拉菜单中
layerSelect.add(option1);
layerSelect.add(option2);

layerSelect.addEventListener('change', function() {
  var selectedLayer = layerSelect.value;

  // 移除之前的图层
  map.getLayers().clear();

  // 根据选中的值加载相应的图层
  if (selectedLayer === 'osm') {
    var osmLayer = new ol.layer.Tile({
      source: new ol.source.OSM()
    });
    map.addLayer(osmLayer);
  } else if (selectedLayer === 'bing') {
    var bingLayer = new ol.layer.Tile({
      source: new ol.source.BingMaps({
        key: 'Your Bing Maps API Key',
        imagerySet: 'Aerial'
      })
    });
    map.addLayer(bingLayer);
  }
});