序文
理解するための環境知識のopenlayers5-WebPACKのスターターシリーズ：
- ノードのインストールパッケージのダウンロード
のWebPACKのパッケージ管理ツールは、公式サイトのダウンロードがあるノードの環境を依存する必要があり、そのノードのインストールパッケージは、リンクの上にインストールする必要があります- WebPACKの設定文書では説明
のWebPACKの文書の構成は、参照するには初心者のために、私も見て学んだ説明を詳細に- vscodeは、インストールパッケージをダウンロードし、私はvscodeコンパイラフロントエンド開発ツールのプロジェクトにここにいる、このツールは個人的にかなり良い感じ
- openlayers5 API文書は説明等、各クラスの機能およびプロパティopenlayers5詳細には、
- openlayers5オンライン例
私はopenlayers4スターターについての一連の記事が、いくつかの時間のためのバージョンopenlayers5公式サイトの立ち上げを書いた前に、openlayers4バージョン違いでopenlayers5は小さくありませんが、輸入の参照JS、CSSや他のリソースの形を変え、そう、この記事openlayers5-のWebPACKを開始しました入門記事の一連の予備的開発、WebPACKのプラットフォームについては、この管理ツールは、私はまた、位相を勉強、私たちは私を許して願って、非常に良いものではありません書かれたの為替と一緒に勉強します。
構築するための環境
- Node.jsのをインストールし、著者のバージョン：10.15.3
- vscodeをダウンロードしてインストール
- デモプロジェクトファイルのディレクトリとキーコードを説明
dist webpack 打包编译后的文件夹
dist/index.html 地图主页
src/map.js 地图初始化代码
package.json 记录了项目的配置信息，包括名称、版本、许可证等元数据，也会记录所需的各种模块，包括 执行依赖，和开发依赖
webpack.config.js webpack 的配置文件
- 地图页面 index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>openlayers5入门开发系列Demo</title> <!-- <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" type="text/css"> --> <style> html, body { margin: 0; height: 100%; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <div id="map"></div> <script src="bundle.js"></script> </body> </html>
- 地图初始化加载 map.js
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import 'ol/ol.css';
new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});
- 在 vscode 新建终端，输入 npm install 或者 npm i, 安装环境需要的依赖包，若无报错信息，则进行下一步
- npm run build，打包编译web项目
- npm start，node 启动 web 项目打包到浏览器运行看效果
- 如果正常出现该页面，则运行成功
完整demo源码见小专栏文章尾部：GIS之家openlayers小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波