我正在尝试在我的应用程序上实现此示例: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';
我如何满足依赖性? 预先感谢。