OpenLayer学习记录
OpenLayer是什么
OpenLayer就是实现WebGIS的第三方工具库.
OpenLayer的中基础模块的关系
运行环境
vue3+vite 建议在脚手架环境下使用,这样导包会方便一些
// pnpm i ol
// npm i ol
引入ol框架
// 所需引入的类 以及对应的起别名 先复制 后面都会用到
import { Map, View, Feature, Overlay } from 'ol'
import * as olProj from 'ol/proj'
import { Layer, Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import { Vector as VectorSource,XYZ } from 'ol/source'
import { Geometry, LineString, Point } from 'ol/geom'
import { Style, Fill, Stroke, Circle as sCircle, Icon} from 'ol/style'
import { onMounted, reactive, ref } from 'vue'
Feauture
feature就是特征,假如我们现在想要设置一个 圆形的marker
// new Feature() 创建一个新的feature
// geometry属性即为这个feature的几何属性(可以理解为marker的位置),从源码中我们可以看出geometry可以是point点,或者LineString线等等 这些几何形状需要由坐标实现, 毕竟我们要将元素设置到地图上某个位置,位置信息是必不可少的
// OpenLayer中坐标为Coordinate,这个Coordinate值可以通过内置olProj.fromLonLat([108.945951, 34.465262])方法将经纬度转化为 Coordinate
const markerFeature = new Feature({
geometry:new Point(olProj.fromLonLat([108.945951, 34.465262]))
})
// olProj来自于import * as olProj from 'ol/proj'
Style
现在我们有了具有了marker的几何信息,但我们想要修改marker的样式,所以有了Style属性
// style里属性特别多,可以去看源码,简单使用下面的例子
// image其实就是marker主体,可以是Circle,或者Icon 等等,里面可以设置fill填充属性,stroke描边属性等等,本文只举例简单使用
const markerStyle = new Style({
image:new sCircle({
radius:100,
stroke: new Stroke({
color:'blue',
width:5
}),
fill: new Fill({
color:'red',
})
})
})
// 这是设置image透明度 其实可以看源码或者在类后面.一下可以看到该对象的方法
markerStyle.getImage().setOpacity(0.5)
// 接下来将 style与feature连接起来 这样我们的 feature就有对应的style样式
markerFeature.setStyle(markerStyle)
Sourece
现在我们要将这个feature加到我们的source资源集合中
// new VectorSource() 创建矢量图资源,应该大部分自己创建的都是VectorSource,少数瓦片图等用其他的方式创建资源
// 并将我们的资源放入到features属性中,我们可以看出来这个features是一个数组,这样我们就可以加入许多的feature到这个资源中
// 可以在初始化时候加入也可以在后面markerSource.addFeature(markerFeature)加入都可以
const markerSource = new VectorSource({
features: [markerFeature]
})
Layer
现在资源有了,我们就要将source加入到layer中
// 和我们的source层一样 新建VectorLayer 给对应的属性
const markerLayer = new VectorLayer({
source: markerSource
})
// 现在我们一个简单的图层就搭建好了
Map
其实我么现在写这么多,都是纯js而且都跟我们的界面没有任何关系,这是因为我们真正显示在页面上的是一个 Map对象,我们所有的图层都要加入到Map上
// 我们需要在 onMounted中初始化map因为,在onMounted才能获取真实的dom元素
// 在template中添加<div id="map"></div> 这是我们地图所渲染的位置,给他设置宽高
// #map {width: 100vw;height: 100vh;}
onMounted(() => {
map = new Map({
// 绑定目标dom元素 用id属性值
target: 'map',
layers: [
// 地图图层,最基本的图层,所有图层都是基于这个图层
// 由于采用高的地图的 瓦片图 所以用new TileLayer()
new TileLayer({
// source 根据new XYZ() 创建 xyz对应应该是坐标 直接复制就行
source: new XYZ({
url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
})
})
],
// View就是设置显示的属性
view: new View({
// 初始化的地图中心位置
center: olProj.fromLonLat([108.945951, 34.465262]),
// 地图层级
zoom: 5
})
})
// 将我们的 markerLayer 添加到map中
map.addLayer(markerLayer)
})
基础篇完整代码
<template>
<div>
<div id="map"></div>
</div>
</template>
<script setup>
import { Map, View, Feature, Overlay } from 'ol'
import * as olProj from 'ol/proj'
import { Layer, Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import { Vector as VectorSource,XYZ } from 'ol/source'
import { Geometry, LineString, Point } from 'ol/geom'
import { Style, Fill, Stroke, Circle as sCircle, Icon} from 'ol/style'
import { onMounted, reactive, ref } from 'vue'
let map = null
const markerFeature = new Feature({
geometry:new Point(olProj.fromLonLat([108.945951, 34.465262]))
})
const markerStyle = new Style({
image:new sCircle({
radius:100,
stroke: new Stroke({
color:'blue',
width:5
}),
fill: new Fill({
color:'red',
})
})
})
markerStyle.getImage().setOpacity(0.5)
markerFeature.setStyle(markerStyle)
const markerSource = new VectorSource({
features: [markerFeature]
})
const markerLayer = new VectorLayer({
source: markerSource
})
onMounted(() => {
map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
})
})
],
view: new View({
center: olProj.fromLonLat([108.945951, 34.465262]),
zoom: 5
})
})
map.addLayer(markerLayer)
})
</script>
<style scoped>
#map {
width: 100vw;
height: 100vh;
}
</style>
最后样式如下图,再回头看模块间关系应该就清楚了