OpenLayers6入门，html原生网页如何使用OpenLayers6地图

汤姆猫不是猫

已于 2024-01-24 14:30:19 修改

阅读量2.3k

点赞数 4

分类专栏： # Vue+OpenLayers6入门 Vue+OpenLayers6入门到实战 OpenLayers6一本通文章标签： html 前端 javascript OpenLayers 网页使用OpenLayers

于 2023-07-28 17:53:36 首次发布

本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。

本文链接：https://blog.csdn.net/eguid/article/details/131984904

版权

OpenLayers6一本通同时被 3 个专栏收录

该专栏为热销专栏榜第36名

132 篇文章 ¥159.90 ¥299.90

订阅专栏

Vue+OpenLayers6入门到实战

123 篇文章 ¥119.90 ¥299.90

订阅专栏

Vue+OpenLayers6入门

69 篇文章 ¥69.90 ¥99.00

订阅专栏

本教程针对使用HTML原生网页的开发者，详细介绍了如何集成和使用OpenLayers6地图库。首先，你需要从官方下载ol.css、ol.js和ol.js.map文件。接着，学习如何在HTML页面中引入这些依赖并初始化地图。此外，还提供了vue项目中使用OpenLayers的参考链接。

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

专栏目录：
OpenLayers6入门教程汇总目录

前言

尽管现在大部分网页都是使用vue或者react开发了，但是还是有不少开发者使用的是网页原生html进行开发，或者是老项目维护的需要，所以为了照顾使用html原生网页的同学们，本章简单讲解一下如何使用原始html网页情况下使用OpenLayers。

vue项目使用OpenLayers6地图库请参考：《vue项目集成并使用OpenLayers6地图的两种方式》。

openlayers

二、依赖和使用

从openlayers官方网站下载最新依赖压缩包，从压缩包中拿到ol.css、ol.js和ol.js.map三个文件即可。
下载地址：https://github.com/openlayers/openlayers/releases/tag/v6.15.1
项目结构

vue中如何使用：

vue项目使用请参考这篇文章：vue项目集成并使用OpenLayers地图的两种方式

实现功能

1、使用html网页原生加载openlayers依赖
2、openlayers地图初始化

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汤姆猫不是猫-openlayers入门</title>
    <link rel="stylesheet" href="ol.css" type="text/css">
</head>
<body>
    <div id="map" style="width:800px; height: 600px;"></div>
</body>
<script src="ol.js"></script>
<script>
    // 初始化地图
    var map = new ol.Map({
      target: 'map', // 地图容器的 ID
      layers: [
        new ol.layer.Tile({
          source:new ol.source.XYZ({
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
            }), // 使用高德地图
            projection: 'EPSG:3857'
        })
      ],
      view: new ol.View({
        center: [119, 32], // 设置地图中心坐标（经纬度）
        zoom: 7, // 设置地图缩放级别
        projection: 'EPSG:4326'
      })
    });
  </script>
</html>