项目中应用到的框架和技术之二——ol3-ext

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