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);