openlayers加载瓦片地图并手动标记坐标点

作者：Gausst松鼠会 | 2024-04-29 08:39:00

踩

一、下载openlayers的脚本文件

二、编码

三、测试

一、下载openlayers的脚本文件

访问OpenLayers - Welcome

选个版本下载。

二、编码

创建一个项目，普通原生前端项目就行。

将ol.js、ol.css放在根目录下，当然还有你的瓦片地图也放在根目录下。

大致就是如下这样：

marker.png是标记坐标点的

然后我们开始编写代码在emss.html中：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>openlayers3</title>
    <link rel="stylesheet" href="ol.css" />
    <script type="text/javascript" src="ol.js"></script>
    <style>
        html{
            height: 100%;
            width: 100%;
            padding:0;
            margin:0;
        }
        body{
            height: 100%;
            width: 100%;
            padding:0;
            margin:0;
        }
        .map {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
 
<body>
<div id="map" class="map"></div>
<script>
 
    var BaseMapLayer = function(options) {
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: options.url,
                tilePixelRatio: 1,
                minZoom:2,
                maxZoom:17
            })
        });
        return layer;
    };
 
    var view = new ol.View({
        // 这两个数就是你瓦片地图地点的中心坐标
        center: ol.proj.fromLonLat([200, 100]),
        zoom: 13,
        minZoom: 13,
        maxZoom: 17
    });
 
 
    var sateliteopt = {
        url: 'data/tiles/{z}/{x}/{y}.png'
    };
 
 
    var sate = new ol.layer.Group({
        layers: [
            new BaseMapLayer(sateliteopt)
        ]
    });
 
 
    // 添加标注层
    var markerLayer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                src: 'data/marker.png' // 标注图标的路径
            })
        })
    });
 
    // 创建标注
    var marker = new ol.Overlay({
        element: document.getElementById('marker'),
        positioning: 'center-center',
        stopEvent: false,
        offset: [0, -23]
    });
 
 
    var map = new ol.Map({
        view: view,
        layers: [
            sate,
            markerLayer // 添加标注层到地图
        ],
        overlays: [marker], // 添加标注到地图
        target: 'map'
    });
 
 
    // 监听点击事件
    map.on('click', function(event) {
        // 将点击的经纬度转换为地图的像素坐标
        var feature = new ol.Feature({
            geometry: new ol.geom.Point(event.coordinate)
        });
        // 将标注添加到标注层
        markerLayer.getSource().addFeature(feature);
        // 将标注移动到点击的位置
        marker.setPosition(event.coordinate);
    });
 
/*    map.on('click', function(event) {
        // 将点击的像素坐标转换为经纬度坐标
        var coordinate = event.coordinate;
        var lat = ol.proj.toLonLat(coordinate)[1];
        var lon = ol.proj.toLonLat(coordinate)[0];
        // 在控制台打印坐标
        console.log('纬度:', lat, '经度:', lon);
        // 创建一个点要素
        var feature = new ol.Feature({
            geometry: new ol.geom.Point(coordinate)
        });
        // 清除标注层上的所有要素
        markerLayer.getSource().clear();
        // 将新标注添加到标注层
        markerLayer.getSource().addFeature(feature);
        // 将标注移动到点击的位置
        marker.setPosition(coordinate);
    });*/
 
 
</script>
</body>
</html>

这里面有个注释掉的方法，读者可以打开试试，其实就是标记的时候打印经纬度，一般这个值我们都用来存储数据库中。

三、测试

懒得自己写的可以下载我整理的源码：https://download.csdn.net/download/qq_38196449/89237536?spm=1001.2014.3001.5503

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/506839