基于openlayers6的基本地图操作--1.初始化加载地图底图

安装openlayers

npm i ol -S

引入需要的包

import 'ol/ol.css';
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import {
  transform
} from 'ol/proj.js';
import View from "ol/View";
import XYZ from "ol/source/XYZ";

加载天地图在线瓦片地图

• 在线瓦片地址

矢量图：'http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=c5c4cc4094d19c6de34a93158e35911d'
影像图： 'http://t2.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=c5c4cc4094d19c6de34a93158e35911d'
地形图： 'http://t2.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=c5c4cc4094d19c6de34a93158e35911d'

• 坐标系转换

默认坐标系为EPSG:3857，坐标转换成EPSG:4326，利用ol/proj.js的transform方法：

let center = transform([10419419.755901294, 4222817.223109004], "EPSG:3857", "EPSG:4326");

• 利用接口XYZ实现加载瓦片

    var map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new XYZ({
            url: 'http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=c5c4cc4094d19c6de34a93158e35911d'
          }),
          visible: true,
          name: 'basemap'
        })
      ],
      view: new View({
        minZoom: 7,
        maxZoom: 22,
        center: center ,
        zoom: this.zoom,
        projection: 'EPSG:4326'
      })
    })