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

版权所有，转载请注明源地址                          

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