vue+openlayer加载wmts

疆~

已于 2022-12-01 20:21:16 修改

阅读量652

点赞数 1

分类专栏： Vue2 openlayers 文章标签： vue.js 前端 javascript

于 2022-06-28 18:34:26 首次发布

本文链接：https://blog.csdn.net/qq_40323256/article/details/125507770

版权

Vue2 同时被 2 个专栏收录

196 篇文章 57 订阅

订阅专栏

openlayers

48 篇文章 51 订阅

订阅专栏

当前openlayer版本为5.3.3

官网：WMTShttps://openlayers.org/en/latest/examples/wmts.html

<template>
  <div id="map"></div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { get as getProjection } from "ol/proj.js";
import TileLayer from "ol/layer/Tile.js";
import { getTopLeft } from "ol/extent.js";
import TileGridWMTS from "ol/tilegrid/WMTS.js";
import { OSM, WMTS } from "ol/source";

export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const projection = getProjection("EPSG:4326"); // 设置地图投影
      const extent = projection.getExtent(); // 地图范围
      const matrixIds = [
        "EPSG:4326:0",
        "EPSG:4326:1",
        "EPSG:4326:2",
        "EPSG:4326:3",
        "EPSG:4326:4",
        "EPSG:4326:5",
        "EPSG:4326:6",
        "EPSG:4326:7",
        "EPSG:4326:8",
        "EPSG:4326:9",
        "EPSG:4326:10",
        "EPSG:4326:11",
        "EPSG:4326:12",
        "EPSG:4326:13",
        "EPSG:4326:14",
        "EPSG:4326:15",
        "EPSG:4326:16",
        "EPSG:4326:17",
        "EPSG:4326:18",
        "EPSG:4326:19",
        "EPSG:4326:20",
        "EPSG:4326:21",
      ];

      // 切片大小
      const resolutions = [
        0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125,
        0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125,
        0.001373291015625, 6.866455078125e-4, 3.4332275390625e-4,
        1.71661376953125e-4, 8.58306884765625e-5, 4.291534423828125e-5,
        2.1457672119140625e-5, 1.0728836059570312e-5, 5.364418029785156e-6,
        2.682209014892578e-6, 1.341104507446289e-6, 6.705522537231445e-7,
        3.3527612686157227e-7,
      ];

      this.map = new Map({
        target: "map", // 绑定容器
        view: new View({
          center: [104, 30.3], // 中心点坐标
          zoom: 6,
          projection: "EPSG:4326", // 坐标系
        }),
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
          new TileLayer({
            source: new WMTS({
              url: "http://localhost:8090/geoserver/gwc/service/wmts",
              layer: "lijiang:sichuan", // 对应图层信息
              matrixSet: "EPSG:4326", // 坐标系
              format: "image/png", // 格式
              projection,
              tileGrid: new TileGridWMTS({
                origin: getTopLeft(extent), // 坐标原点
                resolutions,
                matrixIds,
              }),
              wrapX: true, // 限制地图在X轴方向重复，例如地球的横向连贯图
            }),
          }),
        ],
      });
    },
  },
};
</script>

方式2：

<template>
  <div id="map"></div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { get as getProjection } from "ol/proj.js";
import TileLayer from "ol/layer/Tile.js";
import { getTopLeft, getWidth } from "ol/extent.js";
import TileGridWMTS from "ol/tilegrid/WMTS.js";
import { OSM, WMTS } from "ol/source";

export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      let epsg = "EPSG:4326";
      const projection = getProjection(epsg); // 设置地图投影
      const extent = projection.getExtent(); // 地图范围
      const size = getWidth(extent) / 256;
      const resolutions = new Array(22);
      const matrixIds = new Array(22);
      for (let z = 0; z < 22; ++z) {
        resolutions[z] = size / Math.pow(2, z + 1);
        matrixIds[z] = epsg + ":" + z;
      }
      this.map = new Map({
        target: "map", // 绑定容器
        view: new View({
          center: [104, 30.3], // 中心点坐标
          zoom: 6,
          projection: epsg, // 坐标系
        }),
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
          new TileLayer({
            source: new WMTS({
              url: "http://localhost:8090/geoserver/gwc/service/wmts",
              layer: "lijiang:sichuan", // 对应图层信息
              matrixSet: epsg, // 坐标系
              format: "image/png", // 格式
              projection,
              tileGrid: new TileGridWMTS({
                origin: getTopLeft(extent), // 坐标原点
                resolutions,
                matrixIds,
              }),
              wrapX: true, // 限制地图在X轴方向重复，例如地球的横向连贯图
            }),
          }),
        ],
      });
    },
  },
};
</script>

加载3857：

<template>
  <div id="map"></div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { get as getProjection } from "ol/proj.js";
import TileLayer from "ol/layer/Tile.js";
import { getTopLeft } from "ol/extent.js";
import TileGridWMTS from "ol/tilegrid/WMTS.js";
import { OSM, WMTS } from "ol/source";

export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const projection = getProjection("EPSG:3857"); // 设置地图投影
      const extent = projection.getExtent(); // 地图范围
      const matrixIds = [
        "EPSG:3857:0",
        "EPSG:3857:1",
        "EPSG:3857:2",
        "EPSG:3857:3",
        "EPSG:3857:4",
        "EPSG:3857:5",
        "EPSG:3857:6",
        "EPSG:3857:7",
        "EPSG:3857:8",
        "EPSG:3857:9",
        "EPSG:3857:10",
        "EPSG:3857:11",
        "EPSG:3857:12",
        "EPSG:3857:13",
        "EPSG:3857:14",
        "EPSG:3857:15",
        "EPSG:3857:16",
        "EPSG:3857:17",
        "EPSG:3857:18",
        "EPSG:3857:19",
        "EPSG:3857:20",
        "EPSG:3857:21",
      ];

      // 切片大小
      const resolutions = [
        156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125,
        9783.939619140625, 4891.9698095703125, 2445.9849047851562,
        1222.9924523925781, 611.4962261962891, 305.74811309814453,
        152.87405654907226, 76.43702827453613, 38.218514137268066,
        19.109257068634033, 9.554628534317017, 4.777314267158508,
        2.388657133579254, 1.194328566789627, 0.5971642833948135,
        0.2985821416974068, 0.1492910708487034, 0.0746455354243517,
      ];

      this.map = new Map({
        target: "map", // 绑定容器
        view: new View({
          center: [11459841, 3580647], // 中心点坐标

          zoom: 6,
          projection: "EPSG:3857", // 坐标系
        }),
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
          new TileLayer({
            source: new WMTS({
              url: "http://localhost:8090/geoserver/gwc/service/wmts",
              layer: "lijiang:sichuan", // 对应图层信息
              matrixSet: "EPSG:3857", // 坐标系
              format: "image/png", // 格式
              projection,
              tileGrid: new TileGridWMTS({
                origin: getTopLeft(extent), // 坐标原点
                resolutions,
                matrixIds,
              }),
              wrapX: true, // 限制地图在X轴方向重复，例如地球的横向连贯图
            }),
          }),
        ],
      });
    },
  },
};
</script>