0

我从这个链接中使用了 angular-openlayers-directive：https ://github.com/tombatossals/angular-openlayers-directive

我想达到这个效果：http ://tombatossals.github.io/angular-openlayers-directive/examples/059-layer-clustering.html

不幸的是，我的应用程序中只显示了一张没有圆点的地图。我的代码与 github 示例中的代码相同。

我的代码：

function createPointStyle(color, text) {
            var options = {
                image: new ol.style.Circle({
                    radius: 10,
                    fill: new ol.style.Fill({
                        color: color,
                        opacity: 0.6
                    }),
                    stroke: new ol.style.Stroke({
                        color: 'white',
                        opacity: 0.4
                    })
                })
            };
            if (text) {
                options.text = new ol.style.Text({
                    text: text,
                    fill: new ol.style.Fill({
                        color: 'white'
                    })
                });
            }
            return new ol.style.Style(options);
        }
        function createIconStyle() {
            return new ol.style.Style({
                image: new ol.style.Icon({
                    anchor: [0.5, 1],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'fraction',
                    opacity: 0.90,
                    src: 'resource/img/mapin.png'
                })
            });
        }
        function getStyle(feature) {
            // Take car we use clustering, thus possibly have multiple features in one
            var features = feature.get('features');
            var style = null;
            // Icon base style ?
            if ($scope.icon) {
                style = createIconStyle();
            }
            // Circle + txt base style
            // Add number of clustered item in this case
            else if (features && features.length > 1) {
                style = createPointStyle('blue', features.length.toFixed());
            } else {
                style = createPointStyle('blue');
            }
            return [style];
        }
        angular.extend($scope, {
            center: {
                lat: 43.88,
                lon: 7.57,
                zoom: 2
            },
            clusters: {
                clustering: true,
                clusteringDistance: 40,
                source: {
                    type: 'KML',
                    projection: 'EPSG:3857',
                    url: 'resource/kml/earthquakes.kml'
                },
                style: getStyle
            },
            // Default to circles
            icon: false
        });

有人知道为什么它不起作用吗？

4

0 回答 0