如何在点之间插入线

Question

您好我在地图中添加我的json数据，因为它显示在下面的代码中。现在我想在点之间插入线。我一直在寻找类似但没有成功的东西。当我更改我的数据时，我还有另外一个地图中的点不更新它只显示它在开始时采取的第一个数据。如果它存在，请求的答案留下你的答案。

 geojson_layer = new OpenLayers.Layer.Vector("GeoJSON", {
          styleMap: new OpenLayers.StyleMap({
              "default": new OpenLayers.Style({
              pointRadius: 2,
              fillColor: "red",
              fillOpacity: 1,
              strokeColor: "black",
              strokeWidth: 0.1,
              strokeOpacity: 1 } ),
              "select": { fillColor: "#8aeeef",
              strokeColor: "#32a8a9",
              labelYOffset:13,
              label:"${name}"} //Text entspricht feature.attributes.name
          }),
          projection: new OpenLayers.Projection("EPSG:4326"),
          strategies: [new OpenLayers.Strategy.Fixed()],
          protocol: new OpenLayers.Protocol.HTTP({
              url: 'https://api.myjson.com/bins/1gw97c',
              //url:'https://api.myjson.com/bins/sqri8',
              format: new OpenLayers.Format.GeoJSON()

          })
      });
      map.addLayer(geojson_layer); 




I am using a function like this to make a api call. 
HTML:
 <h:commandButton style= "width:120px; height:100px; padding-left:50px;" partialSubmit="true" immediate="true"  onclick="loadDoc()" image="/imgs_box/start.png" ></h:commandButton>
JS:
    function loadDoc() {
                var urlFielda = document.getElementById('urla');
                var urlFieldb = document.getElementById('urlb');
                var urlFieldc = document.getElementById('urlc');
                var urlFieldd = document.getElementById('urld');
               alert("filloi");
               fetch('http://apiexample.org/api/startgetpoint=' + urlFielda.value + '&start1=' + urlFieldb.value + '&end1=' + urlFieldc.value + '&end2='+ urlFieldd.value + '&NaviMethod=1&AllowedAreas=7')
               .then(function(response) {


                   return response.json();
                  // var convertedResponse = convertFormat(response);
                //return convertedResponse.json();
               })
               .then(function(myJson) {
                console.log(JSON.stringify(myJson));
                alert(JSON.stringify(myJson));
               });
             };

我收到这样的回答：“Waypoints”：[{“Lon”：19.455128，“Lat”：41.310575}，{“Lon”：19.455128，“Lat”：41.310574}，{“Lon”：19.457388，“Lat “：41.300442}，{”Lon“：19.413507，”Lat“：41.295189}，{”Lon“：16.871931，”Lat“：41.175926}，可以在geojson中转换此json数据并在地图中显示为我的第一个问题，但从这个回复得到的数据不是来自这个网址：'https://api.myjson.com/bins/sqri8'，

对不起，我再次问你这个问题。

Answer 1

在你的点之间添加一条线对我有用。可能在您尝试添加行之前未加载数据（我使用超时等待2秒），或者样式图中的0.1行程宽度使得该行很难看到。我使用{}作为线串的样式来覆盖它并使用OpenLayers默认值。

  var map, layer;
  map = new OpenLayers.Map('map');
  layer = new OpenLayers.Layer.OSM("OSM Map");
  map.addLayer(layer);
  map.setCenter(
      new OpenLayers.LonLat(19.455128, 41.310575).transform(
          new OpenLayers.Projection("EPSG:4326"),
          map.getProjectionObject()
      ), 8
  );   

  geojson_layer = new OpenLayers.Layer.Vector("GeoJSON", {
      styleMap: new OpenLayers.StyleMap({
          "default": new OpenLayers.Style({
          pointRadius: 2,
          fillColor: "red",
          fillOpacity: 1,
          strokeColor: "black",
          strokeWidth: 0.1,
          strokeOpacity: 1 } ),
          "select": { fillColor: "#8aeeef",
          strokeColor: "#32a8a9",
          labelYOffset:13,
          label:"${name}"} //Text entspricht feature.attributes.name
      }),
      projection: new OpenLayers.Projection("EPSG:4326"),
      strategies: [new OpenLayers.Strategy.Fixed()],
      protocol: new OpenLayers.Protocol.HTTP({
          url: 'https://api.myjson.com/bins/1gw97c',
          //url:'https://api.myjson.com/bins/sqri8',
          format: new OpenLayers.Format.GeoJSON()
      })
  });
  map.addLayer(geojson_layer); 
 
  setTimeout(function() {
       var points = [];
       geojson_layer.features.forEach(function(feature) { points.push(feature.geometry); });
       geojson_layer.addFeatures([
           new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(points), {}, {})
       ]);
  }, 2000);

html, body, #map, #background { height: 100%; margin: 0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
<div id="map"></div>

对于您的其他json，您需要遍历路点以从数据构建功能并自己将它们添加到层中，并且您可以同时构建线串。该层不需要策略或协议。

var features = [];
var points = [];
myJson.Waypoints.forEach(function(wp) {
   var point = new OpenLayers.Geometry.Point(wp.Lon, wp.Lat).transform(
        new OpenLayers.Projection("EPSG:4326"),
        map.getProjectionObject()
   );
   features.push(new OpenLayers.Feature.Vector(point));
   points.push(point);
}
features.push(new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(points), {}, {}));
geojson_layer.addFeatures(features);

Answer 2

.then(function(myJson) {
 geojson_layer = new OpenLayers.Layer.Vector("GeoJSON", {
      styleMap: new OpenLayers.StyleMap({
          "default": new OpenLayers.Style({
          pointRadius: 2,
          fillColor: "red",
          fillOpacity: 1,
          strokeColor: "black",
          strokeWidth: 0.1,
          strokeOpacity: 1 } ),
          "select": { fillColor: "#8aeeef",
          strokeColor: "#32a8a9",
          labelYOffset:13,
          label:"${name}"} //Text entspricht feature.attributes.name
      }),
      //projection: new OpenLayers.Projection("EPSG:4326"),
      //strategies: [new OpenLayers.Strategy.Fixed()],
      //protocol: new OpenLayers.Protocol.HTTP({
         // url: 'https://api.myjson.com/bins/1gw97c',
          //url:'https://api.myjson.com/bins/sqri8',
          //format: new OpenLayers.Format.GeoJSON()
     // })
  });
  map.addLayer(geojson_layer); 

  //setTimeout(function() {
      //var points = [];
      //geojson_layer.features.forEach(function(feature) { points.push(feature.geometry); });
       //geojson_layer.addFeatures([
           //new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(points), {}, {})
       //]);
 //}, 5000);
 var features = [];
var points = [];
myJson.Waypoints.forEach(function(wp) {
   var point = new OpenLayers.Geometry.Point(wp.Lon, wp.Lat).transform(
        new OpenLayers.Projection("EPSG:4326"),
        map.getProjectionObject()
   );
   features.push(new OpenLayers.Feature.Vector(point));
   points.push(point);
})
features.push(new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(points), {}, {}));
geojson_layer.addFeatures(features);

            console.log(JSON.stringify(myJson));
            alert(JSON.stringify(myJson));
           });
         }