1

我只需要 OpenLayers 中的标记来动态更改。我不知道该怎么做。。

for循环console.debug(response.i)输出是

[Object { lat="36.15900011", lon="-115.17205183"}, 
 Object { lat="36.15899561", lon="-115.17276155"}]

抱歉在这里粘贴完整的代码..

<script type="text/javascript">
    $.ajax({
      url:'parser', success:function(response){
        $(document).ready(function(){
          console.debug('hello')
          var jsonlen = response.length;
          for (var i=0; i<=jsonlen; i++){
            console.debug(response.i)
          }
          console.debug(response)
          // icon feature started
          var vectorSource = new ol.source.Vector({
            // empty vector
          })
          var iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([80.2700, 13.0839], 'EPSG:4326', 'EPSG:3857')),
            name:'Null Island',
            population: 4000,
            rainfall:500
          })
          vectorSource.addFeature(iconFeature);

          //create the style
          var iconStyle = new ol.style.Style({
            image: new ol.style.Icon(/**@type {olx.style.IconOptions}*/({
              anchor: [0.5, 46],
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              opacity: 0.75,
              src: 'http://ol3js.org/en/master/examples/data/icon.png'
            }))
          });

          // add the feature vector to the layer vector, 
          // and apply a style to whole layer
          var vectorLayer = new ol.layer.Vector({
            source: vectorSource,
            style: iconStyle
          });
          var map = new ol.Map({
            layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), 
                     vectorLayer],
            target: document.getElementById('map'),
            view: new ol.View({
              center: [0, 0],
              zoom: 3
            })
          });


        })
      }
    })
</script>

上面的代码一个标记工作正常

4

1 回答 1

1

在不知道您的 json 代表什么的情况下，很难解析您的响应。我会更改您的代码结构以首先创建所有内容，然后在 ajax 成功处理程序中向您的源代码添加新功能或清除源代码并添加新功能。

我猜您的回复包含一系列功能。在您的示例中，有两个点对象，下面的代码将假定它们应该形成一条可以是任意长度的线。如果您实际上粘贴了整个响应，请删除第二个循环并创建一个点几何图形来转换并传递给特征。

<script type="text/javascript">

//create the source, layer, icon, map and view first

var vectorSource = new ol.source.Vector({
     // empty vector
})


//create the style
var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(/**@type {olx.style.IconOptions}*/({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: 'http://ol3js.org/en/master/examples/data/icon.png'
     }))
});

// and apply a style to whole layer
var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: iconStyle
});

var map = new ol.Map({
    layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), 
        vectorLayer],
    target: document.getElementById('map'),
    view: new ol.View({
        center: [0, 0],
        zoom: 3
    })
});

$.ajax({
    url:'parser', 
    success:function(response){
        $(document).ready(function(){

            var jsonlen = response.length;

            // a loop that handles each feature
            for (var i=0; i<=jsonlen; i++){
                console.debug(response.i)
                //now create your new feature here
                var coordinates = [];
                for (var j=0; j<response.i.length; j++){
                    //this loop adds the pairs of coordinates to an array to make our linestring geometry
                    coordinates.push(ol.proj.transform([+response.i.j.lon, +response.i.j.lat], 'EPSG:4326', 'EPSG:3857'));
                }
                var line = new ol.geom.LineString(coordinates);
                var feature = new ol.Feature({
                    geometry: line,
                    id: i
                });
                vectorSource.addFeature(feature);
            }

        })
      }
    })
</script>

最后一个想法是，如果您控制服务器为什么不传递正确的 GeoJSON，我在 PHP 中使用https://github.com/jmikola/geojson来创建可以被ol.source.GeoJSON源代码读取的 GeoJSON。

于 2014-11-08T20:55:24.980 回答