OpenLayers （ol包），Vite显示地图（附源码）

Nashomon

已于 2022-02-15 17:30:41 修改

阅读量2k

点赞数 1

分类专栏： Map Openlayers 文章标签： npm node.js javascript

于 2022-01-30 17:09:39 首次发布

本文链接：https://blog.csdn.net/markwy/article/details/122753545

版权

Openlayers 同时被 2 个专栏收录

3 篇文章 1 订阅

订阅专栏

Map

1 篇文章 0 订阅

订阅专栏

记录用OpenLayers、Vite显示OSM地图的全部步骤，不缺省信息，记录最初接触的过程 。

安装Node

从 https://nodejs.org/zh-cn/ 下载安装最新版的node，安装中选项全部用默认，主要为了用里面自带的npm包管理器。

安装 cnpm

npm速度较慢，可用cnpm来代替npm。cnpm也用npm来安装。

E:\dev\map\>npm install -g cnpm --registry=https://registry.npm.taobao.org

-g表示全局安装，–registry=https://registry.npm.taobao.org表示使用国内镜像安装。

用cnpm安装ol包（openlayers地图包）

E:\dev\map\>cnpm install ol -g

用vite创建项目

E:\dev\map>npx create-ol-app wy-ol-vite --template vite
could not download https://github.com/openlayers/ol-vite/archive/c10ace47326521e5d929bd1e96db78ff0376169a.tar.gz

npx是node的命令，这里用来创建openlayers项目，项目名为wy-ol-vite, 用vite模板。
vite是基于Vue的前端开发和和构建工具，和npm一起，当源码变化时，可以实时显示变化后的运行结果，方便项目的开发调试和部署。
创建多次不成功。根据提示信息中的文件名“https://github.com/openlayers/ol-vite/archive/c10ace47326521e5d929bd1e96db78ff0376169a.tar.gz”，直接下载，手工新建目录e:\dev\map\wy-ol-vite，把下载的文件解压。
源文件中已经写好了基本的显示地图所需的语句，包括调用在线的OpenStreetMap地图源及显示的语句，正常情况下，不需修改即可显示地图。

安装项目依赖

切换到wy-ol-vite目录，运行命令，安装依赖：

cnpm install

启动vite服务

npm start

显示如下信息：
npm start

在浏览器中显示地图

在本机浏览器地址栏中输入网址：localhost:3000，正常的话，将显示OSM地图。程序通过ol包提供的函数，连接OSM的地图源并显示。
openlayer+vite显示osm 地图

打包生产环境的文件

为了能通过互联网访问，需要把文件上传到WEB服务器，可使用vite的打包功能，生成上传所需的文件。
npm run build
在当前目录下自动生成了dist目录，包括如下文件：
dist 目录
assets目录中的文件见本贴最后的图，是用于生产环境的文件。

使用winscp等工具，把dist目录下的文件包括目录上传到服务器，在本地浏览器中输入网址访问。
上传服务器后访问

文件上传服务器后不显示地图

可能是npm run build修改了index.html文件后，资源文件路径不适用于服务器目录结构。
可参照下面的代码修改。主要是把/assets/改成./assets/ （/前面加个点号）。

/dist/index.html 文件内容修改后如下：

<!-- /dist/index.html  -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/x-icon" href="https://openlayers.org/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Using OpenLayers with Vite</title>
    <script type="module" crossorigin src="./assets/index.b018800d.js"></script>
    <link rel="modulepreload" href="./assets/vendor.8b5fe051.js">
    <link rel="stylesheet" href="./assets/index.7e5e30bb.css">
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

附全部源码

把下面的源码拷贝到自己的项目目录下，然后执行cnpm install，安装依赖后，运行npm start启动服务，显示地图。具体参考前面的说明。

index.html

<!DOCTYPE html>
<!-- 
  index.html
  显示Openlayers地图，使用Vite打包工具。 
  Created: 2022.1.28
-->
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/x-icon" href="https://openlayers.org/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>ol map vite - markwy</title>
    </head>
    <body>
        <div id="map"></div>
        <script type="module" src="./main.js"></script>
    </body>
</html>

main.js

// main.js
// 用 npm install ol 安装openlayers包
import './style.css'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import TileWMS from 'ol/source/TileWMS'

const map = new Map({
    target: 'map',
    layers: [
        new TileLayer({
            source: new OSM(),
        }),
    ],
    view: new View({
        center: [0, 0],
        projection: 'EPSG:3857',
        zoom: 2,
    }),
})

package.json

{
  "name": "wy-ol-vite",
  "version": "1.0.0",
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "devDependencies": {
    "vite": "^2.6.7"
  },
  "dependencies": {
    "ol": "latest"
  }
}