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，但是客户端对我来说却很新。 但是，客户端可以更快地完成所有这些操作，并且可以减少很多负载。

欢呼声

Answer 1

我想我已经做到了大部分。

1. 标签不偏移

不知道我做了什么，但是我声明了WMS图层并对offset进行了一些更改，现在它可以正确偏移了。

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(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循环，并检查它是否具有与所选功能相同的标签，此操作是在“ featureselected”上的layer.events。下进行的，如上面第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]);