Question

我设法得到一个圆圈，但似乎无法在这里应用渐变。最中心必须是最暗的颜色。请在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>

Answer 1

CanvasPattern和CanvasGradient现在可以实现。

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

使用颜色渐变创建圆而不使用热图

1 个答案: