2. 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", //坐标系
     }),
});

座標系について次のように考慮する必要があります。

ビューで投影が定義されていない場合、デフォルトの座標はメルカトル図法、つまり 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)

レイヤーについては次のセクションで説明します。