//头部定义
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)
关于图层介绍在下一节。