【openlayer学习记录】基础概念

原创已于 2025-06-10 23:32:59 修改 · 138 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #vue #前端

于 2025-06-10 23:31:41 首次发布

地图主要是由map,view(视图层)，layer(图层)，source（数据源），control（控件）
Map，相当于是一个地图整体的容器，其他后边的操作都需要在这里面进行。平时调用的是ol.Map

View，视图的作用是控制地图显示的中心位置，范围，层级等，涉及到地图的放大缩小旋转。ol.view

Layer，图层是很重要的概念

//TileLayer  => ol.layer.title
var openStreetMapLayer = new TileLayer({
			source: new XYZ({
				url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
			})
		});  ///这个表示的是地图的瓦片图层
	// 创建地图
	  var map = new Map({
			layers: [
				openStreetMapLayer //这里面存放的就是图层。可以存放多个，控制显隐来显示
			],
			view: new View({
				// 设置成都为地图中心
				center: [104.06, 30.67],
				projection: 'EPSG:4326',
				zoom: 10
			}),
			target: 'map'
	  });

比如地图上每显示一个东西或者点击按钮显示什么东西都是要创建一个图层来操作的，一层一层的图层叠加出来的显示成最终看到的地图的样子

1. 如何显示图层：
添加指定图层：map.addLayer(layer).  括号中的layer是图层的名称
移除指定图层：map.removeLayer(layer)
2. 基本类型
ol/layer/Tile：在网格中提供平铺的图像 （没懂...）
ol/layer/Image：渲染图像源
ol/layer/Vector ： 渲染是矢量数据。用的最多
ol/layer/VectorTile ： 提供瓦片的渲染

3. 在图层上添加元素
使用new ol.feature(）

source，为了获取图层的远程数据，openlayer使用的是ol/source/Source的子类，可以用于加载xyz等其他的切片服务，具体还没了解清楚，还需要我在了解了解。。。。。
目前理解的是，比如说要撒点到地图上，首先需要创建一个图层然后设置需要的数据源，把这些东西都添加到地图上。

feature 放在source ，source放在layer，layer放在map

 // 创建一个矢量图层，用于添加要素（多边形、圆形、线段）
  const featureLayer = new VectorLayer({
    id: 'eguid-marker',
    zIndex: 1,
    source: new VectorSource({
      features: []  //这里留了存储数据的口子
    }),
    style: featureStyle,
    visible: true // 是否显示图层，默认true
  })
  map.addLayer(featureLayer)
  // 得到数据 
  const point = new Feature({
    geometry: new Point([119.5, 31.5])
  })
  // 将要素添加到图层
  featureLayer.getSource().addFeature(point)   //将数据添加到图层
}

Overlayer 叠加层
是一种悬浮在地图上的东西。主要是放置一些和地图位置相关的元素，常见的覆盖物有三种popup弹窗，label标注信息，text文本信息，这些信息需要早html中设置一个div，然后通过overlayer的属性将div和坐标绑定起来，放在某个位置显示。

<div id="map">
  <div id="popup">

  </div>
  </div>
let popup = new ol.Overlay({
  element:document.getElementById('popup'),
  。。。
});
popup.setPosition(coordinate);
map.addOverlay(popup);