OpenLayers 繪製，選中，鼠標懸浮

我的openLayers案例地址：http://cyclv.gitee.io/openlayers/

實現效果:

1.繪製點，線，多邊形。

2.繪製對象添加相對應的信息，

3.選中繪畫的上的矢量圖層，並彈出信息.

3.存入數據庫中。

 繪製

官網api 

不一一列舉，官網api地址 https://openlayers.org/en/latest/apidoc/module-ol_interaction_Draw-Draw.html  （如果失效，請訪問官網，搜索Draw）

繪製樣式控制

1.new Draw（），新建繪畫時，type（點，線....)，source（繪製的目標源），Style（繪製的樣式）

draw = new Draw({
   type:'Point',
   stopClick:true
});

stopClick:阻止繪畫期間的單機，雙擊操作 

 繪製流程控制

2 繪圖監測事件 drawstart，drawend；

drawstart 再繪畫前（每一次繪畫都會觸發）

draw.on('drawstart',(e)=>{
    console.log('繪畫前')
})

drawend之後獲取到繪畫的信息。(經緯度）

draw.on('drawend',(e)=>{
   const longLat = e.feature.getGeometry().getCoordinates()
   console.log(longLat)
})

完整代碼 

addInteraction=()=> {
    draw = new ol.Draw({
         source: source,
         type: 'LineString',
    });
    map.addInteraction(draw);
    draw.on('drawstart', (evt) => {
         lengthShow = true;
         listData = [];//清空上一個繪畫的數據
    })
    draw.on('drawend', (evt) => {
         lengthShow = false
         olData = evt.feature.getGeometry().getCoordinates()
         myData(olData)
    })
}

右鍵結束繪畫 

監聽地圖右擊事件，點擊後結束繪畫

map.on("contextmenu", function (event) {
     event.preventDefault();
     draw.removeLastPoint(); //移除繪畫最後一個點
     draw.finishDrawing();  //結束繪畫
});

選中

Select Api ：https://openlayers.org/en/latest/apidoc/module-ol_interaction_Select-Select.html；

主要使用的就是 hitTolerance 在線段過細的情況下，擴大選中範圍。

        var selectSingleClick = new Select({
            hitTolerance:10 /* 選中範圍控制 */
        });
        this.setState({selectFeature:selectSingleClick})
        mapEvent.addInteraction(selectSingleClick);
        /*獲取到選中的信息*/
        selectSingleClick.on('select', (e)=>{
            // features爲選中的內容
            var features= e.target.getFeatures().getArray();
        })

鼠標懸浮

當鼠標在地圖上移動時，碰到自己的繪畫的矢量圖時，鼠標樣式變成pointer

        // 監測鼠標放到屏幕上的事件
        map.on('pointermove', function(e) {
            var pixel=map.getEventPixel(e.originalEvent);
            var feature=map.forEachFeatureAtPixel(pixel,
                function (feature) {
                    return feature;
                },
               {hitTolerance:10}
            ) 
            if(feature === undefined){
                map.getTargetElement().style.cursor="auto"
            }else{
                map.getTargetElement().style.cursor="pointer"
            }
        });