OpenLayer基础学习

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>

最后样式如下图，再回头看模块间关系应该就清楚了