二、OpenLayer创建地图

//头部定义
const Map = ol.Map;
const View = ol.View;
const defaultControls = ol.control.defaults.defaults;

//绑定的元素盒子
<div id="mapDiv" class="map"></div>

//高德底图
const baseVecLayer = new TileLayer({
  visible: true,
  source: new XYZ({
    url: "http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scale=1&style=8",
  }),
  zIndex: 0,
  opacity: 1,
});

//创建map
this.map = new Map({
    target: "mapDiv",
    controls: defaultControls({
      zoom: false,
    }).extend([]),
    layers: [baseVecLayer],  //可以在创建的时候加载一些底图，也可以在后面map.addLayer添加
    view: new View({
       center: [117.38597443256795, 39.4712629199329], // 中心点
       zoom: 9.3, // 缩放级别 可以带小数点
       maxZoom: 20,
       // minZoom: 5,
       projection: "EPSG:4326", //坐标系
     }),
});

坐标系注意事项需要说一下：

如果view不定义projection,那默认坐标是墨卡托的，也就是3857，这时候中心点应该这么写：

 const fromLonLat = ol.proj.fromLonLat;

 //view的定位中心点
 center: fromLonLat([117.38597443256795, 39.4712629199329],'EPSG:3857'),

否则定位的中心点就会偏移，地图出现空白现象。

加载天地图

const token = ''
const tempLayer = new TileLayer({
  preload: Infinity,  //预加载，可以预防缩放过程中出现的瓦片空白现象
  visible: true, //是否显示
  projection: "EPSG:4326",
  source: new XYZ({
    url: "https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + token,
  }),
  opacity: 1, //透明度
});

this.map.addLayer(tempLayer)

关于图层介绍在下一节。