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
}
【openlayer】百度瓦片地图
查看评论
Comments | NOTHING