1
나는이 Example을 바탕으로지도를 만들었습니다. 이제 클러스터에 하나의 점만 있으면 클러스터에서 외부 그래픽으로 원을 변경하고 싶습니다.Openlayers, 클러스터링 마커 변경
해결책을 알고 있습니까?
편집 : 지금까지
다음내 코드 : 좀 더 설명해야할지 잘 모릅니다
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]);
};
}
. 클러스터는 기본적으로 원을 표시하여 위치를 표시합니다. 클러스터에 두 개 이상의 포인터가있는 경우이 원을 마커 이미지로 바꾸고 싶습니다. 나는 이것이 어떻게 만들어 질 수 있는지 모른다. 그리고 나는 모른다. 어쩌면 동물원에서?
코드를 게시하고보다 구체적인 질문을하십시오. –