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