openlayers -框选 按住ctrl鼠标框选
<!DOCTYPE html> <html> <head> <title>Box Selection</title> <link rel="stylesheet" href="http://openlayers.org/en/v3.13.0/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/v3.13.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> var vectorSource = new ol.source.Vector({ url: '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 }) ], renderer: 'canvas', target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); // a normal select interaction to handle click var select = new ol.interaction.Select(); map.addInteraction(select); var selectedFeatures = select.getFeatures(); // a DragBox interaction used to select features by drawing boxes var dragBox = new ol.interaction.DragBox({ condition: ol.events.condition.platformModifierKeyOnly }); map.addInteraction(dragBox); var infoBox = document.getElementById('info'); dragBox.on('boxend', function() { // features that intersect the box are added to the collection of // selected features, and their names are displayed in the "info" // div var info = []; var extent = dragBox.getGeometry().getExtent(); vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) { selectedFeatures.push(feature); info.push(feature.get('name')); }); if (info.length > 0) { infoBox.innerHTML = info.join(', '); } }); // clear selection when drawing a new box and when clicking on the map dragBox.on('boxstart', function() { selectedFeatures.clear(); infoBox.innerHTML = ' '; }); map.on('click', function() { selectedFeatures.clear(); infoBox.innerHTML = ' '; }); </script> </body> </html>
专业从事基于C#,WinForm ,WPF,Silverlight,WCF以及MS Sql Server 2000/2005/2008/2012 Oracle 9i/10g/11g数据库系统的ERP,CRM,企业进销存等各种数据库管理系统开发。Asp.net,Asp.net mvc,Webservice,WCF, Webapi等服务程序开发。
基于Oracle MySQL MSSql postgresql各种数据库的管理系统数据同步服务。以及基于MapXtreme, Arcgis Engine ,以及基于Arcgis for silverlight/Javascript的WebGIS等相关的GIS系统二次开发。基于Windows 10 Mobile的移动端开发方案。针对各种系统的二次开发维护,并提供相关开发的技术性支持,如程序BUG解决,应用系统架构,技术难题攻克等相关技术服务。
联系方式: QQ :80163278(devgis) 邮箱:devgis@qq.com