前言
❝
使用
OpenLayers开发WebGIS应用，前提是要配置其开发环境，这也是进行开发的必备步骤。OpenLayers提供了两种开发方式，一种是传统开发方式，即下载相应的JS和CSS库，直接在页面中添加即可；另一种是NodeJS模块化开发方式。
传统开发方式
通过 OpenLayers 官网获取最新开发库资源包，在 HTML页面中引入 js和 css文件
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css">在BODY创建地图容器
<div id="ol-map"></div>
在 script中创建地图实例
const map = new Map({
targe: 'ol-map',
layers: [
new ol.layer.Tile({
source: new XYZ({
url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
})
}),
new ol.layer.Tile({
source: new XYZ({
url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=91fbcfac3bb4a1f211e666ac5fd0f640'
})
})
],
view: new View({
center: [0, 0],
zoom: 2
})
})设置地图容器 css定位
#ol-map {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}NodeJS 开发方式
OpenLayers从5.x开始，官方建议采用 NodeJS开发方式。
（1）安装 NodeJS环境及 NPM插件
NodeJS下载地址：https://nodejs.org/zh-cn现在的 NodeJS已经集成了 NPM，故只需要下载 NodeJS，可通过在命令行中输入以下命令检测版本。
node -v
npm -v
（2）初始化项目
在项目目录命令行窗口运行 npm init -y项目目录初始化完成后，会在项目目录下生成一个 package.json文件
（3）安装项目打包工具 Parcel 或者 WebPack
npm i --save-dev parcel-bundler
（4）安装 ol 依赖
npm i ol
（5）编写应用程序
首先在应用程序目录下新建 index.js 文件，添加如下代码。
import 'ol/ol.css'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2"
})
})
],
view: new View({
center: [114.2905, 30.5067],
projection: "EPSG:4326",
minZoom: 2,
zoom: 12
})
})然后再项目目录下创建 index.html 文件，并引入 index.js文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenLayers 地图</title>
<style>
#map{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script src="./index.js"></script>
</html>最后修改 package.json 文件，添加以下代码
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "parcel index.html",
"build": "parcel build --public-url . index.html"
}（6）启动应用程序
在编辑器终端运行 npm run dev，然后在浏览器中输入localhost:1234打开程序可在 package.json 启动命令中添加 --open，当项目运行完成时，自动在浏览器中打开
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "parcel index.html --open",
"bSuild": "parcel build --public-url . index.html"
}❝
OpenLayers示例数据下载，请回复关键字：ol数据
全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试
❝【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。
欢迎访问我的博客网站-长谈GIS ：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏 + 关注 哦 ！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 !