Openlayer加载4326、3857坐标系的矢量切片服务

最新推荐文章于 2023-05-30 09:48:56 发布

GISHUB

最新推荐文章于 2023-05-30 09:48:56 发布

阅读量3.5k

点赞数 2

分类专栏： OpenLayers开发系列

本文链接：https://blog.csdn.net/weixin_45565771/article/details/111593895

版权

OpenLayers开发系列专栏收录该内容

5 篇文章 1 订阅

订阅专栏

矢量切片（Vector Tile）

详细参考

常用坐标系

EPSG:4326，等同于WGS84坐标系（约同于CGCS2000），单位：度（°）；
EPSG:3857，等同于900913，由Mercator投影而来，经常用于web地图，也称WebMercator，单位：米（m）。

Openlayer库引用

import { Map, View, Feature, Overlay } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import XYZ from "ol/source/XYZ";
import { ZoomSlider, MousePosition } from "ol/control";
import { VectorTile as VectorTileLayer } from "ol/layer";
import {
  Vector as VectorSource,
  VectorTile as VectorTileSource,
  TileDebug
} from "ol/source";
import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style";
import { GeoJSON, MVT } from "ol/format";
import Projection from "ol/proj/Projection";
import * as olProj from "ol/proj";
import { createStringXY } from "ol/coordinate";
import { createXYZ } from "ol/tilegrid";

EPSG:4326坐标系

    let country = new Style({
      stroke: new Stroke({
        color: "rgba(164, 162, 174)",
        width: 2
      }),
      fill: new Fill({
        color: "rgba(233, 229, 216)"
      })
    });
    
    let vector4326 = new VectorTileLayer({
      // 矢量切片的数据源
      source: new VectorTileSource({
        projection: "EPSG:4326",
        format: new MVT({
          idProperty: "iso_a3"
        }),
        tileGrid: createXYZ({
          extent: olProj.get("EPSG:4326").getExtent(),
          maxZoom: 22
        }),
        // 矢量切片服务地址
        tileUrlFunction: function(tileCoord) {
          const url =
            "https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/" +
            "ne:ne_10m_admin_0_countries@EPSG%3A4326@pbf/" +
            (tileCoord[0] - 1) +
            "/" +
            tileCoord[1] +
            "/" +
            (Math.pow(2, tileCoord[0] - 1) - 1 - tileCoord[2]) +
            ".pbf";
          return url;
        }
      }),
      style: country
    });
    let map = new Map({
      target: "map",
      layers: [
        vector4326,
        // 加载瓦片网格图层
        // new TileLayer({
        //   //瓦片网格数据源
        //   source: new TileDebug({
        //     //获取瓦片网格信息
        //     // tileGrid: vector4326.getSource().getTileGrid()
        //   })
        // })
      ],
      controls: [
        new MousePosition({
          coordinateFormat: createStringXY(6) // 鼠标位置
        }) 
      ],
      view: new View({
        projection: "EPSG:4326", // pbf4326格式需要使用4326坐标系
        center: [114.1564839, 24.61548857],
        zoom: 2
      })
    });

效果图如下：
在这里插入图片描述

EPSG:3857坐标系

    let country = new Style({
      stroke: new Stroke({
        color: "rgba(164, 162, 174)",
        width: 2
      }),
      fill: new Fill({
        color: "rgba(233, 229, 216)"
      })
    });

    let vector3857 = new VectorTileLayer({
      declutter: true,
      source: new VectorTileSource({
        maxZoom: 22,
        format: new MVT({
          idProperty: "iso_a3"
        }),
        url:
          "https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/" +
          "ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf"
      }),
      style: country
    });
  let map = new Map({
      target: "map",
      layers: [
        vector4326,
        // 加载瓦片网格图层
        // new TileLayer({
        //   //瓦片网格数据源
        //   source: new TileDebug({
        //     //获取瓦片网格信息
        //     tileGrid: vector3857.getSource().getTileGrid()
        //   })
        // })
      ],
      controls: [
        new MousePosition({
          coordinateFormat: createStringXY(6) // 鼠标位置
        }) 
      ],
      view: new View({
        center: [0, 0],
        zoom: 2,
      })
    });