gpt4 book ai didi

javascript - 使用openlayers在给定坐标的 map 上绘制点?

转载 作者:行者123 更新时间:2023-12-01 21:45:26 24 4
gpt4 key购买 nike

我正在尝试从大约 300 个纬度和经度坐标的表格中在 openlayers map 上绘制大约 300 个点。我找到的关于如何做的所有信息都是 draw features来自他们的网站,但它可以通过用户单击鼠标绘制一个点,而不是自动绘制。有没有办法从代码中在 map 上绘制一个点?谢谢。

最佳答案

要在 map 上绘制点(或任何其他几何图形),您只需要,

  1. 创建一个源,在本例中为矢量源,其中包含您要绘制的特征。
  2. 创建一个图层,在本例中为矢量图层,使用第 1 步中的源和您喜欢的样式。
  3. 将图层添加到 map 。

这就是您需要做的全部。看看我给你做的例子,它生成了 300 个随机点特征,然后按照我之前描述的步骤。

<!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>

关于javascript - 使用openlayers在给定坐标的 map 上绘制点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60775622/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com