【WebGIS起步】（2）、npm启动openlayers项目加载显示天地图

xiaobai_1900

已于 2023-10-13 11:14:40 修改

阅读量715

点赞数 2

分类专栏： WebGIS起步文章标签：前端 npm webgl

于 2023-10-13 11:13:16 首次发布

本文链接：https://blog.csdn.net/xiaobai_1900/article/details/133803988

版权

WebGIS起步专栏收录该内容

2 篇文章 0 订阅

订阅专栏

说明

Openlayers v8.1.0：

A high-performance, feature-packed library for all your mapping needs.
OpenLayers使得在任何网页中放置动态地图变得很容易。它可以显示从任何来源加载的地图瓦片，矢量数据和标记。OpenLayers的开发是为了进一步利用各种地理信息。它是完全免费的，开源JavaScript，在2条款BSD许可证(也称为FreeBSD)下发布。

加载Openlaers资源的三种方式：

（1）、通过<script>标签和URL地址引入

在html文件内引入以下内容，全局引入Openlayers。

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

（2）、将资源库下载到本地，通过<script>标签和本地路径引入

在Openlayers的官网，找到ol资源包，将其下载到本地。并找到其中的ol.js和ol.css文件，放入项目资源对应的本地路径下。
在这里插入图片描述而后在html文件内引入以下内容，全局引入Openlayers。

<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">

（3）、使用NPM包管理器来加载Openlayers

注意：该部分需要先安装Note.js（16以上版本）
（a）如果还未创建项目，则可通过以下npm命令直接使用Vite框架，创建一个Openlayers项目：

 npm create ol-app my-app

其中，my-app可以根据自己的情况改为任意项目名称；
（b) 如果已有项目，则可通过以下npm命令来加载openlayers资源包

npm install ol

材料

openlayers官网：“https://openlayers.org/”。
天地图key码：请自行在天地图官网申请。
IDE平台：推荐VScode。

步骤

1. 下载安装Note（版本大于16）

在Note.js官网直接下载安装；
在这里插入图片描述
具体安装方式请参见：；

2. 下载安装Git

下载Git的官方地址：“https://gitforwindows.org/”。
在这里插入图片描述
具体安装方式请参见：；

3. 创建Openlayers项目

（a)、快速启动Openlayers项目，选择一个项目的本地路径。在该路径栏选中后敲击键盘输入cmd，
在这里插入图片描述
（b)、在控制台输入以下命令，回车，运行后可以在对应路径下看到该项目的文件夹：

 npm create ol-app my-webgis-projection-01

在这里插入图片描述
（c)、在VScode里打开该项目，在file菜单下点击“Open Folder”，然后选中项目文件夹，即“my-webgis-projection-01”这个文件夹。

打开后可以在VScode平台下看到：

4. 加载显示天地图

（a）、打开index.html文件

打开index.html文件，可以在里面看到：

  <body>
    <!-- 在html页面创建了一个区域，di为map -->
    <div id="map"></div>
    <!-- 在 HTML 页面中插入一段JavaScript脚本 -->
    <script type="module" src="./main.js"></script>
  </body>

（b）、在main.js文件里进行编写

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

var my_img = new TileLayer({
  //  source: new OSM()
  source: new XYZ({
    url: "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={y}&TILECOL={x}&tk=【your Key】",
  })
});

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