偏移问题,我首先想到的是,百度地图采用的是bd09II坐标系,那是不是我们把wgs84坐标转换成bd09II再加载就好了呢?经过坐标转换之后发现,坐标偏移还是很严重。其实根本原因是:我们需要根据bd09II坐标系,生成baiduMercator投影。
怎么把3857投影转化成baiduMercator呢,在giuhub中tschaub给出了方法 projzh
下面我们就利用projzh加载百度地图:
<!--
* @Author: yang xiunan
* @Date: 2020-10-31 16:03:42
* @LastEditTime: 2020-11-09 11:10:33
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \ol6d:\myCode\ol5\src\components\HelloWorld.vue
-->
<template>
<div class="box">
<div id="map"></div>
</div>
</template>
<script>
/* eslint-disable */
import projzh from "projzh";
import Map from "ol/Map";
import View from "ol/View";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Fill, Icon, Stroke, Style, Text } from "ol/style";
import TileGrid from "ol/tilegrid/TileGrid";
import TileImage from "ol/source/TileImage";
import Tile from "ol/layer/Tile";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import Projection from "ol/proj/Projection";
import {addProjection, addCoordinateTransforms} from "ol/proj";
import {applyTransform} from "ol/extent";
export default {
name: "HelloWorld",
mounted() {
let center = [108.94238,34.26097]; //西安钟楼
// let center = [108.964031,34.217865]; //西安大雁塔
// let center = [116.411794, 39.9068]; //北京东单
let extent = [72.004, 0.8293, 137.8347, 55.8271];
let baiduMercator = new Projection({
code: 'baidu',
extent: applyTransform(extent, projzh.ll2bmerc),
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 (let i = 0; i < 19; ++i) {
bmercResolutions[i] = Math.pow(2, 18 - i);
}
let baidu = new Tile({
source: new TileImage({
projection: 'baidu',
maxZoom: 18,
tileUrlFunction: function(tileCoord) {
let x = tileCoord[1];
let y = tileCoord[2];
let z = tileCoord[0];
return "https://api.map.baidu.com/customimage/tile?&x="+x+"&y="+y+"&z="+z+"&udt=20170927&scale=1&ak=8d6c8b8f3749aed6b1aff3aad6f40e37&styles=t%3Aland%7Ce%3Aall%7Cc%3A%2300121cff%2Ct%3Awater%7Ce%3Aall%7Cc%3A%2300445dff%2Ct%3Ahighway%7Ce%3Aall%7Cc%3A%2307313fff%2Ct%3Asubway%7Ce%3Aall%7Cv%3Aoff%2Ct%3Aarterial%7Ce%3Aall%7Cv%3Aon%7Cc%3A%23003242ff%2Ct%3Agreen%7Ce%3Aall%7Cv%3Aoff%2Ct%3Alabel%7Ce%3Al.t.s%7Cv%3Aon%7Cc%3A%2335bd8500%2Ct%3Arailway%7Ce%3Aall%7Cv%3Aoff%2Ct%3Alabel%7Ce%3Al.t.f%7Cv%3Aon%7Cc%3A%2335bd85ff%7Cw%3A1%2Ct%3Abuilding%7Ce%3Aall%7Cv%3Aon%7Cc%3A%231692beff%2Ct%3Amanmade%7Ce%3Aall%7Cv%3Aoff%2Ct%3Agreen%7Ce%3Aall%7Cv%3Aoff%2Ct%3Apoi%7Ce%3Al.t.f%7Cv%3Aon%7Cc%3A%2335bd85ff%2Ct%3Apoi%7Ce%3Al.t.s%7Cv%3Aon%7Cc%3A%2335bd8500%2Ct%3Apoi%7Ce%3Al.i%7Cv%3Aoff%2Ct%3Alocal%7Ce%3Aall%7Cv%3Aoff%2Ct%3Aroad%7Ce%3Al.i%7Cv%3Aoff"
},
tileGrid: new TileGrid({
resolutions: bmercResolutions,
origin: [0, 0],
extent: applyTransform(extent, projzh.ll2bmerc),
tileSize: [256, 256]
})
})
});
let iconFeature = new Feature({
geometry: new Point(center),
name: "Null Island",
population: 4000,
rainfall: 500,
});
let iconStyle = new Style({
image: new Icon({
scale: 1,
// anchorXUnits: 'fraction',
// anchorYUnits: 'pixels',
src: require("../assets/police.png"),
}),
});
iconFeature.setStyle(iconStyle);
let vectorSource = new VectorSource({
features: [iconFeature],
});
let vectorLayer = new VectorLayer({
source: vectorSource,
});
let map = new Map({
target: 'map',
layers: [baidu, vectorLayer],
view: new View({
center: center,
zoom: 13,
projection: "EPSG:4326"
})
});
},
};
</script>
<style scoped>
#map {
width: 100%;
height: 100vh;
}
</style>
加载出来几乎是没有偏移的,和天地图的效果一样,大家可以利用天地图的api验证。