Demonstrate how to browse Longdo Map images using OpenLayers 3 Tile Map Service Feature. Learn more Openlayer 3
<script>
var layername = 'icons';
var proj = 'epsg3857';
var map;
function init(){
map = new ol.Map({
target:'map',
layers: [
new ol.layer.Tile({
title: 'Longdo Map',
type: 'base',
visible: true,
source: new ol.source.XYZ({
url: "http://ms.longdo.com/map/msn-server/img.php?HD=1&zoom={z}&x={x}&y={y}&mode=" +
layername + "&key=[YOUR-KEY-API]&proj=" + proj,
tileSize: 256,
tilePixelRatio: 2
,tileLoadFunction: function(imageTile, src){
var img = new Image();
img.crossOrigin = "anonymous";
img.imageTile = imageTile;
img.old_src = src;
img.onload=function() {
if (img.width === 512 ) {
this.imageTile.getImage().src = this.old_src;
} else {
var canvas=document.getElementById("mycanvas");
canvas.style.display = "none";
var ctx=canvas.getContext("2d");
canvas.width=512;
canvas.height=512;
ctx.drawImage(this,0,0,256,256,0,0,512,512);
var myurl = canvas.toDataURL("image/jpeg");
this.imageTile.getImage().src = myurl;
}
}
img.src = src;
}
})
})
],
view: new ol.View({
center : ol.proj.transform([100.5, 13.77], 'EPSG:4326', 'EPSG:900913'),
zoom: 8,
maxResolution: 156543.0339,
minZoom: 1,
maxZoom: 20
})
});
}
</script>
HTML:
<body onload='init();>
<div id="map" class="map"></div>
<canvas id="mycanvas" crossorigin="anonymous" style="display:none;"></canvas>
</body>