Question

目前我正在使用openLayer3 API开发程序。下面的源代码中的输入值使用从用户单击的数据。用户点击了Lat-Lon，如：start = [31.032741,119.211365] end = [32.032741,129.211365]。

但是，我不想从用户那里收到输入值，但我希望从服务器接收数组格式的数据并立即显示。例如https://openlayers.org/en/v4.0.1/examples/data/openflights/flights.json

map.addInteraction（new ol.interaction.Draw（{＆lt; - 看来这部分正在接收用户输入数据。 map.addLayer（＆lt; - 这似乎是一个解决方案，但这只是我的猜测。

如果可能的话，请详细告诉我，但如果没有，请给我一个粗略的指导。

<!DOCTYPE html>
<html>
<head>
  <title>LineString Arrows</title>
  <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
  <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
</head>
<body>

<div id="map" class="map"></div>

<script>
  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var source = new ol.source.Vector();

  var styleFunction = function(feature) {
    var geometry = feature.getGeometry();
    var styles = [
      // linestring
      new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: '#ffcc33',
          width: 2
        })
      })
    ];

    geometry.forEachSegment(function(start, end) {
      var dx = end[0] - start[0];
      var dy = end[1] - start[1];
      var rotation = Math.atan2(dy, dx);
      // arrows
      styles.push(new ol.style.Style({
        geometry: new ol.geom.Point(end),
        image: new ol.style.Icon({
          src: 'https://openlayers.org/en/v4.0.1/examples/data/arrow.png',
          anchor: [0.75, 0.5],
          rotateWithView: true,
          rotation: -rotation
        })
      }));
    });

    return styles;
  };
  var vector = new ol.layer.Vector({
    source: source,
    style: styleFunction
  });

  var map = new ol.Map({
    layers: [raster, vector],
    target: 'map',
    view: new ol.View({
      center: [-11000000, 4600000],
      zoom: 4
    })
  });

  map.addInteraction(new ol.interaction.Draw({
    source: source,
    type: /** @type {ol.geom.GeometryType} */ ('LineString')
  }));
</script>
</body>
</html>

Answer 1

您是否尝试加载 json 数据或 geojson 数据。

我有 geojson 格式的解决方案。

var source = new ol.source.Vector({
    url: 'https://openlayers.org/en/v3.20.0/examples/data/geojson/line-samples.geojson',
    format: new ol.format.GeoJSON()
});
var styleFunction = function(feature) {
    var geometry = feature.getGeometry();
    var styles = [
        new ol.style.Style({
            stroke : new ol.style.Stroke({
                color : '#ffcc33',
                width : 2
            })
        }) 
    ];
    geometry.forEachSegment(function(start, end) {
        var dx = end[0] - start[0];
        var dy = end[1] - start[1];
        var rotation = Math.atan2(dy, dx);
        styles.push(new ol.style.Style({
            geometry : new ol.geom.Point(end),
            image : new ol.style.Icon({
                src : 'https://openlayers.org/en/v4.0.1/examples/data/arrow.png',
                anchor : [ 0.75, 0.5 ],
                rotateWithView : true,
                rotation : -rotation
            })
        }));
    });
    return styles;
};
var vectorLines = new ol.layer.Vector({
    source : source,
    style: styleFunction
});

var map = new ol.Map({
    layers: [
             new ol.layer.Tile({
                 source: new ol.source.OSM()
             }),
          vectorLines
        ],
    target: 'map',
    view: new ol.View({
        center: [-8161939, 6095025],
        zoom: 8
    })
});
map.addInteraction(new ol.interaction.Draw({
    source : source,
    type : 'LineString'
}));

在脚本标记内使用此代码，它将按预期工作。但我不知道如何加载json数组。如果您发现与我们分享。

如何修改openlayer3的输入值？

1 个答案: