Javascript Openlayers,更改群集标记
我根据这个做了一张地图。现在,如果簇只包含一个点,我想将圆从簇更改为外部图形 你知道有什么解决办法吗 编辑: 以下是我迄今为止的代码:Javascript Openlayers,更改群集标记,javascript,map,icons,openlayers,markers,Javascript,Map,Icons,Openlayers,Markers,我根据这个做了一张地图。现在,如果簇只包含一个点,我想将圆从簇更改为外部图形 你知道有什么解决办法吗 编辑: 以下是我迄今为止的代码: PROJECTION_4326 = new OpenLayers.Projection("EPSG:4326"); PROJECTION_MERC = new OpenLayers.Projection("EPSG:900913"); var map, template, evt, features = []; var stylesMarkerImage =
PROJECTION_4326 = new OpenLayers.Projection("EPSG:4326");
PROJECTION_MERC = new OpenLayers.Projection("EPSG:900913");
var map, template, evt, features = [];
var stylesMarkerImage = {
externalGraphic : 'markerimage.png',
graphicHeight : 37,
graphicWidth : 32,
graphicYOffset : -35,
graphicXOffset : -16
};
/**
* A specific format for parsing Flickr API JSON responses.
*/
OpenLayers.Format.Flickr = OpenLayers.Class(OpenLayers.Format, {
read: function(obj) {
var photos = new Array();
var photo, point,
feature;
photos.push({longitude: 8.807357, latitude: 53.075813, title: "Title1", bild: "sample1.png", description: "Some desc1"});
photos.push({longitude: 8.808367, latitude: 53.075813, title: "Title2", bild: "sample2.png", description: "Some desc2"});
photos.push({longitude: 8.807357, latitude: 53.076823, title: "Title3", bild: "sample3.png", description: "Some desc3"});
photos.push({longitude: 8.809357, latitude: 53.076823, title: "Title4", bild: "sample4.png", description: "Some desc4"});
for(var i=0,l=photos.length; i<l; i++) {
photo = photos[i];
point = new OpenLayers.Geometry.Point(photo.longitude, photo.latitude);
feature = new OpenLayers.Feature.Vector(point, {
id: i,
lon: photo.longitude,
lat: photo.latitude,
title: photo.title,
bild: photo.bild,
description: photo.description
}, stylesMarkerImage);
features.push(feature);
}
return features;
}
});
function init() {
map = new OpenLayers.Map('map', {
controls : [ new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.OverviewMap() ],
numZoomLevels : 18,
maxResolution : 156543,
units : 'm',
projection : PROJECTION_MERC,
displayProjection : PROJECTION_4326
});
var base = new OpenLayers.Layer.OSM();
var style = new OpenLayers.Style({
pointRadius: "${radius}",
fillColor: "#ffcc66",
fillOpacity: 0.8,
strokeColor: "#cc6633",
strokeWidth: 2,
strokeOpacity: 0.8
}, {
context: {
radius: function(feature) {
return Math.min(feature.attributes.count, 7) + 3;
}
}
});
var photos = new OpenLayers.Layer.Vector("Photos", {
projection: "EPSG:4326",
strategies: [
new OpenLayers.Strategy.Fixed(),
new OpenLayers.Strategy.Cluster()
],
protocol: new OpenLayers.Protocol.Script({
url: "http://api.flickr.com/services/rest",
params: {
api_key: '',
format: 'json',
method: '',
extras: '',
per_page: 150,
page: 1,
bbox: [-180, -90, 180, 90]
},
callbackKey: 'jsoncallback',
format: new OpenLayers.Format.Flickr()
}),
styleMap: new OpenLayers.StyleMap({
"default": style,
"select": {
fillColor: "#8aeeef",
strokeColor: "#32a8a9"
}
})
});
selectControl = new OpenLayers.Control.SelectFeature(
photos, {
onSelect : onFeatureSelect,
onUnselect : onFeatureUnselect
});
map.addControl(selectControl);
selectControl.activate();
map.addLayers([base, photos]);
var center = new OpenLayers.LonLat(8.807357, 53.075813);
var centerAsMerc = center.transform(PROJECTION_4326, PROJECTION_MERC);
map.setCenter(centerAsMerc, 9);
function onFeatureSelect(event) {
evt = event.layer;
console.log(event);
if (event.cluster === 0) { return; }
var features = event.cluster;
text = '<div class="popupcontent">';
console.log(features.length);
var length = features.length;
if (length > 5) {
length = 5;
}
if (features.length > 1) {
for(var i=0, len = length; i<len; ++i) {
var feature = features[i].attributes;
if (i == 0) {
text += '<a class="zoom-plus" href="#" onclick="zoomPlus('+feature.lon+', '+feature.lat+');">Zoom in</a> - <a class="zoom-minus" href="#" onclick="zoomMinus('+feature.lon+', '+feature.lat+');">Zoom out</a>';
}
text += '<div><b><a class="zoom-to-location" href="#" onclick="zoomToFeature('+feature.lon+', '+feature.lat+', true, '+feature.id+', \''+feature.title+'\', \''+feature.description+'\', \''+feature.bild+'\');">' + feature.title + '</a></b></div>' + feature.description;
}
}
else {
var feature = features[0].attributes;
text += '<img src="'+feature.bild+'" alt="" width="100" height="100" style="float: left; padding: 1px; border: 1px solid #cccccc; margin: 1px 4px 2px 1px;"/><a class="zoom-to-location" href="#" onclick="zoomToFeature('+feature.lon+', '+feature.lat+');">Zoom in</a><br /><a class="zoom-out" href="#" onclick="zoomOut('+feature.lon+', '+feature.lat+');">Zoom out</a><div style="font-size: x-large;">'
+ feature.title + "</div>" + feature.description;
}
text += '</div>';
popup = new OpenLayers.Popup.FramedCloud("feature", event.geometry
.getBounds().getCenterLonLat(), null, text, event.marker, true,
function(b) {
if (event.layer == null) {
event.layer = evt;
evt = null;
}
selectControl.unselect(event)
});
event.popup = popup;
map.addPopup(popup);
popup.updateSize();
}
function onFeatureUnselect(a) {
map.removePopup(a.popup);
a.popup.destroy();
a.popup = null
}
}
function zoomToFeature(lon, lat, isCluster, id, title, description, bild) {
var center = new OpenLayers.LonLat(lon, lat);
var centerAsMerc = center.transform(PROJECTION_4326, PROJECTION_MERC);
map.setCenter(centerAsMerc, 18);
if(isCluster) {
var pops = map.popups;
for(var a = 0; a < pops.length; a++){
map.removePopup(map.popups[a]);
};
text = '<div class="popupcontent">';
text += '<img src="'+bild+'" alt="" width="100" height="100" style="float: left; padding: 1px; border: 1px solid #cccccc; margin: 1px 4px 2px 1px;"/><a class="zoom-out" href="#" onclick="zoomOut('+lon+', '+lat+');">Zoom out</a><div style="font-size: x-large;">'
+ title + "</div>" + description;
var popup = new OpenLayers.Popup.FramedCloud("feature", center, null, text, null, true);
text += '</div>';
map.addPopup(popup);
popup.updateSize();
}
}
function zoomOut(lon, lat) {
var center = new OpenLayers.LonLat(lon, lat);
var centerAsMerc = center.transform(PROJECTION_4326, PROJECTION_MERC);
map.setCenter(centerAsMerc, 8);
}
function zoomPlus(lon, lat) {
var center = new OpenLayers.LonLat(lon, lat);
var centerAsMerc = center.transform(PROJECTION_4326, PROJECTION_MERC);
map.setCenter(centerAsMerc, map.getZoom()+1);
var pops = map.popups;
for(var a = 0; a < pops.length; a++){
map.removePopup(map.popups[a]);
};
}
function zoomMinus(lon, lat) {
var center = new OpenLayers.LonLat(lon, lat);
var centerAsMerc = center.transform(PROJECTION_4326, PROJECTION_MERC);
map.setCenter(centerAsMerc, map.getZoom()-1);
var pops = map.popups;
for(var a = 0; a < pops.length; a++){
map.removePopup(map.popups[a]);
};
}
PROJECTION_4326=新的OpenLayers.PROJECTION(“EPSG:4326”);
PROJECTION_MERC=新OpenLayers.PROJECTION(“EPSG:900913”);
var映射,模板,evt,features=[];
变量stylesMarkerImage={
外部图形:“markerimage.png”,
身高:37,
宽度:32,
图形偏移:-35,
图形偏移:-16
};
/**
*用于解析Flickr API JSON响应的特定格式。
*/
OpenLayers.Format.Flickr=OpenLayers.Class(OpenLayers.Format{
读:功能(obj){
var photos=新数组();
照片,点,
特征;
照片:push({经度:8.807357,纬度:53.075813,标题:“Title1”,图片:“sample1.png”,描述:“一些描述”});
照片:push({经度:8.808367,纬度:53.075813,标题:“Title2”,图片:“sample2.png”,描述:“Some desc2”});
照片:push({经度:8.807357,纬度:53.076823,标题:“Title3”,图片:“sample3.png”,描述:“Some desc3”});
照片.推送({经度:8.809357,纬度:53.076823,标题:“Title4”,图片:“sample4.png”,描述:“一些描述”});
对于(变量i=0,l=photos.length;i 5){
长度=5;
}
如果(features.length>1){
对于(var i=0,len=length;i您需要为集群策略建立一个阈值。阈值是集群可以分组的最小功能数
strategies: [
new OpenLayers.Strategy.Fixed(),
new OpenLayers.Strategy.Cluster({ distance: 35, threshold: 2 })
],
显然,您必须在其他地方(我想是在您的json中)定义了单个功能的图标。请发布您的代码并提出更具体的问题。非常感谢,您救了我一天!