openlayer 加载天地图创建地图
安装 openlayers
npm i ol -S
引入需要的包
1import 'ol/ol.css';
2import Map from 'ol/Map';
3import TileLayer from 'ol/layer/Tile';
4import { transform } from 'ol/proj.js';
5import View from 'ol/View';
6import XYZ from 'ol/source/XYZ';
加载天地图在线瓦片地图
- 在线瓦片地址
1 矢量图： "http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的token"
2 影像图： "http://t2.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你的token"
3 地形图： "http://t2.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=你的token"
-
坐标系转换
默认坐标系为
EPSG:3857，坐标转换成EPSG:4326，利用ol/proj.js的transform方法：
1let center = transform([10419419.755901294, 4222817.223109004], 'EPSG:3857', 'EPSG:4326');
- 利用接口
XYZ实现加载瓦片
1var map = new Map({
2 target: 'map',
3 layers: [
4 new TileLayer({
5 source: new XYZ({
6 url: 'http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的token',
7 }),
8 visible: true,
9 name: 'basemap',
10 }),
11 ],
12 view: new View({
13 minZoom: 7,
14 maxZoom: 22,
15 center: center,
16 zoom: this.zoom,
17 projection: 'EPSG:4326',
18 }),
19});
