首先放一段渲染多边形的代码块:
/**
* 展示多边形
* @param values
* @param vectorSource
*/
import Translate from 'ol/interaction/Translate';
addPolygon (value) {
this.createPolygonSource();
var features = [];
for (var i = 0; i < value.length; i++) {
var tempval = value[i];
var feature = new Feature();
feature.setGeometry(new Polygon(tempval.zbs));
feature.setProperties({
content: tempval.content,
zbs:tempval.zbs,
type:'clickPoint'
});
var iconStyle = new Style({
stroke: new Stroke({ // 边框
color: 'red',
width: 3
}),
fill: new Fill({ // 填充颜色
color: tempval.color
})
});
feature.setStyle(iconStyle);
features.push(feature);
}
PolygonSource.addFeatures(features);
// 以下是鼠标经过时事件
map.on('pointermove', function (e) {
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
//=====获取到当前像素下的feature
var feature = map.forEachFeatureAtPixel(pixel, function (feature, layer) {
return feature;
});
console.log(feature)
if (!feature) {
// new baseMap().clearlightPolygon();
return false;
}
var translate = new Translate({ //拖拽移动interaction
features: feature //拖拽的为选择的要素
});
map.addInteraction(translate);
// debugger
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});
}
当代码执行到 map.addInteraction(translate) 这一行的时候,出现以下问题:
请大神看一下::