openlayers之初体验（一）

创建一个新的vue项目，后安装openlayers依赖：npm install ol

• 创建一个vue文件，简单使用openlayers，代码如下

<template>
  <div>
    <div id="map"></div>
  </div>
</template>
<script>
// 引入相关文件
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

export default {
  // 注意点：要在mounted钩子函数中创建实例，在created时DOM还未渲染
  mounted() {
    new Map({
      target: 'map', // 对应的DOM节点id值
      layers: [
        new TileLayer({
          source: new OSM() // 注意点：使用openlayers自带的OSM数据源时要注意，中国的边界是不准确的
        })
      ],
      view: new View({
        center: [0, 0], // 坐标中心点。注意点：openlayers默认使用3857坐标系
        zoom: 0 // 放大/缩小值
      })
    });
  }
}
</script>
<style>
#map {
  width: 100%;
  height: 500px;
}
</style>

运行项目即可看到简单的地图效果

• 修改数据源为自己的离线瓦片地图，且覆盖一张卫星云图（以上面代码为基础进行修改）

import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import { Tile as TileLayer, Image } from "ol/layer";
import { fromLonLat, transformExtent } from "ol/proj";
import XYZSource from "ol/source/XYZ";
import Static from 'ol/source/ImageStatic';

export default {
  methods: {
    initMap() {
      var radarLayer = new Image({
        source: new Static({
          url: "...", // 这里填上对应的图片地址即可
          projection: "EPSG:3857",
          // [[-10.787277369124666, 62.8820698883665], [56.385845314127209, 161.69675114151386]]
          imageExtent: transformExtent(
            [
              62.8820698883665,
              -10.787277369124666,
              161.69675114151386,
              56.385845314127209,
            ],
            "EPSG:4326",
            "EPSG:3857"
          ), // [minx, miny, maxx, maxy] 即对象坐标
        }),
      });

      const layer = new TileLayer({
        source: new XYZSource({
          url: "https://test.face.aibeijiayuan.com/shantou/{z}/{x}/{y}.png", // 加载离线瓦片资源
        }),
      });

      new Map({
        layers: [layer, radarLayer],
        target: this.$refs.map,
        view: new View({
          // projection: 'EPSG:4326',
          center: fromLonLat([116.681956, 23.354152]),
          zoom: 10,
        }),
      });
    },
  },
  mounted() {
    this.initMap();
  }
};

附上一张可以测试使用的卫星云图

相关参考：openlayers6【十】EPSG:3857和EPSG:4326区别详解