前言

openlayers5-webpack 入门开发系列环境知识点了解：

我之前写一系列关于 openlayers4 入门开发文章，但是官网推出来 openlayers5 版本的好一段时间， openlayers5 跟 openlayers4 版本差异不小，改为 import 形式引用 js css 等资源，所以，开始了本篇文章 openlayers5-webpack 入门开发系列一初探篇，对于 webpack 这个管理工具平台，我也是学习阶段，跟大家一起学习交流，写的不好之处，望见谅。

环境搭建

  • 安装 node.js，笔者版本为：10.15.3
  • 下载安装 vscode
  • demo 项目工程文件目录以及关键代码讲解

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小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

openlayers5-webpack 入门开发系列一初探篇（附源码下载）的更多相关文章

  1. leaflet-webpack 入门开发系列六矢量瓦片(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  2. leaflet-webpack 入门开发系列五地图卷帘(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  3. leaflet-webpack 入门开发系列一初探篇（附源码下载）

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  4. leaflet-webpack 入门开发系列四图层控件样式优化篇(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  5. cesium-webpack 入门开发系列一初探篇（附源码下载）

    前言 cesium-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 we ...

  6. 使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载

    HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" ...

  7. arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  8. openlayers4 入门开发系列之地图导航控件篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  9. openlayers4 入门开发系列之地图展示篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

随机推荐

  1. docker——数据卷volume：文件共享

    volume——如何让容器中的一个目录与宿主机的一个目录进行绑定,实现容器与宿主机之间的文件共享? 数据卷volume功能特性 数据卷:是一个可供一个或多个容器使用的特殊目录,实现让容器中的一个目录和 ...

  2. jsoup爬虫实战心得

    1.heder很重要,一切尽在header中.尤其cookie,useragent. 2.对于加密的连接,查看js加密过程并试着通过java或你正在使用的语言去实现 3.查看在跳转之前前端发起的关键请 ...

  3. （转）白话数字签名(2)——软件&设备

    然而它太慢了 非对称加密算法有一个重大缺点——加密速度慢,或者说得更拽一些,编码率比较低.例如在上一篇里我给Clark传的那个1GB的小电影,进行非对称加密足足用了66小时.那个借条小一些吧,也用了将 ...

  4. .NET单例模式快速学习应用

    单例模式属于设计模式中最简单的一个模式,在实际应用中也非常广泛,但可能是受到各类教程的影响,看到很多实现方式仍然沿用Java的那一套,其实在.NET中可以用更简洁的实现方式. 一.知识点介绍 核心目标 ...

  5. (二)初识NumPy库(数组的操作和运算)

    本章主要介绍的是ndarray数组的操作和运算! 一. ndarray数组的操作: 操作是指对数组的索引和切片.索引是指获取数组中特定位置元素的过程:切片是指获取数组中元素子集的过程. 1.一维数组的 ...

  6. springMvc 通过url传值，实现访问

    springMvc 通过url传值,实现访问 1.创建web项目,引入相关jar包,并完成相应配置,在上一篇博客已经实现 2.在WEB-INF下创建jsp文件夹,并创建hello.jsp文件 < ...

  7. 力扣（LeetCode）颠倒二进制位 个人题解

    颠倒给定的 32 位无符号整数的二进制位. 示例 1: 输入: 00000010100101000001111010011100 输出: 0011100101111000001010010100000 ...

  8. [转发]CSR 量产 烧录 软件

    蓝牙量产软件主要是为了应对蓝牙设备在批量生产时的一些如固件下载,地址下载,名字修改,以及一些辅助测试和检验功能. 目前,CSR推出的蓝牙芯片按照存储介质以及可编程与否分为两大类:ROM版本和Flash ...

  9. 将Swagger2文档导出为HTML或markdown等格式离线阅读

    网上有很多<使用swagger2构建API文档>的文章,该文档是一个在线文档,需要使用HTTP访问.但是在我们日常使用swagger接口文档的时候,有的时候需要接口文档离线访问,如将文档导 ...

  10. 胜利点组——“萌猿填词”微信小程序评价

    此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9860 1.根据(不限于)NABCD评论作品的选题; (1).你的创意解决了 ...