openlayers5-webpack 入门开发系列一初探篇（附源码下载）
前言
openlayers5-webpack 入门开发系列环境知识点了解：
- node 安装包下载
webpack 打包管理工具需要依赖 node 环境，所以 node 安装包必须安装，上面链接是官网下载地址- webpack 配置介绍文档
详细的 webpack 文档配置介绍，适合新手查看，我也是边看边学- vscode 安装包下载，我这边用 vscode工具编译开发前端项目，个人觉的这款工具还不错
- openlayers5 api文档介绍，详细介绍 openlayers5 每个类的函数以及属性等等
- openlayers5 在线例子
我之前写一系列关于 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 入门开发系列一初探篇（附源码下载）的更多相关文章
- leaflet-webpack 入门开发系列六矢量瓦片(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- leaflet-webpack 入门开发系列五地图卷帘(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- leaflet-webpack 入门开发系列一初探篇（附源码下载）
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- leaflet-webpack 入门开发系列四图层控件样式优化篇(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- cesium-webpack 入门开发系列一初探篇（附源码下载）
前言 cesium-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 we ...
- 使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载
HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" ...
- arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- openlayers4 入门开发系列之地图导航控件篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之地图展示篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
随机推荐
- [LINQ2Dapper]最完整Dapper To Linq框架(五)---查看Linq实际执行的SQL
此例子是使用LINQ2Dapper封装,效率优于EntityFramwork,并且支持.NetFramework和.NetCore框架,只依赖于Dapper支持.net framework4.6.1及 ...
- Linux命令实战（三）
1.file检查并显示文件类型(determine file type) 一般用法就是file 后面接要查看的文件 可以一个或多个 [root@test test]# ll total 140 -rw ...
- C语音中最简单的排序冒泡排序和选择排序代码实现(非指针)
#include<stdio.h> int main() { int a[5] = { 2,5,7,3,-1 }; int n = sizeof(a) / sizeof(a[0]);//元 ...
- 领扣（LeetCode）删除排序数组中的重复项 个人题解
给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成. 示例 1 ...
- Prometheus+Altermanager钉钉报警
Prometheus+Altermanager钉钉报警 一.添加钉钉机器人 参考钉钉官方文档:https://ding-doc.dingtalk.com/doc#/serverapi2/qf2nxq ...
- selenium滑块验证
使用selenium模拟登录解决滑块验证问题 本次主要是使用selenium模拟登录网页端的TX新闻,本来最开始是模拟请求的,但是某一天突然发现,部分账号需要经过滑块验证才能正常登录,如果还是模拟 ...
- scrapy_redis分布式爬虫
文章来源:https://github.com/rmax/scrapy-redis Scrapy-Redis Documentation: https://scrapy-redis.readthedo ...
- 用例图浅谈以及OOA再到情景分析的面向对象电梯的设计（慕课东北大学）面向对象设计思维模式
上班初期还不太适应,平时学习进度也跟不上,节奏慢下来会有时间更新的了. Diagram 这边以学生课程报名系统为例 这就是一种简单的用例图 用例图可以给读者提供的信息非常丰富,但是缺点是都是概 ...
- 移动端viewport模版
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...
- 线程同步&线程池
线程同步&线程池 线程同步 线程不同步会出现的问题: 当多个线程操作同一资源时,会出现重复操作和和操作不存在的资源的问题,为了规避这一问题就需要线程的同步操作来实现资源的共同使用. 线程同步: ...