Question

我只需要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>

以上代码，一个标记工作正常

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

如何动态添加标记

1 个答案: