OpenLayers加载天地图

Vue中使用OpenLayers加载天地图图层。

在天地图网站中创建应用，获取token（Key名称）；

import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import { defaults as defaultControls } from "ol/control";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { XYZ, Vector } from "ol/source";
new Map({
    layers: [
        new TileLayer({
            source: new XYZ({
                url: "http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=tk",
            }),
            name: "BaseMap",
        }),
        new TileLayer({
            source: new XYZ({
                url: "http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=tk",
            }),
            name: "BaseMap",
        }),
    ],
    target: "map",
    view: new View({
        projection: "EPSG:4326",
        minZoom: 5,
        center: [0, 0],
        zoom: 12,
    }),
    controls: defaultControls({
        zoom: false,
        rotate: false,
        attribution: false,
    }),
})