Vue+OpenLayers7入门到实战：html原生网页如何使用OpenLayers7地图_前端openlayers最新

作者：知新_RL | 2024-05-20 00:26:39

踩

前端openlayers最新

返回《Vue+OpenLayers7》专栏目录：Vue+OpenLayers7入门到实战

前言

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

Vue项目从零构建OpenLayers7地图脚手架请参考：《Vue+OpenLayers7：快速搭建Vue+OpenLayers7地图脚手架项目。从零开始构建Vue项目并整合OpenLayers7.5.2》。

已有Vue项目使用OpenLayers7地图库请参考：《Vue+OpenLayers7：OpenLayers7地图整合到Vue项目中的两种方式》。

Vue+OpenLayers7入门到实战

二、依赖和使用

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

实现功能

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>汤姆猫不是猫-Vue+OpenLayers7</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' //更改视图投影为4326
      })
    });
  </script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

测试效果演示

openlayers使用如此，我们便完成了在html网页中使用OpenLayers7加载地图的功能，是不是很简单。

如果您觉得博主写得还不错，欢迎”关注、点赞、收藏“一键三连

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