Javascript OpenLayers的新增功能，涉及缩放、属性和命中检测建议

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

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

我已经浏览了dev.openlayers站点上的示例（比如这一个），还搜索了（并找到了一些）stackoverflow上的解决方案，但它们没有为我的问题提供解决方案）

请查看我迄今为止所做的工作：

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();

我有什么问题：

标签偏移量 在示例中，标签应该从中心偏移labelXOffset:“（xvalue）”，labelYOffset:“（yvalue）”，但我的页面中不会发生这种情况。有什么我忘了的吗

放大 当我点击地图上的+按钮时，所有的特征看起来都像被放大了一样，但是特征的大小保持不变。我如何放大特征（圆圈）

命中检测 i） 当我单击一个圆时，它会被选中。然而，当我选择一个圆圈时，我是否也可以改变右边（现在这里有一个红色的“文本”），并用html填充它？你能给我举个例子，如何将红色的“文本在这里”更改为所选圆圈的标签名称，并使用不同的颜色吗？ ii）其次，在我选择一个圆后，如何在所有其他圆下添加标签，表示每个圆与所选圆之间的距离

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

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

我知道如何使用服务器端asp或php，但客户端对我来说非常陌生。然而，客户端可以更快地完成这一切，并可以减少大量负载

干杯，

---

马斯奇

我想我已经设法解决了大部分问题

不偏移的标签

不确定我做了什么，但我声明了一个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 : "\n\n\n\n${name}\n${jarak}",
              labelAlign: "left",
              labelXOffset: "${xoff}",
              labelYOffset: "${yoff}",
              labelOutlineWidth : 0
      };
  var style = new OpenLayers.Style(template, {context: context});

我在新的OpenLayers.Geometry.Point（x，y）下声明了xoff&yoff，{jejari:5，xoff:-10，yoff:-15}

2） 放大点要素

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

3） 在html中检测命中并更改另一个命中

这将添加选择点要素后对点发生的情况

layer.addFeatures（特征）；
layer.events.on（{“featureselected”：函数（e）{
kemasMaklumat（‘maklumat’，“”）+
e、 feature.attributes.name+
“这是在选择某个功能时显示的文本”；
maklumat.style.color=“黑色”；
layer.redraw（）；
}     
});
map.addLayers（[layer]）；

在html中，和kemasMaklumat函数声明为

功能kemasMaklumat（id，内容）{
var container=document.getElementById（id）；
container.innerHTML=内容；
}
在这里写点东西

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

layer.addFeatures（特征）；
layer.events.on（{“featureselected”：函数（e）{
kemasMaklumat（‘maklumat’，“”）+
e、 feature.attributes.name+
“这是在选择某个功能时显示的文本”；
maklumat.style.color=“黑色”；
对于（var i=0，l=layer.features.length；i

   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]);

  <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>

   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]);