OpenLayers学习：使用HTML网页实现地图显示功能（以加载天地图为例）步骤介绍，以及相关知识点补充介绍

最新推荐文章于 2024-07-03 20:13:24 发布

半数芝士

最新推荐文章于 2024-07-03 20:13:24 发布

阅读量4.7k

点赞数 9

文章标签：学习

本文链接：https://blog.csdn.net/weixin_73005544/article/details/127019094

版权

我们用到的天地图是栅格瓦片地图

瓦片地图（瓦片地图金字塔模型）：从地图图片（第0层）的左上角开始，从左至右、从上到下进行切割，分割到第N-1层，构成整个瓦片金字塔。（N代表的是缩放级别）

第0层（底层）：缩放级别最高（放得最大）、比例尺最大（显示的范围小、内容详细、精度高）、分辨率最高（最清晰），第N-1层反之。

STEP1：准备加载资源（天地图、openlayers）

天地图资源获取

打开天地图官网——进入注册界面，注册完毕登录后，回到首页。

进入地图API界面，先申请一下Key。

申请完毕后回到地图API界面，往下滑到最后，找到“地图瓦片获取”复制链接。

http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=你申请的Key

关于这个链接的使用：
1、等号后要替换你自己账号申请的专属Key

2、如果你要改变加载的东西，只需要将下图红框里的内容（例如vec_c）替换到上面链接中（img_w）处即可。

OpenLayers资源获取

方法一：直接复制官网所提供的链接

进入OpenLayers官网—进入最新版界面（例如我进的是v7.1.0）

进入以后直接复制相关链接即可

方法二：下载相关版本安装包

一般会提供给你两个包，只需下载包括例子和文件那个即可（红色框中）

v7.1.0下载

其他版本下载：首页滑到底——点入想下载的版本（以6.15.1示例）——再滑到底找到红框中安装包下载即可

STEP2：在Visual Studio新建空白网页

打开Visual Studio点击“创建新项目”

筛选选择“ASP.NET Web应用程序（.NET Framework）”，这里以C#语言示例

修改好你的项目名和保存地址后，点击创建

然后选择“空”，双击创建

然后找到“项目”菜单栏，选择“添加新项”

选择“web”菜单下的“HTML页”，取好名字后，点击添加即可

STEP3：正式开始写啦

我们先来写“<head></head>”这部分内容

这部分我们要写三块内容（标题title、资源链接script、样式style）

1、标题部分(<title></title>)，只需在中间写上你想取的标题名即可

2、链接部分<script></script>，（有两种方法，还记得我们在第一步准备资源的时候说的嘛，我们可以直接复制官网链接，也可以下载安装包）

（1）直接复制链接最方便，把官网上那个直接复制到链接部分即可

<script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css">

（2）如果你下载了安装包，需要两步

首先你需要解压完你的安装包后找到以下文件：

ol.css、ol.css.map、ol.js、ol.js.map（这里以v5.3.0版本为例，提供文件所在目录）

然后在Visual Studio中新建一个文件夹，这四个文件复制进去

然后按照以下代码，把你的文件位置放进去

 <script src="你建的文件夹名/ol.js" type="text/javascript"></script>
 <link href="你建的文件夹名/ol.css" rel="stylesheet" type="text/css">

3、样式部分<style></style>

<style type="text/css">

        .map {
            width: 100%;
            height: 100%;
            position: absolute;
        }
    </style>

以上<head>部分就全部完成了，附上完整代码

<head>
    <meta charset="utf-8" />
    <title>天地图加载</title>
    <script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css">
    <style type="text/css">
        .map {
            width: 100%;
            height: 100%;
            position: absolute;
        }
    </style>
</head>

接下来我们来写<body></body>部分

这部分包括：建一个地图容器（ol.map）、实例化一个对象用来调用加载图层方法（map）、实例化两个瓦片图层一个用来放底图另一个用来放注记（layer1、layer2）、调用加载方法把两个图层加载到容器里（map.addLayer()）。

1、建一个地图容器

<div id="map"></div>
<script type="text/javascript">

2、实例化一个对象

var map = new ol.Map({
            target: 'map',
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });

3、实例化两个瓦片图层

var layer1 = new ol.layer.Tile({
            title: "底图图层",
            source: new ol.source.XYZ({
                url: "步骤一中你所准备的链接",
                wrapX: false
            }),
        });

var layer2 = new ol.layer.Tile({
            title: "注记图层",
            source: new ol.source.XYZ({
                url: "步骤一中你所准备的链接",
                wrapX: false
            }),
        });

4、用对象调用加载方法（最后三个结束标签不要忘记）

        map.addLayer(layer1);
        map.addLayer(layer2);
    </script>
</body >
</html >

这样就完成了整个加载天地图的过程，最后附上调试结果图以及完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>给你的网页取个名字</title>
    <script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css">
    <style type="text/css">
        .map {
            width: 100%;
            height: 100%;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script type="text/javascript">
        var map = new ol.Map({
            target: 'map',        
            view: new ol.View({   
                center: [0, 0],   
                zoom: 2           
            })
        });
        var layer1 = new ol.layer.Tile({
            title: "底图图层",
            source: new ol.source.XYZ({  
                url: "第一步你所准备的瓦片地图链接",
                wrapX: false             
            }),                          
        });                              
        var layer2 = new ol.layer.Tile({
            title: "注记图层",
            source: new ol.source.XYZ({
                url: "第一步你所准备的瓦片地图链接",
                wrapX: false
            }),                          
        });
        map.addLayer(layer1);
        map.addLayer(layer2);
    </script>
</body >
</html >

半数芝士

关注

9
点赞
踩
48

收藏

觉得还不错? 一键收藏
4
评论
OpenLayers学习：使用HTML网页实现地图显示功能（以加载天地图为例）步骤介绍，以及相关知识点补充介绍

OpenLayers学习：使用HTML网页实现地图显示功能（以加载天地图为例）步骤介绍，以及相关知识点补充介绍
复制链接

扫一扫