OpenLayers的新功能，缩放问题，属性和命中检测建议

Question

我是客户端编程的新手。到目前为止，我只编写了基于asp和php的解决方案。但现在我需要从json中检索数据并在地图上绘制(我还不知道如何做到这一点，但这是稍后的事情)。

经过几天的搜索，我认为OpenLayers可以满足我的需求。

我已经浏览了dev.openlayers网站上的示例(比如这个http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/vector-features-with-text.html)，还在stackoverflow上搜索(并找到了一些)解决方案，但它们没有为我的问题提供解决方案)。

请查看我迄今为止所做的工作：http://www.nusantech.com/bangkuujian/openlayer.html

canvas.js如下所示：

// create some sample features
var Feature = OpenLayers.Feature.Vector;
var Geometry = OpenLayers.Geometry;
var features = [
new Feature(new Geometry.Point(-220, -60),attributes = { name: "Mercury",align: "cm",xOffset:10,yOffset:50 }), 
new Feature(new Geometry.Point(-70, 120),attributes = { name: "Venus" }),
new Feature(new Geometry.Point(0, 0),attributes = { name: "Earth" }),
new Feature(new Geometry.Point(160, -100),attributes = { name: "Mars",align: "cm",xOffset:10,yOffset:50 })];
// create rule based styles
var Rule = OpenLayers.Rule;
var Filter = OpenLayers.Filter;
var style = new OpenLayers.Style({
pointRadius: 10,
strokeWidth: 3,
strokeOpacity: 0.7,
strokeColor: "#ffdd77",
fillColor: "#eecc66",
fillOpacity: 1,
label : "${name}",
fontColor: "#f0f0f0",
fontSize: "12px",
fontFamily: "Calibri, monospace",
labelAlign: "${align}",
labelXOffset: "${xOffset}",
labelYOffset: "${yOffset}",
labelOutlineWidth : 1
}, 
{
rules: [
new Rule({
elseFilter: true,
symbolizer: {graphicName: "circle"}
})
]
});
var layer = new OpenLayers.Layer.Vector(null, {
styleMap: new OpenLayers.StyleMap({'default': style,
select: {
pointRadius: 14,
strokeColor: "#e0e0e0",
strokeWidth: 5
}
}),
isBaseLayer: true,
renderers: ["Canvas"]
});
layer.addFeatures(features);
var map = new OpenLayers.Map({
div: "map",
layers: [layer],
center: new OpenLayers.LonLat(50, 45),
zoom: 0
});
var select = new OpenLayers.Control.SelectFeature(layer);
map.addControl(select);
select.activate();

我遇到的问题：

1. 标签偏移在示例中，标签应该从中心偏移labelXOffset:"(xvalue)"，labelYOffset:"(yvalue)"，但这在我的页面中没有发生。我忘了什么吗？

2. 放大当我单击地图上的+按钮时，所有特征看起来都被放大了，但特征的大小保持不变。如何放大特征(圆)？

3. 命中检测i) 当我点击一个圆时，它被选择为设计的。然而，当我选择一个圆圈时，我是否可以更改右侧(现在这里有一个红色的"文本")并用html填充它？你能给我举个例子吗？如何用不同的颜色将红色的"此处文本"更改为所选圆圈的标签名称？ii)其次，在我选择一个圆后，如何在所有其他圆下添加一个标签，表示每个圆与所选圆之间的距离？

提前谢谢，希望这些问题不要太多。

关于从json中检索坐标数组来绘制圆，我还有另一个问题，但我会对此做更多的研究。如果你能为我指明正确的方向，我也将不胜感激。

我知道如何在服务器端使用asp或php，但客户端对我来说是非常新的。然而，客户端可以更快地完成所有这些，并可以减少大量负载。

干杯，masCh

Answer 1

我想我已经完成了大部分。

1. 标签未偏移

不确定我做了什么，但我声明了一个WMS层，并对偏移进行了一些更改，现在它正在正确偏移。

var wms = new OpenLayers.Layer.WMS("NASA Global Mosaic",
"http://hendak.seribudaya.com/starmap.jpg",
{
layers: "modis,global_mosaic",
}, {
opacity: 0.5,
singleTile: true
});
var context = {
getSize: function(feature) {
return feature.attributes["jejari"] / map.getResolution() * .703125;
}
};
var template = {
pointRadius: "${getSize}", // using context.getSize(feature)
label : "nnnn${name}n${jarak}",
labelAlign: "left",
labelXOffset: "${xoff}",
labelYOffset: "${yoff}",
labelOutlineWidth : 0
};
var style = new OpenLayers.Style(template, {context: context});

我宣布xoff&新OpenLayers.Geometry.Point(x，y)下的yoff，｛jejari:5，xoff:-10，yoff:-15｝

2) 放大点特征。

这是一个奇怪的问题。无论如何，我在上面的代码中，在xoff和yoff旁边声明了一个名为jejari的半径。然后将pointRadius从静态数字修改为"${getSize}"，然后将getSize函数添加到检索当前半径的var模板中。我想我就是这么做的。但标签到处都是，我仍然没有解决这个问题。

3) html 中的命中检测和更改另一个

这增加了选择点特征后的情况

layer.addFeatures(features);
layer.events.on({ "featureselected": function(e) {
kemasMaklumat('maklumat', "<FONT FACE='Calibri' color='#f0f0f0' size=5><center>"+
e.feature.attributes.name+
"<p>This is displayed text when a feature has been selected";
maklumat.style.color="black";
layer.redraw();
}     
});
map.addLayers([layer]);

在html中，和kemasMaklumat函数被声明为

<script type="text/javascript">
function kemasMaklumat(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
</script>    
<td valign="top"><div id="maklumat" style="border-radius:25px; background-color:#000000;box-shadow: 8px 8px 4px #686868;">
Write Something Here<P>
</div></td>

此问题的第二部分是更改所有未选定功能的标签，即修改所有非选定功能的属性。为此，我在所有功能中添加了一个for循环，并检查它是否与所选功能具有相同的标签，这是在layer.events.on"featureselected"下完成的，如本问题的上述第1部分中所做的那样。

layer.addFeatures(features);
layer.events.on({ "featureselected": function(e) {
kemasMaklumat('maklumat', "<FONT FACE='Calibri' color='#f0f0f0' size=5><center>"+
e.feature.attributes.name+
"<p>This is displayed text when a feature has been selected";
maklumat.style.color="black";
for (var i = 0, l = layer.features.length; i < l; i++) {
var feature = layer.features[i];
if (feature.attributes.name!=e.feature.attributes.name) {
feature.attributes.name="I was not selected"; }}
layer.redraw();
}       
});
map.addLayers([layer]);