vue+openlayers5学习总结（二）官网examples运行实例

最新推荐文章于 2025-07-06 23:39:56 发布

张栓来

最新推荐文章于 2025-07-06 23:39:56 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： openlayers openlayers 文章标签： vue openlayers

本文链接：https://blog.youkuaiyun.com/zhangshuanlai/article/details/90515151

openlayers 同时被 2 个专栏收录

9 篇文章

订阅专栏

openlayers

2 篇文章

订阅专栏

博客介绍了在Vue项目中运行OpenLayers实例的步骤。首先下载官方源码，将data拷贝到工程；接着从官方源码的examples中选一个实例；之后对实例进行修改，包括拷贝文件到目录、改写html、js和package.json文件，最后运行。还给出了源代码链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.下载官方源码，将data拷贝到（一）中的工程中。

在这里插入图片描述

2.找到官方源码中的examples，选其中一个实例。如下图

在这里插入图片描述

3.需要对实例进行修改才能运行

将文件拷贝到目录下，改写html文件
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>zsl</title>
    <style>
        #map {
            width: 90%;
            height: 90%;
        }
    </style>
</head>
<body>
    <!-- <div id="map"></div> -->
    <a class="skiplink" href="#map">Go to map</a>
    <div id="map" class="map" tabindex="0"></div>
    <button id="zoom-out">Zoom out</button>
    <button id="zoom-in">Zoom in</button>
    <script src="./1accessible.js"></script>
</body>

</html>

改写js文件（主要改写import）其他不用改

import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
    layers: [
        new TileLayer({
            source: new OSM()
        })
    ],
    target: 'map',
    view: new View({
        center: [0, 0],
        zoom: 2
    })
});

document.getElementById('zoom-out').onclick = function() {
    const view = map.getView();
    const zoom = view.getZoom();
    view.setZoom(zoom - 1);
};

document.getElementById('zoom-in').onclick = function() {
    const view = map.getView();
    const zoom = view.getZoom();
    view.setZoom(zoom + 1);
};