鼠标移动变色和显示标注查看官方样式

样式

var style = new ol.style.Style({// 起始样式
            fill : new ol.style.Fill({// 填充要素样式
                color : '#B4FCD1'
            }),
            stroke : new ol.style.Stroke({// 边界样色
                color : '#F5F5F5',
                width : 2
            }),
            text : new ol.style.Text({// 字体样色
                font : '14px Calibri, 黑体',
                fill : new ol.style.Fill({
                    color : 'black'
                })
            })
        });
        
        var vectorLayer = new ol.layer.Vector({//地图-填充颜色字体等样式
            source : new ol.source.Vector({
                features : (new ol.format.GeoJSON()).readFeatures(res, {// 用readFeatures方法可以自定义坐标系
                    dataProjection : 'EPSG:4326', // 设定JSON数据使用的坐标系
                    featureProjection : 'EPSG:3857' // 设定当前地图使用的feature的坐标系
                })
            }),
            // 样式设置
            style : function(feature) {
                style.getText().setText(feature.get('cn'));// 显示名称
                style.getFill().setColor(colour);// 显示颜色
            } 
            return style;
            }
        });

图标

//图标设置
        var iconArr = [];
            for(var i = 0; i < map.features.length; i++){
                var arr = map.features[i].properties.wafotown;
                if (arr != null && arr.length > 0) {
                    var lon = parseFloat(map.features[i].properties.center_x);//经度
                    var lat = parseFloat(map.features[i].properties.center_y);//纬度
                    var rome = new ol.Feature({
                        name:cn,
                        geometry:new ol.geom.Point(new ol.proj.fromLonLat([lon,lat],'EPSG:3857'))
                    });
                    //标注样式设置
                    rome.setStyle(new ol.style.Style({
                        text: new ol.style.Text({
                            textAlign: 'center',            //位置-对齐方式
                            textBaseline: 'middle',         //基准线
                            font: '16px Calibri, 黑体',       //文字样式
                            text: cn,                       //文本内容
                            fill: new ol.style.Fill({       //文本填充样式（即文字颜色)
                                color: 'black'
                            }),
                            stroke: new ol.style.Stroke({
                                color: 'white', 
                                width: 1.5
                            })
                        }),
                        image: new ol.style.Icon({
                            anchor: [0.5, -10],             //锚点-控制标注图片和文字之间的距离([0]:x轴0.5中心;[1]y轴:0顶部)
                            anchorOrigin:'top-right',       //锚点源-标注样式的起点位置
                            anchorXUnits: 'fraction',       //锚点X值单位(单位:分数)
                            anchorYUnits: 'pixels',         //锚点Y值单位(单位:像素)
                            offsetOrigin: 'top-right',      //偏移原点-偏移起点位置的方向
                            //opacity: 0.1,                 //图标透明度
                            crossOrigin: 'anonymous',
                            scale: 0.3,                     //标注图标大小         
                            src: "image/warn/"+code+".png"
                        })
                    }));
                    iconArr.push(rome);   
                }
            }
        }
        var IconLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: iconArr
            }),
        });

地图加载

var map = new ol.Map({
            layers : [ vectorLayer, IconLayer ],
            target : 'wafotown_map',
            view : new ol.View({
                center : center,    // 中心坐标x轴y轴
                extent : extent,    // 地图范围left, bottom, right, top
                maxZoom : zoom[0],  // 最大缩放级别
                minZoom : zoom[1],  // 最小缩放级别
                zoom : zoom[2]      // 当前缩放级别
            })
        });

禁止移动地图

// 禁止鼠标拖动  
        let pan = getPan();
        pan.setActive(false);//false：当前地图不可拖动。true：可拖动
        function getPan() {
            let pan;
            map.getInteractions().forEach(function(element, index, array) {
                if(element instanceof ol.interaction.DragPan) {
                    pan = element;
                }
            })
            return pan;
        }