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

全真王重阳

已于 2024-08-26 15:57:08 修改

阅读量651

点赞数 4

分类专栏： # Vue 文章标签： openlayers gis 地图瓦片地图瓦片 javascript

于 2024-04-28 16:52:10 首次发布

本文链接：https://blog.csdn.net/qq_38196449/article/details/138282481

版权

Vue 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

一、下载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>

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