带有requirejs的Openlayer群集

时间:2018-06-28 14:22:28

标签: javascript requirejs openlayers

我正在尝试在我的应用程序上实现此示例:http://openlayers.org/en/latest/examples/cluster.html

我的问题是我必须使用RequiereJS,因为它在Magento 2管理员上。

我成功添加了库并显示了带有标记的简单地图,但是尝试创建群集地图时出现以下错误: TypeError:ol.source.Vector.VectorSource不是构造函数 < / p>

我一直试图做的是以下事情:

init: function (element, lat, lng, zoom, type) {
            this.latitude = lat;
            this.longitude = lng;
            this.type = type;
            var raster = new ol.layer.Tile({
                source: new ol.source.OSM()
            });
            var count = 20000;
            var features = new Array(count);
            var e = 4500000;
            for (var i = 0; i < count; ++i) {
                var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
                features[i] = new ol.Feature(new ol.geom.Point(coordinates));
            }
            console.log(ol.source.Vector);
            console.log(ol.source.Vector.VectorSource);
            var source = new ol.source.Vector.VectorSource({
                features: features,
            });

            var clusterSource = ol.source.Cluster({
                distance: 100,
                source: source
            });
            var styleCache = {};
            var clusters = new ol.layer.VectorLayer({
                source: clusterSource,
                style: function(feature) {
                    var size = feature.get('features').length;
                    var style = styleCache[size];
                    if (!style) {
                        style = new ol.style.Style({
                            image: new ol.style.CircleStyle({
                                radius: 10,
                                stroke: new ol.style.Stroke({
                                    color: '#fff'
                                }),
                                fill: new ol.style.Fill({
                                    color: '#3399CC'
                                })
                            }),
                            text: new ol.style.Text({
                                text: size.toString(),
                                fill: new Fill({
                                    color: '#fff'
                                })
                            })
                        });
                        styleCache[size] = style;
                    }
                    return style;
                }
            });
            this.map = new ol.Map({
                target: element,
                layers: [raster, clusters],
                view: new ol.View({
                    center: ol.proj.fromLonLat([lng, lat]),
                    zoom: zoom
                })
            });
        },

我认为部分问题是我不知道如何添加示例中显示的导入:

      import Feature from 'ol/Feature.js';
      import Map from 'ol/Map.js';
      import View from 'ol/View.js';
      import Point from 'ol/geom/Point.js';
      import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
      import {Cluster, OSM, Vector as VectorSource} from 'ol/source.js';
      import {Circle as CircleStyle, Fill, Stroke, Style, Text} from 'ol/style.js';

我如何满足依赖性? 预先感谢。

0 个答案:

没有答案