在不使用热图的情况下创建具有颜色渐变的圆圈答案

【问题标题】：Creating circle with color gradient without using heatmap在不使用热图的情况下创建具有颜色渐变的圆圈
【发布时间】：2015-06-19 07:00:11
【问题描述】：

我设法画了一个圆圈，但似乎无法在此处应用渐变。最中心的必须是最暗的颜色，因此减少。请建议将代码添加到color 标记中。请不要建议使用热图，因为这是一项开发工作。

代码如下：

<!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>

【问题讨论】：

库本身似乎无法做到这一点。
我通过更改某些地方的缩进改进了代码块的格式，还删除了额外的换行符以使代码块紧凑。我已经从标题中删除了 in openlayers-3，因为由于标签的存在，标题中通常不需要语言/库名称。

标签： javascript jquery openlayers-3 geojson

【解决方案1】：

现在可以使用CanvasPattern 和CanvasGradient。

参考：https://openlayers.org/en/latest/examples/canvas-gradient-pattern.html

【讨论】：