openlayers3初始加入高亮

openlayers3初始加入高亮,在页面加载后就出现一个高亮,当点击区域面后,高亮取消。

小魔女参考了bing和GPT部分内容调写:
使用OpenLayers3初始加入高亮,可以通过下面的代码实现:

// 创建一个新的图层
var highlightLayer = new ol.layer.Vector({
    source: new ol.source.Vector()
});

// 将新图层添加到地图中
map.addLayer(highlightLayer);

// 创建一个高亮样式
var highlightStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: '#f00',
        width: 1
    }),
    fill: new ol.style.Fill({
        color: 'rgba(255,0,0,0.1)'
    })
});

// 在页面加载后,设置一个高亮
var feature = new ol.Feature({
    geometry: new ol.geom.Polygon(coordinates)
});
feature.setStyle(highlightStyle);
highlightLayer.getSource().addFeature(feature);

// 当点击区域面后,取消高亮
map.on('click', function(evt) {
    highlightLayer.getSource().clear();
});

上面的代码实现了OpenLayers3初始加入高亮,当点击区域面后,高亮取消的功能。首先,创建一个新的图层,然后将新图层添加到地图中,接着创建一个高亮样式,在页面加载后,设置一个高亮,最后,当点击区域面后,取消高亮。
回答不易,记得采纳呀。