openlayers -webgl样式 Symbols with WebGL
Symbols with WebGL
When using symbol styles with WebGL, OpenLayers would render the symbol on a temporary image and would create a WebGL texture for each image. For a better performance, it is recommended to use atlas images (similar to image sprites with CSS), so that the number of textures is reduced. OpenLayers provides an AtlasManager, which when passed to the constructor of a symbol style, will create atlases for the symbols.
Related API documentation:
ol.Feature
,
ol.Map
,
ol.View
,
ol.geom.Point
,
ol.layer.Vector
,
ol.source.Vector
,
ol.style.AtlasManager
,
ol.style.Circle
,
ol.style.Fill
,
ol.style.RegularShape
,
ol.style.Stroke
,
ol.style.Style
<!DOCTYPE html> <html> <head> <title>Symbols with WebGL</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> </head> <body> <div id="map" class="map"></div> <script> var atlasManager = new ol.style.AtlasManager({ // we increase the initial size so that all symbols fit into // a single atlas image initialSize: 512 }); var symbolInfo = [{ opacity: 1.0, scale: 1.0, fillColor: 'rgba(255, 153, 0, 0.4)', strokeColor: 'rgba(255, 204, 0, 0.2)' }, { opacity: 0.75, scale: 1.25, fillColor: 'rgba(70, 80, 224, 0.4)', strokeColor: 'rgba(12, 21, 138, 0.2)' }, { opacity: 0.5, scale: 1.5, fillColor: 'rgba(66, 150, 79, 0.4)', strokeColor: 'rgba(20, 99, 32, 0.2)' }, { opacity: 1.0, scale: 1.0, fillColor: 'rgba(176, 61, 35, 0.4)', strokeColor: 'rgba(145, 43, 20, 0.2)' }]; var radiuses = [3, 6, 9, 15, 19, 25]; var symbolCount = symbolInfo.length * radiuses.length * 2; var symbols = []; var i, j; for (i = 0; i < symbolInfo.length; ++i) { var info = symbolInfo[i]; for (j = 0; j < radiuses.length; ++j) { // circle symbol symbols.push(new ol.style.Circle({ opacity: info.opacity, scale: info.scale, radius: radiuses[j], fill: new ol.style.Fill({ color: info.fillColor }), stroke: new ol.style.Stroke({ color: info.strokeColor, width: 1 }), // by passing the atlas manager to the symbol, // the symbol will be added to an atlas atlasManager: atlasManager })); // star symbol symbols.push(new ol.style.RegularShape({ points: 8, opacity: info.opacity, scale: info.scale, radius: radiuses[j], radius2: radiuses[j] * 0.7, angle: 1.4, fill: new ol.style.Fill({ color: info.fillColor }), stroke: new ol.style.Stroke({ color: info.strokeColor, width: 1 }), atlasManager: atlasManager })); } } var featureCount = 50000; var features = new Array(featureCount); var feature, geometry; var e = 25000000; for (i = 0; i < featureCount; ++i) { geometry = new ol.geom.Point( [2 * e * Math.random() - e, 2 * e * Math.random() - e]); feature = new ol.Feature(geometry); feature.setStyle( new ol.style.Style({ image: symbols[i % symbolCount] }) ); features[i] = feature; } var vectorSource = new ol.source.Vector({ features: features }); var vector = new ol.layer.Vector({ source: vectorSource }); var map = new ol.Map({ layers: [vector], target: document.getElementById('map'), view: new ol.View({ center: [0, 0], zoom: 4 }) }); </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