鼠標(biāo)移動(dòng)變色和顯示標(biāo)注查看官方樣式

樣式

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方法可以自定義坐標(biāo)系
                    dataProjection : 'EPSG:4326', // 設(shè)定JSON數(shù)據(jù)使用的坐標(biāo)系
                    featureProjection : 'EPSG:3857' // 設(shè)定當(dāng)前地圖使用的feature的坐標(biāo)系
                })
            }),
            // 樣式設(shè)置
            style : function(feature) {
                style.getText().setText(feature.get('cn'));// 顯示名稱(chēng)
                style.getFill().setColor(colour);// 顯示顏色
            } 
            return style;
            }
        });

圖標(biāo)

//圖標(biāo)設(shè)置
        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);//經(jīng)度
                    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'))
                    });
                    //標(biāo)注樣式設(shè)置
                    rome.setStyle(new ol.style.Style({
                        text: new ol.style.Text({
                            textAlign: 'center',            //位置-對(duì)齊方式
                            textBaseline: 'middle',         //基準(zhǔn)線
                            font: '16px Calibri, 黑體',       //文字樣式
                            text: cn,                       //文本內(nèi)容
                            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],             //錨點(diǎn)-控制標(biāo)注圖片和文字之間的距離([0]:x軸0.5中心;[1]y軸:0頂部)
                            anchorOrigin:'top-right',       //錨點(diǎn)源-標(biāo)注樣式的起點(diǎn)位置
                            anchorXUnits: 'fraction',       //錨點(diǎn)X值單位(單位:分?jǐn)?shù))
                            anchorYUnits: 'pixels',         //錨點(diǎn)Y值單位(單位:像素)
                            offsetOrigin: 'top-right',      //偏移原點(diǎn)-偏移起點(diǎn)位置的方向
                            //opacity: 0.1,                 //圖標(biāo)透明度
                            crossOrigin: 'anonymous',
                            scale: 0.3,                     //標(biāo)注圖標(biāo)大小         
                            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,    // 中心坐標(biāo)x軸y軸
                extent : extent,    // 地圖范圍left, bottom, right, top
                maxZoom : zoom[0],  // 最大縮放級(jí)別
                minZoom : zoom[1],  // 最小縮放級(jí)別
                zoom : zoom[2]      // 當(dāng)前縮放級(jí)別
            })
        });

禁止移動(dòng)地圖

// 禁止鼠標(biāo)拖動(dòng)  
        let pan = getPan();
        pan.setActive(false);//false：當(dāng)前地圖不可拖動(dòng)。true：可拖動(dòng)
        function getPan() {
            let pan;
            map.getInteractions().forEach(function(element, index, array) {
                if(element instanceof ol.interaction.DragPan) {
                    pan = element;
                }
            })
            return pan;
        }