使用openlayers在给定坐标的地图上绘制点? [英] draw point on map given coordinates with openlayers?
问题描述
我试图从大约 300 个经纬度坐标表中的 openlayers 地图上绘制大约 300 个点.我发现的关于如何做到这一点的所有内容是他们的 draw features网站，但它可以通过用户点击鼠标绘制一个点，而不是自动绘制.有没有办法从代码中在地图上绘制一个点?谢谢.
I'm trying to plot about 300 points on an openlayers map from a table of about 300 latitude and longitude cordinates. All I found on how to do it is the draw features from their website, but it can plot a point from a mouse click by the user, not automatically. Is there a way to plot a point on the map from the code? Thank you.
推荐答案
要在地图上绘制点(或任何其他几何图形)，您只需:
To draw points (or any other geometry) on the map, you just need to,
- 使用您要绘制的特征创建一个源，在本例中为矢量源.
- 使用步骤 1 中的源和您喜欢的样式创建一个图层，在本例中为矢量图层.
- 将图层添加到地图.
这就是你需要做的.看看我给你做的例子，它生成300个随机点特征，然后按照我之前描述的步骤进行操作.
That is all you need to do. Take a look at the example I made for you, it generate 300 random points features and then follow the steps I describe before.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script>
<title>Random Points From Code</title>
</head>
<body>
<h2>300 Random Points From Code</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
// generate 300 random points features
const getRandomNumber = function (min, ref) {
return Math.random() * ref + min;
}
const features = [];
for (i = 0; i < 300; i++) {
features.push(new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([
-getRandomNumber(50, 50), getRandomNumber(10, 50)
]))
}));
}
// create the source and layer for random features
const vectorSource = new ol.source.Vector({
features
});
const vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 2,
fill: new ol.style.Fill({color: 'red'})
})
})
});
// create map and add layers
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([-75, 35]),
zoom: 2
})
});
</script>
</body>
</html>这篇关于使用openlayers在给定坐标的地图上绘制点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
