小白加载腾讯地图遇到了各种坑，网上搜了很多没有找到案列，只能自力更生。
通过在网上恶补一大堆资料，终于明白为什么不能像高德地图一样直接通过链接加载（直接加载腾讯地图会导致切片错乱）。
OpenLayers 3的瓦片坐标系的原点在左上角，向上为y轴正方向，向右为x轴正方向。
腾讯的瓦片坐标系的原点在左下角，向上为y轴正方向，向右为x轴正方向。
因为坐标系原点不一样所以加载的地图也不可能正确，具体可以参考大佬的文章瓦片地图原理 - 数据实验室 - SegmentFault 思否
下面是我整理的案列：
<script type="text/javascript">
// 坐标系
var proj_3857 =new ol.proj.get("EPSG:3857");
// 坐标系范围
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];
/**
* 网格标注
* @type {ol.tilegrid.TileGrid}
*/
var tileGrid =new ol.tilegrid.TileGrid({
resolutions: resolutions3857,
tileSize: [256, 256],
extent: proj_3857Extent,
origin:ol.extent.getBottomLeft(proj_3857Extent), // 把坐标原点设置成左下角
});
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>
