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));
           });
         }

如何在点之间插入线

2 个答案: