javascript - Creating circle with color gradient without using heatmap -
i have managed circle can't seem apply gradient here. centermost has darkest color reducing on. please suggest code added in color tag. please not suggest using heatmaps either intended development work.
here code:
<!doctype html> <html> <head> <title>geojson example</title> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.css" type="text/css"> <script src="ol3/ol.js" type="text/javascript"></script> </head> <body> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div id="map" class="map"></div> </div> </div> </div> <script> var styles = { 'circle': [new ol.style.style({ fill: new ol.style.fill({ color: 'rgba(255,0,0,0.3)' }) })] }; var stylefunction = function(feature, resolution) { return styles[feature.getgeometry().gettype()]; }; var geojsonobject = { 'type': 'featurecollection', 'crs': { 'type': 'name', 'properties': { 'name': 'epsg:3857' } }, 'features': [{ 'type': 'feature', 'geometry': { 'type': 'point', 'coordinates': [10, 10] } }, ] }; var vectorsource = new ol.source.vector({ features: (new ol.format.geojson()).readfeatures(geojsonobject) }); vectorsource.addfeature(new ol.feature(new ol.geom.circle([10e5, 10e5], 15e5))); var vectorlayer = new ol.layer.vector({ source: vectorsource, style: stylefunction }); var map = new ol.map({ layers: [ new ol.layer.tile({ source: new ol.source.tilewms({ url: 'http://maps.opengeo.org/geowebcache/service/wms', params: { layers: 'bluemarble', version: '1.1.1' } }) }), vectorlayer], target: 'map', controls: ol.control.defaults({ attributionoptions: /** @type {olx.control.attributionoptions} */ ({ collapsible: false }) }), view: new ol.view({ center: [10, 10], zoom: 2 }) }); </script> </body> </html>
Comments
Post a Comment