openlayer相關。。。。

點擊地圖的時候添加標註

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;
        }