【openlayer】百度瓦片地图


import { transform, Projection, addProjection, addCoordinateTransforms } from 'ol/proj'
import Map from 'ol/Map';
import View from 'ol/View';
import TileGrid from 'ol/tilegrid/TileGrid';
import projzh from "projzh";
import { Cluster, OSM, Vector as VectorSource, TileImage, XYZ } from 'ol/source';
import { Tile as TileLayer, Vector as VectorLayer, Heatmap as HeatmapLayer } from 'ol/layer';
import { transform, Projection, addProjection, addCoordinateTransforms } from 'ol/proj'
//常用map 方法挂载

Map.prototype.createLayerByName = function (name) {
  let layer = new VectorLayer({
    source: new VectorSource(),
    name
  })
  this.addLayer(layer)
  return layer;
}
Map.prototype.getLayerByName = function (name) {
  return this.getLayers().getArray()
    .filter(layer => layer.get('name') === name)?.[0]
}
Map.prototype.removeLayerByName = function (name) {
  this.getLayers().getArray()
    .filter(layer => layer.get('name') === name)
    .forEach(layer => this.removeLayer(layer));
}
Map.prototype.removeLayerByLikeName = function (name) {
  this.getLayers().getArray()
    .filter(layer => layer.get('name')?.indexOf(name) > -1)
    .forEach(layer => this.removeLayer(layer));
}
Map.prototype.removeOverLayerByName = function (name) {
  this.getOverlays().getArray()
    .filter(overlayer => overlayer.get('name') === name)
    .forEach(overlayer => this.removeOverlay(overlayer));
}


//注:百度地图为墨卡托坐标系
let map;
export function initMap (domOrId) {
 
  let bd09Extent = [-20037726.37, -12474104.17, 20037726.37, 12474104.17];
  let baiduMercator = new Projection({
    code: "baidu",
    extent: bd09Extent,
    units: "m"
  });
  addProjection(baiduMercator);
  addCoordinateTransforms(
    "EPSG:4326",
    baiduMercator,
    projzh.ll2bmerc,
    projzh.bmerc2ll
  );
  addCoordinateTransforms(
    "EPSG:3857",
    baiduMercator,
    projzh.smerc2bmerc,
    projzh.bmerc2smerc
  );

  let bmercResolutions = new Array(19);
  for (var i = 0; i < 19; ++i) {
    bmercResolutions[i] = Math.pow(2, 18 - i);
  }
  let baiduSource = new XYZ({
    projection: "baidu",
    wrapX: true,
    // url:"http://maponline{0-3}.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=1&udt=20191119",
    // url: window.g.map_server + "/baidutw/baidumaps/roadmap/{z}/{x}/{y}.png",  //百度瓦片地图服务地址  demo
    url: window.g.map_server,  //百度瓦片地图服务地址
    tileGrid: new TileGrid({
      minZoom: 10,
      resolutions: bmercResolutions,
      origin: [0, 0],
      extent: bd09Extent
    })
  });
//地图偏移量设置
  let xyzTileUrlFunction = baiduSource.getTileUrlFunction();
  let tmsTileUrlFunction = function ([z, x, y]) {
    return xyzTileUrlFunction([z, x, -y - 1]);
  };
  baiduSource.setTileUrlFunction(tmsTileUrlFunction);
//创建 layer
  let baidu = new TileLayer({
    source: baiduSource
  });
//创建地图实例
  map = new Map({
    layers: [baidu],
    controls: defaultControls({
      zoom: false,
      rotate: false,
      attribution: false
    }),
    target: domOrId,
    view: new View({
      
      projection: "baidu",
      center: [13412591.06556355, 2611021.508099578],  //中心点位
      zoom: 12,
      minZoom: 10,
      maxZoom: 20,
      extent: [13338597.276473703, 2459618.309558214, 13596979.207044885,2915908.8711413476],  //地图可视范围限制
    }),
  });
  return map
}

声明:yopaopao|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 【openlayer】百度瓦片地图


正如我心中爱你美丽 又怎能嘴上装四大皆空