点击地图的时候添加标注
this.map.on('singleclick',function(e){
that.clickPoint = e.coordinate
if (that.vectorSource) {
that.vectorSource.clear()
}
let startMarker = new Feature({
type: 'icon',
geometry: new Point(e.coordinate)
});
//设置点要素样式
startMarker.setStyle(new olStyle({
image: new olIcon({
src: that.api + '/tool/star2.png'
})
}));
//矢量标注的数据源
that.vectorSource = new SourceVector({
features: [startMarker]
});
//矢量标注图层
let vectorLayer = new layerVector({
source: that.vectorSource,
zIndex:9999
});
console.log(vectorLayer)
that.map.addLayer(vectorLayer);
})
贴的图鼠标滑动时不能超过该框,需要给ol/View也设置extent,这样鼠标滑动图片时不会划出。
在框内的地图不随着鼠标移动的时候而移动
this.extent = [0, 0, 1024, 968];
this.projection=new Projection({
code: 'xkcd-image',
units: 'pixels',
extent: this.extent
})
this.view=new olView({
// center:[510,480],
projection: this.projection,
zoom:1,
maxZoom: 1,
minZoom:1,
extent: this.extent
})
this.map=new olMap({
target:'map',
view:this.view
})
//以下代码是禁止拖动地图
let that = this;
let pan = getPan();
pan.setActive(false);//false:当前地图不可拖动。true:可拖动
function getPan() {
let pan;
that.map.getInteractions().forEach(function(element, index, array) {
if(element instanceof DragPan) {
pan = element;
}
})
return pan;
}