Box Selection——盒形方式选择
来源:互联网 发布:角色数据库设计 编辑:程序博客网 时间:2024/06/06 01:21
This example shows how to use a DragBox
interaction to select features. Selected features are added to the feature overlay of a select interaction (ol.interaction.Select
) for highlighting.
Use Ctrl+Drag
(Command+Drag
on Mac) to draw boxes.
这个例子用来展示如何使用DragBox交互控件来选择要素,选中的要素被添加到选择交互控件(ol.interaction.Select)
的要素叠加层中来进行高亮显示。
使用Ctrl+Drag (Mac系统使用Command+Drag)来绘制盒形。
代码:
<!DOCTYPE html><html> <head> <title>Box Selection</title> <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css"> <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script> <style> .ol-dragbox { background-color: rgba(255,255,255,0.4); border-color: rgba(100,150,0,1); } </style> </head> <body> <div id="map" class="map"></div> <div id="info">No countries selected</div> <script> //加载GeoJson格式的矢量数据 var vectorSource = new ol.source.Vector({ url: 'https://openlayers.org/en/v4.2.0/examples/data/geojson/countries.geojson', format: new ol.format.GeoJSON() }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), new ol.layer.Vector({ source: vectorSource }) ], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); //创建选择交互控件 var select = new ol.interaction.Select(); map.addInteraction(select); //获取所有选择的要素 var selectedFeatures = select.getFeatures(); //创建DragBox交互控件 var dragBox = new ol.interaction.DragBox({ //ol.events.condition.platformModifierKeyOnly //Return true if only the platform-modifier-key (the meta-key on Mac, ctrl-key otherwise) is pressed, //如果只按下platform-modifier-key(Mac平台是meta-key,其他平台是ctrl-key)则返回true //false otherwise //其他都返回false condition: ol.events.condition.platformModifierKeyOnly }); map.addInteraction(dragBox); dragBox.on('boxend', function() { //获取当前绘制的范围 var extent = dragBox.getGeometry().getExtent(); //遍历当前范围内的每一个要素,并把它添加到selectedFeatures集合中 vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) { selectedFeatures.push(feature); }); }); //每次绘制之前清除selectedFeatures中的所有要素 dragBox.on('boxstart', function() { selectedFeatures.clear(); }); var infoBox = document.getElementById('info'); selectedFeatures.on(['add', 'remove'], function() { //遍历selectedFeatures中的每一个要素,并返回每一个要素的名称 var names = selectedFeatures.getArray().map(function(feature) { return feature.get('name'); }); //如果names数组的长度大于0,则把它用逗号分隔添加到id为info的DIV标签中 if (names.length > 0) { infoBox.innerHTML = names.join(', '); } else { infoBox.innerHTML = 'No countries selected'; } }); </script> </body></html>
阅读全文
0 0
- Box Selection——盒形方式选择
- 选择排序算法——Selection Sort
- 选择排序—简单选择排序(Simple Selection Sort)
- 选择排序—简单选择排序(Simple Selection Sort)
- OpenLayers3-7-Box Selection
- 排序算法——选择排序(Selection Sort)
- 斯坦福大学机器学习——特征选择(Feature selection)
- 排序算法——选择排序(Selection Sort)
- Visual Studio使用小技巧5 – 区块选择(box selection)的拷贝(copy)和粘贴(paste)
- 算法总结JS版(二)—— 选择排序(Selection Sort)
- 选择排序(selection sort)
- 选择排序(Selection Sort)
- Type Selection 类型选择
- selection sort 选择排序
- 选择排序 Selection Sort
- 选择排序(Selection Sort)
- 选择排序(Selection Sort)
- 选择排序 (Selection Sort)
- 用pycharm远程单步调试
- 注册表_操作
- SVN Access to ‘/svn/Test/!svn/me’ forbidden,不能更新解决办法
- Android学习之Intent
- Oralce(全)个人笔记
- Box Selection——盒形方式选择
- mysql命令行的导入导出sql,txt,excel(都在linux或windows命令行操作)
- Host文件
- j jvm内存管理
- python id函数的使用
- sge使用文档
- mysql恢复删除的数据库和自动备份数据
- 编程实战总结1
- 证明多元可微