无法用OpenLayers中的ReactJS绘制两个位置之间的默认线
无法用OpenLayers中的ReactJS绘制两个位置之间的默认线
提问于 2018-06-21 17:19:08
在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);
});回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-22 03:00:59
您的主要问题是，事实是创建两点，但不创建一条线。这就是我用下面的代码演示的内容。
它在特定上下文之外执行任务(例如，响应)，但原则保持不变(只需更改名称空间)。
转到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
您将得到以下结果
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50974256
复制相关文章
相似问题
腾讯云开发者
