Openlayer3中应用的技术

ol3-ext有很多很丰富的效果，可以不用重复造轮子，ol3-ext示例大全：http://viglino.github.io/ol3-ext/

在本次项目中使用到了ol3-ext的两个功能：图层管理器和辅助工具栏

1.图层管理器

实现的功能有：

1）设置图层显示与隐藏

2）设置图层组显示与隐藏

3）设置图层透明度

4）设置图层顺序

5）当前比例尺不显示的图层灰色显示

代码：

    // A group layer for base layers
    var baseLayers = new ol.layer.Group(
        {
            title: '图层',
            openInLayerSwitcher: true,
            layers: [
                new ol.layer.Tile({
                    title: "OSM",
                    source: new ol.source.OSM({
                        attributions: []
                    })
                }),
                vectorLayerXB,
                vectorLayerXBLabel,
                vectorLayerCun,
                vectorLayerXiang,
                vectorLayerXian,
                vectorLayerShi,
                vectorLayerSheng,
                vectorLayerGuo,
                vectorTemp
            ]
        });

    var layerSwitcherControl = new ol.control.LayerSwitcher();
    map.addControl(layerSwitcherControl);

 

 2.辅助工具栏

代码：

    //初始化辅助工具栏
    this.mainbar = new ol.control.Bar();

    // Edit control bar
    var editbar = new ol.control.Bar(
        {
            toggleOne: true,    // one control active at the same time
            group: false            // group controls together
        });
    this.mainbar.addControl(editbar);

    //线测量
    var lineMeasure = new ol.control.TextButton(
        {
            html: '<i class="material-icons">show_chart</i>',
            title: "线测量",
            handleClick: function () {
                var ToolManager = require('../../mapzone-ol3-plugin/mzTool/mzToolManager.js');
                var manager = ToolManager.getToolManager(this.map_);
                manager.getTool('测量').setMeatureType('LineString');
            }
        });

    editbar.addControl(lineMeasure);

    //面测量
    var lineMeasure = new ol.control.TextButton(
        {
            html: '<i class="material-icons">panorama_wide_angle</i>',
            title: "面测量",
            handleClick: function () {
                var ToolManager = require('../../mapzone-ol3-plugin/mzTool/mzToolManager.js');
                var manager = ToolManager.getToolManager(this.map_);
                manager.getTool('测量').setMeatureType('Polygon');
            }
        });

    editbar.addControl(lineMeasure);

    //完成本次测量
    var finishDrawing = new ol.control.TextButton(
        {
            html: '<i class="fa fa-check"></i>',
            title: "完成",
            handleClick: function () {
                var ToolManager = require('../../mapzone-ol3-plugin/mzTool/mzToolManager.js');
                var manager = ToolManager.getToolManager(this.map_);
                manager.getTool('测量').interaction.finishDrawing();
            }
        });

    editbar.addControl(finishDrawing);

    //取消本次测量
    var cancleDrawing = new ol.control.TextButton(
        {
            html: '<i class="fa fa-times"></i>',
            title: "取消",
            handleClick: function () {
                var ToolManager = require('../../mapzone-ol3-plugin/mzTool/mzToolManager.js');
                var manager = ToolManager.getToolManager(this.map_);
                manager.getTool('测量').interaction.abortDrawing_();
            }
        });

    editbar.addControl(cancleDrawing);


    //清除测量结果
    var clearMeasureResult = new ol.control.TextButton(
        {
            html: '<i class="fa fa-paint-brush"></i>',
            title: "清除测量结果",
            handleClick: function () {
                var ToolManager = require('../../mapzone-ol3-plugin/mzTool/mzToolManager.js');
                var manager = ToolManager.getToolManager(this.map_);
                manager.getTool('测量').clearMeasureResult();
                manager.getTool('测量').setMeatureType(manager.getTool('测量').measureType);
            }
        });

    editbar.addControl(clearMeasureResult);

    //加载辅助工具栏
    this.interaction.map_.addControl(this.mainbar);