小白加載騰訊地圖遇到了各種坑因惭，網(wǎng)上搜了很多沒有找到案列蒿褂，只能自力更生。
通過在網(wǎng)上惡補一大堆資料蒋畜，終于明白為什么不能像高德地圖一樣直接通過鏈接加載（直接加載騰訊地圖會導(dǎo)致切片錯亂）。
OpenLayers 3的瓦片坐標(biāo)系的原點在左上角撞叽，向上為y軸正方向姻成，向右為x軸正方向插龄。
騰訊的瓦片坐標(biāo)系的原點在左下角，向上為y軸正方向科展，向右為x軸正方向均牢。
因為坐標(biāo)系原點不一樣所以加載的地圖也不可能正確，具體可以參考大佬的文章瓦片地圖原理 - 數(shù)據(jù)實驗室 - SegmentFault 思否
下面是我整理的案列：
<script type="text/javascript">
? // 坐標(biāo)系
? var proj_3857 =new ol.proj.get("EPSG:3857");
? // 坐標(biāo)系范圍
? var proj_3857Extent = proj_3857.getExtent();
? // 每個層級的分辨率
? var resolutions3857 = [156543.03392804097, 78271.51696402048, 39135.75848201024,
? ? 19567.87924100512, 9783.93962050256, 4891.96981025128, 2445.98490512564, 1222.99245256282,
? ? 611.49622628141, 305.748113140705, 152.8740565703525, 76.43702828517625, 38.21851414258813,
? ? 19.109257071294063, 9.554628535647032, 4.777314267823516, 2.388657133911758, 1.194328566955879,
? ? 0.5971642834779395];
? /**
? * 網(wǎng)格標(biāo)注
? * @type {ol.tilegrid.TileGrid}
*/
? var tileGrid =new ol.tilegrid.TileGrid({
resolutions: resolutions3857,
? ? tileSize: [256, 256],
? ? extent: proj_3857Extent,
? ? origin:ol.extent.getBottomLeft(proj_3857Extent), // 把坐標(biāo)原點設(shè)置成左下角
? });
? var tilesource =new ol.source.TileImage({
tileUrlFunction:function (xyz, obj1, obj2) {
if (!xyz) {
return "";
? ? ? }
var z = xyz[0];
? ? ? var x = xyz[1];
? ? ? var y = xyz[2];
? ? ? // 騰訊平面圖
? ? ? return "http://rt1.map.gtimg.com/realtimerender?z=" + z +"&x=" + x +"&y=" + y +"&type=vector&style=0&v=1.1.2"
? ? ? // 騰訊地形圖
//? ? ? return "https://p3.map.gtimg.com/sateTiles/" + z + "/" + Math.floor(x / 16.0) + "/" + Math.floor(y / 16.0) + "/" + x + "_" + y + ".jpg?version=230"
? ? },
? ? tileGrid: tileGrid,
? ? projection: proj_3857,
? });
? var AMap =new ol.layer.Tile({
source: tilesource,
? ? projection: proj_3857,
? });
? var map =new ol.Map({
layers: [
AMap,
? ? ? // 加載本地瓦片
? ? ? new ol.layer.Tile({
source:new ol.source.TileDebug({
projection: proj_3857,
? ? ? ? ? tileGrid: tileGrid
})
})
],
? ? target:'map',
? ? view:new ol.View({
center:ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
? ? ? resulotions: resolutions3857,
? ? ? zoom:4,
? ? ? minZoom:4,
? ? ? maxZoom:18
? ? }),
? });
</script>
