如何修改openlayer3输入值？

Question

Currently I am developing the program using the openLayer3 API. 目前，我正在使用openLayer3 API开发该程序。 The input values in the source code below use the data that is clicked from the user. 下面的源代码中的输入值使用从用户单击的数据。 The user clicked Lat-Lon like: start = [31.032741,119.211365] end = [32.032741, 129.211365]. 用户单击纬度，例如：开始= [31.032741,119.211365]结束= [32.032741，129.211365]。

However, I do not want to receive the input value from the user, but I want to receive the data of the array format from the server and display it immediately. 但是，我不想从用户那里接收输入值，但是我想从服务器接收数组格式的数据并立即显示它。 For example https://openlayers.org/en/v4.0.1/examples/data/openflights/flights.json 例如https://openlayers.org/en/v4.0.1/examples/data/openflights/flights.json

map.addInteraction(new ol.interaction.Draw({ <-- It seems that this part is receiving user input data. map.addLayer( <-- This seems to be a solution, but it is only my guess. map.addInteraction（new ol.interaction.Draw（{<-似乎这部分正在接收用户输入数据。map.addLayer（<-这似乎是一种解决方案，但这只是我的猜测。

If possible, please let me know in detail, but if not, please give me a rough guide. 如有可能，请详细告知我，否则，请给我粗略的指南。

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

Are you trying to load the json data or geojson data. 您是否要加载json数据或geojson数据。

I have the solution for geojson format. 我有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'
}));

Use this code inside the script tag it will work as you expected. 在script标签内使用此代码，它将按预期工作。 But I don't know how to load the json array. 但是我不知道如何加载json数组。 If you find out share with us. 如果您发现与我们分享。

如何修改openlayer3输入值？

问题描述

1 个解决方案

解决方案1
0 2017-03-15 04:33:59

如何修改openlayer3输入值？

问题描述

1 个解决方案

解决方案1 0 2017-03-15 04:33:59

解决方案1
0 2017-03-15 04:33:59