OpenLayers 3 之 切换图层控件

OpenLayers 3 之 切换图层控件

openlayers 3中并没有默认的图层切换控件，GitHub中有一个项目实现了我们需要的控件-------- ol3-layerswitcher 。

可全局引入，模块化引入须注意，必须把ol声明成全局变量。否则引入ol3-layerswitcher时报错：ol is not defined;

　　因为webpack在模块化引入时每个文件的作用域是封闭的，导致加载ol3-layerswitcher时引用不到openlayers模块中的ol。

首先npm install加载 ol3-layerswitcher；

npm install  ol3-layerswitcher

模块化引入方法：

import ol from 'openlayers';
import 'ol3-layerswitcher/src/ol3-layerswitcher';

把ol声明成全局变量：

module.exports = {
    resolve: {
        root: [],
        alias: {
            openlayers: path.resolve(__dirname, '../node_modules/openlayers/dist/ol.js')
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
              ol: 'openlayers'
        })
    ]
};

使用方法：

1.在每个图层添加一个 title 属性；

var tian_di_tu_road_layer = new ol.layer.Tile({
    title: "天地图路网",
    source: new ol.source.XYZ({
        url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
    })
});

注：默认关闭是需在title之后增加：

visible: false,

2.tipLabel 属性

layer-switcher 相对于 ol.control.Control基类，只添加了一个属性 – tipLabel，这个属性是一个字符串，默认是 Legend，当鼠标位于控件之上时，会有提示文字，就是这里的 tipLabel的值，其实这个值是通过设置 html button元素的title 属性实现的。

参考自：https://blog.csdn.net/qingyafan/article/details/50043221