Question

我试图借助OpenLayers和ReactJS在位置（纬度和经度）之间绘制两个位置（位置A，位置B）之间的默认线。但是没有画默认线。不幸的是，我找不到根本原因。我该怎么解决？

代码：

componentDidMount() {

    var map;
    var raster=new Tile({
      source: new OSM()
    });
    //Location A - Latitude and Longitude
    var iconFeature1 =new Feature({
      geometry: new Point(proj.transform([79.2652587890625,19.532871485421026], 'EPSG:4326',   'EPSG:3857')),
      name: 'Marker 1' });
   //Location B - Latitude and Longitude
    var iconFeature2 =new Feature({
        geometry: new Point(proj.transform([81.24279785156249,18.02679570052561], 'EPSG:4326',   'EPSG:3857')),
        name: 'Marker 2' });

    var source = new SourceVector({
      features: [iconFeature1,iconFeature2],
      wrapX: false
    });

    var vector = new LayerVector({
      source: source,
      style: new Style({
        fill: new Fill({
          color: 'white'
        }),
        stroke: new Stroke({
          color: 'red'
        })
      })
    });

    map = new Map({
      target: 'map',
      layers: [raster,vector],
      view: new View({
        center: proj.fromLonLat([78.8718, 21.7679]),
        zoom: 4
      })
    })
    //To draw Line
    var draw = new Draw({
      source: source,
      type: "LineString"
    });

    map.addInteraction(draw);

    });

Answer 1

您的主要问题是创建两个点，但不创建一条线。这就是我用以下代码演示的内容。

它可以在您的特定上下文（例如React）之外完成工作，但是原理保持不变（您只需要更改名称空间）

转到http://openlayers.org/en/v4.6.5/examples/simple.html

打开浏览器调试器控制台并粘贴以下内容

// Location A - Latitude and Longitude
var coords1 = ol.proj.fromLonLat([79.2652587890625,19.532871485421026]);
var iconFeature1 =new ol.Feature({
  geometry: new ol.geom.Point(coords1),
  name: 'Marker 1'
});

// Location B - Latitude and Longitude
var coords2 = ol.proj.fromLonLat([81.24279785156249,18.02679570052561]);
var iconFeature2 =new ol.Feature({
  geometry: new ol.geom.Point(coords2),
  name: 'Marker 2'
});

var lineBetweenTwoFeatures =new ol.Feature({
  geometry: new ol.geom.LineString([coords1, coords2]),
  name: 'Line between markers'
});

// I add the 2 markers and the linestring
// between the two in the same source
// You may need to separate them in two sources
// depending of your use case
var source = new ol.source.Vector({
  features: [iconFeature1, iconFeature2, lineBetweenTwoFeatures],
  wrapX: false
});

var width = 3;
vector = new ol.layer.Vector({
  source: source,
  style: [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'white',
        width: width + 2
      })
    }),
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'red',
        width: width
      })
    })
  ]
});
map.addLayer(vector);

map.getView().fit(source.getExtent());

重要的部分在lineBetweenTwoFeatures

中

您将获得以下结果

无法使用ReactJS在OpenLayers中的两个位置之间绘制默认线

1 个答案: