Openlayers之feature踩坑经历-错位偏移

OpenLayers之feature踩坑经历

这是一篇关于feature图层错位的解决方案，可能遇到的问题不是一样的不一定有效果，但是不妨看看，培养一下解决问题的思路

公司让写个项目，是在地图上框个地方然后加上点击事件的，效果图是这样

然后找了大半天，网上多半是鼠标点击然后圈出区域的，这种方法都用不了，最后找到了一个方法，可用，代码如下

var map = new ol.Map({
layers:[offlineMapLayer,],   //只要加载一个底图就行，离线地图百度地图啥的都行
view: new ol.View({
projection: 'EPSG:4326',
center: [118.78, 32.07], //中心在南京为例
zoom: 10,
maxZoom:10,
minZoom:8,
}),
target: 'map' //map绑定的节点
});
var polygon = new ol.geom.Polygon([[[118.64, 32.08],[118.64, 31.92],[118.82,31.92],[118.82,32.04],[118.73, 32.05],[118.72,32.08],[118.64, 32.08]]]);
// polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857'));
//如果使用的是3857则需要打开上面的注释进行转换
var feature = new ol.Feature(polygon);
var vectorSource = new ol.source.Vector();
vectorSource.addFeature(feature);
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
//至此框框渲染出来了，下面添加这个feature的点击事件
map.on('singleclick', function(event){
map.forEachFeatureAtPixel(event.pixel, function(feature){
// 为feature发送自定义的singleclick消息
feature.dispatchEvent({type: 'singleclick', event: event});
});
})
feature.on('singleclick',event=>{
console.log('点击fe')
//写点击事件的逻辑
})

当然，以上的代码复制到js完全没有问题 ，但是！！！

不知道是不是我这个项目的坑，整合到vue中竟然渲染了两个canvas节点！！导致feature偏移，如图

给我慌得呀，网上到处找原因，也问了公司的大佬，一时间竟然没找出来，后来点html结构的时候发现了，如图

不知道为啥渲染了两个layer，两个canvas，第二个canvas的transform导致区域拉高了，为快速解决，我添加了如下代码

.box canvas{
transform: matrix(1, 0, 0, 1, 0, 0)!important;
height: 600px;
}

然后就好了，跟效果图一毛一样！！

当然，这不是最优解，毕竟！important这玩意不能乱用，只是暂时没找到别的方案罢了

如果有大佬有别的方案，拜托告知