【openlayers】地图【二】

最新推荐文章于 2025-04-17 09:48:12 发布

折桂怀橘

最新推荐文章于 2025-04-17 09:48:12 发布

阅读量1.6k

点赞数

分类专栏：前端相关知识文章标签： javascript 前端算法

本文链接：https://blog.youkuaiyun.com/weixin_42910765/article/details/126049080

版权

本文介绍了OpenLayers中的Layer图层，包括初始化切片图层和矢量图层Vector Layer。Vector Layer提供了丰富的信息，能够显示几何形状和附加属性。同时，文章还提及了View用于地图的2D视图控制，以及控件和交互功能在地图操作中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习不用慌，我们可以看到官网这个界面我们只需要掌握下面几大项就可以操练起来了。
当然在学习中要经常查官方文档自然慢慢就会了。

在这里插入图片描述

Layer图层

瓦片地图原理

OpenLayers的地图数据通过图层（Layer）进行组织渲染，然后通过数据源（Source）设置具体的地图数据来源。Layer可看作渲染地图的层容器，具体的数据需要通过Source设置。
地图数据根据数据源（Source）可分为Image、Tile、Vector三大类型的数据源类，对应设置到地图图层（Layer）的Image、Tile、Vector三大类的图层中。
Source和Layer是一对一的关系，有一个Source，必然需要一个Layer，然后把Layer添加到Map上，就可以显示出来了。

Image为图片数据源，Tile为瓦片数据源（之前文章有如何下载瓦片），两者本质基本相同，均为图片或图片集。

初始化一个切片图层

 // 使用 高德 的瓦片数据
        const tileLayer = new TileLayer({
   
            source: new XYZ({
   
                url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
            }),
        });

例中的 source url 设置了数据的来源。

矢量图层Vector Layer

矢量地图

Vector Layer的特点
在栅格图片里，你所能看到就是你所能得到的信息，在你的地图上添加卫星图片能够看到很多的建筑物，但是建筑物的很多属性信息你是看不到的，如楼层结构、年代、使用年限等，但是矢量图层能够提供更多的信息。
在矢量图层中，能够显示建筑物的几何形状和附加信息，如房主、面积、方位等等。在栅格图层上添加矢量图层很简单，还可以在指定位置创建要素。我们可以通过鼠标的点击、停旋在要素上查看要素的属性信息，空间信息等。

我们根据坐标值或者通过绘制生成的几何体，都是使用VectorLayer来添加的

// 创建矢量数据源
    const source = new VectorSource({
   
      features,
    });
    // 创建样式
    const style = new Style({
   
      stroke: new Stroke({
   
        color: "#ff0000",
        width: 3,
        lineDash: [5],
      }),
      fill: new Fill({
   
        color: "rgba(255,255,255,0.9)",
      }),
    });
    // 创建矢量图层
    const areaLayer = new VectorLayer({
   
      source,
      style,
      zIndex: 100,
    });

    const map = new Map({
   
      view: new View({
   
        center: fromLonLat([120.771441, 30.756433]),
        zoom: 3,
        minZoom: 0,
        maxZoom: 18,
        constrainRotation: true,
      }),
      target: this.$refs.mapCon,
      layers: [
        new TileLayer({
   
          source: new OSM(),
        }),
      ],
    });

    map.addLayer(areaLayer);