热门标签
热门文章
- 1MinIO 高性能分布式存储最新版单机与分布式部署_minio 分布式部署
- 2git之实际项目操作_* branch dev -> fetch_head
- 3淘天集团招聘第一天，有兴趣的同学直接沟通，免费答疑&；简历辅导
- 4LLama3 大模型安装配置详细步骤_llama3-8b 模型下载安装 git clone
- 5【Git】Git复习
- 6【ChatGPT】Transformer 架构的算法原理和数学公式_chatgpt 4.0 基于自注意力机制的 transformer 架构
- 7排序算法小结
- 8命名实体识别Baseline模型BERT-MRC总结_bert mrc
- 9ArcgisServer for Linux信创环境搭建及PostgreSDE+地图缓存服务器注册（附安装包）_linux操作系统 arcgis server安装包
- 10OpenTSDB使用总结-(3)_opentsdb filter type
当前位置: article > 正文
openlayers浅入（了解框架逻辑以及简单使用）
作者：我家自动化 | 2024-05-20 00:20:09
赞
踩
openlayers
openlayers浅入（了解框架逻辑以及简单使用）
项目需求，使用openlayers替换天地图api开发，记录openlayer的使用
简介
OpenLayers是一个用于开发WebGIS客户端的JavaScript包，最初基于BSD许可发行。OpenLayers是一个开源的项目，其设计之意是为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，并具有灵活的扩展机制。目前OpenLayers已经成为一个拥有众多开发者和帮助社区的成熟、流行的框架。最新版本的OpenLayers采用纯面向对象的ECMA Script 6进行开发，可以说，在OpenLayers中万物皆对象
openlayers框架逻辑简单分析
在最新版本OpenLayers中万物皆对象，Map、Layer、Source和View是OpenLayers框架体系中的核心类，几乎所有的动作都围绕这几个核心类展开，以实现地图加载和相关操作。在OpenLayers的体系框架中：把整个地图看作一个容器（Map），核心为地图图层（Layer），每个图层有对应的数据源（Source），并由地图视图（View）进行地图表现。地图容器上还支持一些与用户交互的控件（Control和Interaction），另外，OpenLayers还支持事件机制
openlayers中常使用的坐标系统
使用WGS84（EPSG:4326） 存储数据，使用伪墨卡托(EPSG:3857)显示数据
使用openlayers
1.引入方式
写的demo使用的cdn方式引入openlayers，项目中使用npm导入openlayers依赖包
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>openlayer</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css"> <link rel="stylesheet" href="./index.css"> </head> <body> <div id="map"></div> <div id="mouse-position" class="mouse-position-wrapper"> <div class="custom-mouse-position"></div> </div> <script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script> <script type="module" src="./app.js"></script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
2.具体js实现代码（app.js）
const url = 'http://服务器地址/tiles/{z}/{x}/{y}.png'
const epsg = 'EPSG:3857';
const projection = ol.proj.get(epsg);
- 1
- 2
- 3
new出map对象，部分参数使用
const map = new ol.Map({ target: 'map', view: new ol.View({ center: ol.proj.transform([105.255396, 33.642909], 'EPSG:4326', epsg), zoom: 4, projection, // minZoom: 3, // 限制拖拽范围 extent: [ // ...ol.proj.fromLonLat([66.539576, 56.602398]), // ...ol.proj.fromLonLat([139.137232, 9.785853]), // 添加这个范围 经度-最小，纬度-最小，经度-最大，纬度-最大 ...ol.proj.fromLonLat([73.32783475401652, 19.4243521114706]), ...ol.proj.fromLonLat([135.16017906160056, 53.83501005646246]), ], //长度为4的数组， 传入地图对角投影坐标 /* ` lt:60.646255, 54.099069, rt:141.628437, 55.359014, rb:138.233974, 11.404207, lb:72.284413, 12.590013 ` */ showFullExtent: true, }), });
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
显示经纬度信息
map.addControl(ol.control.defaults.defaults().extend([
// 鼠标位置经纬度显示
new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(6),
projection: ol.proj.get('EPSG:4326'),
className: 'custom-mouse-position',
target: document.getElementById('mouse-position')
}),
]))
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
使用addLayer方法加载离线图层
*注：addLayer 方法添加层时 如果没有设置zIndex，根据添加顺序 后面添加的会覆盖前面添加的同位置的覆盖层
// 离线图层
map.addLayer(new ol.layer.Tile({
title: "tileLayer",
baseLayer: true,
willReadFrequently: true,
source: new ol.source.XYZ({
attributions: 'cdwx',
minZoom: 1,
maxZoom: 19,
projection: projection,
tileSize: 256,
url
})
}));
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
添加点Point，并设置点的样式图片等（注释代码是多种可设置样式的方式）
// 添加点 const iconFeature1 = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([104.13689, 33.96498], 'EPSG:4326', epsg)), id: 9527, // style: new ol.style.Style({ // image: new ol.style.Icon({ // anchor: [0.5, 50], // anchorXUnits: 'fraction', // anchorYUnits: 'pixels', // src: "img/station_0_1.png", // scale: .4 // }) // }) }); iconFeature1.setStyle(new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 50], anchorXUnits: 'fraction', anchorYUnits: 'pixels', src: "img/station_0_1.png", scale: .4 }) })) const iconFeature2 = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([118.344251, 32.015470], 'EPSG:4326', epsg)), id: 4388, // style: new ol.style.Style({ // image: new ol.style.Icon({ // anchor: [0.5, 50], // anchorXUnits: 'fraction', // anchorYUnits: 'pixels', // src: "img/station_0_1.png", // scale: .4 // }) // }) }); iconFeature2.setStyle(new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 50], anchorXUnits: 'fraction', anchorYUnits: 'pixels', src: "img/station_6_0.png", scale: .3 }) })) const tilerVectorSource = new ol.source.Vector({ features: [iconFeature1, iconFeature2] }); /* 1.feature通过setStyle设置样式 layer通过 function (f) {return f.getStyle()} 设置样式 （能够在后期使用feature.setStyle(undefined)来隐藏feature） 2. feature通过ObjectWithGeometry中设置style样式如下 new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([118.344251, 32.015470], 'EPSG:4326', epsg)), id: 4388, style: new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 50], anchorXUnits: 'fraction', anchorYUnits: 'pixels', src: "img/station_0_1.png", scale: .4 }) }) }) layer通过 function (f) {return f.get('style')} 设置样式 3.feature不设置样式， layer通过属性设置样式 */ map.addLayer(new ol.layer.VectorImage({ title: 'siteLayer', source: tilerVectorSource, zIndex: 1, style: function (f) { return f.getStyle() // return f.get("style") } // style: new ol.style.Style({ // image: new ol.style.Icon({ // anchor: [0.5, 50], // anchorXUnits: 'fraction', // anchorYUnits: 'pixels', // src: "img/station_0_1.png", // scale: .4 // }) // }) }));
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
添加Polygon多边形，并设置点的样式图片等（注释代码是多种可设置样式的方式）
// Polygon多边形 let pointArr1 = [[115.668,25.811],[115.746,25.769],[116.533,25.2],[116.621,25.123],[117.275,24.448],[117.348,24.357],[117.774,23.783],[118.125,23.127],[118.248,22.775],[118.351,22.478],[118.474,21.836],[118.501,21.2],[118.484,21.016],[118.441,20.57],[118.283,19.945],[118.041,19.401],[118.003,19.326],[117.563,18.713],[117.494,18.639],[116.912,18.16],[116.823,18.108],[116.311,17.839],[115.692,17.64],[115.059,17.544],[114.41,17.54],[113.744,17.629],[113.059,17.811],[112.349,18.111],[112.202,18.193],[111.605,18.563],[111.253,18.834],[110.807,19.246],[110.585,19.474],[110.063,20.115],[109.906,20.354],[109.646,20.758],[109.348,21.403],[109.155,22.05],[109.052,22.699],[109.049,23.35],[109.129,23.853],[109.156,24.002],[109.41,24.654],[109.583,24.939],[109.865,25.305],[110.144,25.594],[110.62,25.952],[110.757,26.04],[111.409,26.324],[112.089,26.484],[112.788,26.544],[113.505,26.513],[114.236,26.384],[114.982,26.146],[115.668,25.811]] let pointArr2 = [[120.55,24.385],[120.657,24.325],[121.259,23.72],[121.417,23.41],[121.55,23.067],[121.547,22.425],[121.531,22.384],[121.135,21.792],[120.971,21.663],[120.35,21.51],[119.702,21.571],[119.106,21.825],[119.019,21.886],[118.542,22.475],[118.367,23.122],[118.498,23.769],[118.715,24.116],[119.032,24.412],[119.311,24.563],[119.966,24.596],[120.55,24.385]] const corrds1 = [pointArr1] const corrds2 = [pointArr2] const sourcePolygon = new ol.source.Vector() // 1.创建数据源 const layerPolygon = new ol.layer.Vector({ // 2.创建图层 zIndex: 1, // 图层的层级 // style: { // 'fill-color': 'rgba(255, 0, 0, 0.3)', // 'stroke-color': 'rgba(255, 0, 0, 0.9)', // 'stroke-width': 1, // }, // style: new ol.style.Style({ // stroke: new ol.style.Stroke({ // color: 'rgba(255, 0, 0, 0.9)', // width: 1 // }), // fill: new ol.style.Fill({ // color: 'rgba(255, 0, 0, 0.3)' // }) // }), style: function (f) { return f.getStyle() }, title: 'beamLayer' }) const featureCollection = new ol.Collection() const polygon1 = new ol.geom.Polygon(corrds1) polygon1.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857')); const polygon2 = new ol.geom.Polygon(corrds2) polygon2.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857')); const feature1 = new ol.Feature({ title: 'beam1', geometry: polygon1, }) feature1.setStyle(new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(255, 0, 0, 0.9)', width: 1 }), fill: new ol.style.Fill({ color: 'rgba(255, 0, 0, 0.3)' }) })) const feature2 = new ol.Feature({ title: 'beam2', geometry: polygon2 }) feature2.setStyle(new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(255, 0, 0, 0.9)', width: 1 }), fill: new ol.style.Fill({ color: 'rgba(255, 0, 0, 0.3)' }) })) featureCollection.push(feature1) featureCollection.push(feature2) sourcePolygon.addFeatures(featureCollection.getArray()) layerPolygon.setSource(sourcePolygon) // 3.把数据源绑定到图层上面 map.addLayer(layerPolygon) // 4.图层通过addlayer添加到map对象上在界面显示
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
获取所有添加的layer图层，进行操作
*注：map.getPixelFromCoordinate 必须在map加载生成完毕后使用 否则会返回null
// 控制图标隐藏显示 map.getAllLayers().forEach(item => { // console.log(item) if (item.get('title') === 'siteLayer') { console.log(item.getSource().getFeatures()) // console.log(item.getSource().getFeatures()[0].getStyle()) item.getSource().getFeatures()[1].setStyle() // item.getSource().getFeatures()[1].setStyle(null) // item.getSource().getFeatures()[1].setGeometry(null) setTimeout(() => { // map.getPixelFromCoordinate 必须在map加载生成完毕后使用 否则会返回null console.log(map.getFeaturesAtPixel(map.getPixelFromCoordinate([118.344251, 32.015470]))) // const { style, geometry } = showOneSite(0, 1, [118.344251, 32.015470]) // item.getSource().getFeatures()[1].setStyle(style) // item.getSource().getFeatures()[1].setGeometry(geometry) }, 5000) // item.setVisible(false) // 根据状态显示隐藏可以使用setVisible方法 } if (item.get('title') === 'beamLayer') { // console.log('----------') // console.log(item.getSource().getFeatures(), '1') // console.log(item.getSource().getFeatures()[0].get('title')) item.getSource().getFeatures()[0].setStyle() } })
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
相比天地图api，openlayer的使用感觉功能更全面，api调用更方便，可扩展性更强，并且openlayer可以很方便的支持离线开发，离线图层等；因为自己使用cesium多处理的是3d界面数据显示，而openlayer使用不多并且是2d界面的数据展示。所以不好对比cesium，只是感觉openlayer的api调用更方便，cesium中Viewer类就是一切API的入口，代码过重。例如在cesium处理地图切换时监听事件代码如下：
viewer.sceneModePicker.viewModel.morphToColumbusView.beforeExecute.addEventListener(function(a) {
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(105, 33, 10000000)
});
});
- 1
- 2
- 3
- 4
- 5
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/595216
推荐阅读
相关标签
