当前位置：首页 > news >正文

OpenLayer创建第一个基础地图实例

news 来源：原创 2025/5/30 3:56:38

OpenLayers创建第一个基础地图实例

OpenLayers 是一个开源的 JavaScript 库，用于在网页上显示交互式地图。它支持多种地图源，包括 OpenStreetMap、Google Maps、Bing Maps 等。本文将介绍如何使用 OpenLayers 创建一个基础地图实例。

1. 准备工作

在开始之前，确保你已经具备以下条件：

一个文本编辑器（如 VS Code、Sublime Text 等）。
一个现代浏览器（如 Chrome、Firefox 等）。
基本的 HTML 和 JavaScript 知识。

2. 创建 HTML 文件

首先，创建一个新的 HTML 文件，命名为 index.html。在这个文件中，我们将编写基本的 HTML 结构和引入 OpenLayers 库。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenLayers 基础地图实例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.3.0/ol.css">
    <style>
        #map {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://cdn.jsdelivr.net/npm/ol@v7.3.0/dist/ol.js"></script>
    <script src="main.js"></script>
</body>
</html>

在这个 HTML 文件中，我们做了以下几件事：

引入了 OpenLayers 的 CSS 文件，用于地图的样式。
创建了一个 div 元素，用于承载地图，并设置了其样式为全屏显示。
引入了 OpenLayers 的 JavaScript 文件。
引入了一个 main.js 文件，我们将在其中编写地图的初始化代码。

3. 编写 JavaScript 代码

接下来，创建一个名为 main.js 的文件，并在其中编写 JavaScript 代码来初始化地图。

// 创建一个地图视图，设置中心点和缩放级别
const view = new ol.View({
    center: ol.proj.fromLonLat([116.3975, 39.9087]), // 北京市中心坐标
    zoom: 10 // 初始缩放级别
});

// 创建一个地图实例
const map = new ol.Map({
    target: 'map', // 地图容器的ID
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM() // 使用OpenStreetMap作为地图源
        })
    ],
    view: view // 设置地图视图
});

在这段代码中，我们做了以下几件事：

创建了一个 ol.View 对象，用于设置地图的初始视图。我们使用 ol.proj.fromLonLat 方法将经纬度坐标转换为 OpenLayers 使用的坐标系统。
创建了一个 ol.Map 对象，用于初始化地图。我们指定了地图的容器（target），并添加了一个 ol.layer.Tile 图层，使用 OpenStreetMap 作为地图源。
将 view 对象传递给 ol.Map，以设置地图的初始视图。