首页openlayers怎么在静态图片用经纬度绘制点

openlayers怎么在静态图片用经纬度绘制点

时间: 2024-04-10 12:31:57 浏览: 95

你可以使用 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()` 方法进行转换。

阅读全文