Open Layer 3を使用して2つのclikedポイント間の線を描く方法は？

Question

私はマップ内にjson緯度とlonを表示できますが、選択した2点の間に線を描きたいと思います。 このようにHere

ここで私はマップ内のすべての場所をクリックできますが、表示されている点のみをクリックできるようにします。

iはLink2は今、私はラインストリングの二点

<script> 
    var flickrSource = new ol.source.Vector(); 
    function flickrStyle(feature) { 
      var style = new ol.style.Style({ 
       image: new ol.style.Circle({ 
         radius: 10, 
         stroke: new ol.style.Stroke({ 
         color: 'white', 
         width: 2 
         }), 

        fill: new ol.style.Fill({ 
         color: 'green' 
         }), 
       }), 
       text: new ol.style.Text({ 
       text: feature.getGeometryName(), 
       fill: new ol.style.Fill({color: 'blue'}), 
       stroke: new ol.style.Stroke({color: 'white', width: 1}), 
       offsetX: 0, 
       offsetY: 15 
       }),  
      }); 

      return [style]; 
    } 
     var flickrLayer = new ol.layer.Vector({ 
      source: flickrSource, 
      style: flickrStyle 
     }); 

     var layer = new ol.layer.Tile({ 
      source: new ol.source.OSM() 
     }); 

     var center = ol.proj.transform([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857'); 

     var view = new ol.View({ 
      center: center, 

      zoom: 3 
     }); 

     var source = new ol.source.Vector({wrapX: false}); 
     var map = new ol.Map({ 

      target: 'map', 
      layers: [layer, flickrLayer], 
      view: view 
     }); 

    function successHandler(data) { 

     var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857'); 
     data.items.forEach(function(item) { 
     var feature = new ol.Feature(item); 
     feature.setGeometryName(item.name); 
     var coordinate = transform([parseFloat(item.longitude), parseFloat(item.latitude)]); 
     var geometry = new ol.geom.Point(coordinate); 
     feature.setGeometry(geometry); 
     flickrSource.addFeature(feature); 

     }); 
    } 
</script> 

Answer 1

この2点の座標を取得し、描画の間に線を描きたい、私のポイントを表示するには、このリンクを使用し

var thing = new ol.geom.LineString(points); 
var featurething = new ol.Feature({ 
    name: "Thing", 
    geometry: thing 
}); 
flickrSource.addFeature(featurething); 

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

 
var data = { 
 
    "items": [{ 
 
    name: 'geo1', 
 
    longitude: "0.0", 
 
    latitude: "0.0" 
 
    }, { 
 
    name: 'geo1', 
 
    longitude: "5.0", 
 
    latitude: "5.0" 
 
    }] 
 
}; 
 

 
function flickrStyle(feature) { 
 
    var style = new ol.style.Style({ 
 
    image: new ol.style.Circle({ 
 
     radius: 10, 
 
     stroke: new ol.style.Stroke({ 
 
     color: 'white', 
 
     width: 2 
 
     }), 
 

 
     fill: new ol.style.Fill({ 
 
     color: 'green' 
 
     }), 
 
    }), 
 
    text: new ol.style.Text({ 
 
     text: feature.getGeometryName(), 
 
     fill: new ol.style.Fill({ 
 
     color: 'blue' 
 
     }), 
 
     stroke: new ol.style.Stroke({ 
 
     color: 'white', 
 
     width: 1 
 
     }), 
 
     offsetX: 0, 
 
     offsetY: 15 
 
    }), 
 
    }); 
 

 
    return [style]; 
 
} 
 
var flickrLayer = new ol.layer.Vector({ 
 
    source: flickrSource 
 
    //style: flickrStyle 
 
}); 
 

 
var layer = new ol.layer.Tile({ 
 
    source: new ol.source.OSM() 
 
}); 
 

 
var center = ol.proj.transform([0.0, 0.0], 'EPSG:4326', 'EPSG:3857'); 
 

 
var view = new ol.View({ 
 
    center: center, 
 

 
    zoom: 5 
 
}); 
 

 
var source = new ol.source.Vector({ 
 
    wrapX: false 
 
}); 
 
var map = new ol.Map({ 
 

 
    target: 'map', 
 
    layers: [layer, flickrLayer], 
 
    view: view 
 
}); 
 

 
function successHandler(data) { 
 
    var points = []; 
 
    data.items.forEach(function(item) { 
 
    var point = ol.proj.transform([parseFloat(item.longitude), parseFloat(item.latitude)], 'EPSG:4326', 'EPSG:3857'); 
 
    points.push(point); 
 
    var geometry = new ol.geom.Point(point); 
 
    var feature = new ol.Feature({ 
 
     name: item.name, 
 
     geometry: geometry 
 
    }); 
 
    flickrSource.addFeature(feature); 
 

 
    var thing = new ol.geom.LineString(points); 
 
    var featurething = new ol.Feature({ 
 
     name: "Thing", 
 
     geometry: thing 
 
    }); 
 
    flickrSource.addFeature(featurething); 
 
    }); 
 
} 
 
successHandler(data);

<link href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.js"></script> 
 
<div id="map"></div>

Answer 2

ここでiコード...ここ

は、ベクトル源である層とをマップ（S）

// Vector source of data points 
var flickrSource = new ol.source.Vector(); 

// Style function for the data points 
function flickrStyle(feature) { 
    var style = new ol.style.Style({ 
     image: new ol.style.Circle({ 
      radius: 10, 
       stroke: new ol.style.Stroke({ 
       color: 'white', 
       width: 2 
      }), 
      fill: new ol.style.Fill({ 
       color: 'green' 
      }) 
     }), 
     text: new ol.style.Text({ 
      text: feature.getGeometryName(), 
      fill: new ol.style.Fill({color: 'blue'}), 
      stroke: new ol.style.Stroke({color: 'white', width: 1}), 
      offsetX: 0, 
      offsetY: 15 
     }) 
    }); 

    return [style]; 
} 

// Layers 
var osmLayer = new ol.layer.Tile({ source: new ol.source.OSM() }); 
var flickrLayer = new ol.layer.Vector({ 
    source: flickrSource, 
    style: flickrStyle 
}); 

// MAP 
var map = new ol.Map({ 
    target: 'map', 
    layers: [osmLayer, flickrLayer], 
    view: new ol.View({ 
      center: ol.proj.transform([0, 20], 'EPSG:4326', 'EPSG:3857'), 
      zoom: 3 
    }) 
}); 

次に、ここでは、マップ上に置くデータポイントとです：

// Data points 
var data = { 
    "items": [{ 
      name: 'p1', 
      longitude: "0.0", 
      latitude: "0.0" 
    }, { 
      name: 'p2', 
      longitude: "50.0", 
      latitude: "50.0" 
    }, { 
      name: 'p3', 
      longitude: "50.0", 
      latitude: "-50.0" 
    }] 
}; 

// Placing data points on the map 
function placePoints(data) { 
    var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857'); 

    data.items.forEach(function(item) { 
      // for each item of data points we create feature geometry 
      // with coords contained in data and add them to the source 

      var feature = new ol.Feature(item); 
      feature.setGeometryName(item.name); 

      var coordinate = transform(
       [parseFloat(item.longitude), parseFloat(item.latitude)] 
     ); 

      var geometry = new ol.geom.Point(coordinate); 
      feature.setGeometry(geometry); 

      flickrSource.addFeature(feature); 
    }); 
} 
placePoints(data); // do the stuff of placing points 

図のための対話ポイント間の線：

// select interaction working on "click" 
var mySelectInteraction = new ol.interaction.Select({ 
    condition: ol.events.condition.click, 
    multi: false 
}); 

// init coords of line to draw between points 
var pointA = null; 
var pointB = null; 

// Interaction on points for drawing lines between 
mySelectInteraction.on('select', function(e) { 

    if (e.selected.length === 0) { 
     // clicking nothing, so reset points coords 
     pointA = null; 
     pointB = null; 
    } 
    else { 
     // Feature clicked and its coords 
     var feature = e.target.getFeatures().item(0); 
     var coords = feature.getGeometry().getCoordinates(); 

     // Definition of coords points 
     if (pointA === null) { pointA = coords; } 
     else { pointB = coords; } 


     if (pointA !== null && pointB !== null) { 

      var LinesSource = new ol.source.Vector(); 
      var LinesLayer = new ol.layer.Vector({ source : LinesSource }); 
      map.addLayer(LinesLayer); 

      // Line construction 
      LinesSource.addFeature(new ol.Feature({ 
       geometry : new ol.geom.LineString([pointA, pointB]) 
      })); 

      // Reset points for next drawing 
      pointA = null; 
      pointB = null; 
     } 
    } 
}); 

map.addInteraction(mySelectInteraction); 

私にとって素晴らしい作品です！