openlayers怎么在静态图片用经纬度绘制点
时间: 2024-04-10 22:31:57 浏览: 92
一个react组件,可以使用经纬度绘制任意图形和路径,比如像学校、医院等极小的区域地图+源代码+文档说明
你可以使用 OpenLayers 库来在静态图片上使用经纬绘制点。下面是一个简单的例代码:
```html
DOCTYPE html>
<html>
<head>
<title>OpenLayers Example</title>
style>
#map {
width: %;
height: 400px }
</style>
<link rel="" href="https://cdn.jsdelivr.net/npm/@6.6.1/dist/ol.css" />
<script src="https://.jsdelivr.net/npm/ol@6.6.1/dist/ol.js"></script>
</head>
<body>
<div id="map"></div>
<script>
// 创建地图容器
var map = new ol.Map({
target: "map",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
],
view: new ol.View({
center: ol.proj.fromLonLat([0, 0]), // 设置地图中心点
zoom: 2, // 设置地图缩放级别
}),
});
// 创建一个矢量图层
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector(),
});
// 根据经纬度添加点要素到矢量图层
function addPoint(lon, lat) {
var point = new ol.Feature(
new ol.geom.Point(ol.proj.fromLonLat([lon, lat]))
);
vectorLayer.getSource().addFeature(point);
}
// 添加矢量图层到地图
map.addLayer(vectorLayer);
// 调用addPoint函数添加点要素
addPoint(-74.006, 40.7128); // 经纬度为纽约市的经纬度
</script>
</body>
</html>
```
在上面的示例代码中,我们创建了一个 OpenLayers 地图容器,并加载了一个 OpenStreetMap 图层。然后,我们创建了一个矢量图层,并通过 `addPoint()` 函数将点要素添加到矢量图层中。最后,我们将矢量图层添加到地图中,并调用 `addPoint()` 函数来添加一个具体的经纬度点。
你可以根据需要调用 `addPoint()` 函数来添加更多的点要素,并在静态图片上绘制它们。请确保将经纬度转换为 OpenLayers 可识别的投影坐标,使用 `ol.proj.fromLonLat()` 方法进行转换。
阅读全文