openlayer加載圖文標注，加載echarts圖，並隨地圖縮放

先看一下效果，主要實現了三種圖文標注的效果：

第一種：文字 + 圖片，文字在圖片中間，圖片隨地圖縮放而縮放

第二種：文字 +  圖片，文字分布在圖片的上方和下方，圖片隨地圖縮放而縮放

第三種：文字 + 圖片 + echarts圖表，圖片和echarts圖表隨地圖縮放而縮放

關於圖文標注的展示，網上教程很多，在下就不做贅述，主要說明一下圖片隨地圖縮放而縮放的思路：

1、獲取當前縮放等級

2、根據縮放等級，刷新圖層，並動態設置圖片的寬和高

 

第一步的關鍵代碼如下：

function createLabelStyle3(feature) {
        var _zoom = map.getView().getZoom(),
            _scale = _zoom * 0.083;

        var fontSize = 'bold ' + feature.get('fontSize') * _scale + 'px 微軟雅黑';

        var imgWidth = feature.get('imgWidth'); //圖片寬
        var imgHeight = feature.get('imgHeight');  //圖片高

        var offsetY = -(imgHeight * _scale);  //height
        var textContent = '數據：' + feature.get('sl') + '個' + '\n' + '數據2：' + feature.get('whl') + '%';
        var text = new ol.style.Text({
            textAlign: 'center',            //位置
            textBaseline: 'bottom',         //基准線
            font: fontSize,    //文字樣式
            offsetY: offsetY / 2,  //y方向偏移
            text: textContent,      //文本內容
            fill: new ol.style.Fill({       //文本填充樣式（即文字顏色)
                color: feature.get('textFillColor')
            })
        });
        return new ol.style.Style({
            text: text
        });
    }

 

第二步的關鍵代碼如下：

       //動態改變vector layer的樣式
        var features = layer.getSource().getFeatures();

        $.each(features, function (index, value) {
            var feature = value;
            feature.setStyle(createLabelStyle(feature));
        });

     //動態改變overlay的樣式
        map.getOverlays().clear();
        var _zoom = map.getView().getZoom();
        if (_zoom > 2 && echartsDataObj) {
            $.each(echartsDataObj, function (index, obj) {
                createLayerType4(obj);
            });
        }

 

示例代碼由大吳哥整理，加群私聊他即可獲取。

-------------------------------------------------------------------------------------------------

QQ群：871934478

版權所有，轉載請注明源地址                          

-------------------------------------------------------------------------------------------------