【openlayers】地图【二】

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

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);

View

表示地图的简单 2D 视图。简单理解就是用来控制地图在容器中移动，方法的。
主要用于更改地图的中心、分辨率和旋转的对象。我们使用它来操作地图。

常用参数

• center 视图的初始中心。
• constrainRotation 旋转约束。 false意味着没有约束。true意味着没有约束