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

Creating circle with color gradient without using heatmap

本文关键字：创建 有颜色 渐变 情况下      更新时间：2023-09-26

我已经设法得到了一个圆，但似乎无法在这里应用渐变。最中间的必须是最深的颜色，从而减少。请建议在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>

现在可以使用 CanvasPattern 和 CanvasGradient 。

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

相关文章：