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