Mapserver その2

概要

Mapserverの地図をleafletで表示してみた。

写真

成果物

サンプルコード

var map = L.map('map').setView([38.0, 140.0], 11);
var mvr = L.tileLayer("", {
    attribution: 'mvr',
    maxZoom: 18,
});
mvr.getTileUrl = function(coord) {
    var zoom = coord.z;
    var s = Math.pow(2, coord.z);
    var llp = L.point((coord.x * 256 + 128) / s, (coord.y * 256 + 128) / s);
    var ll = fromPointToLatLng(llp, s);
    var lng = ll.lng;    
    var lat = ll.lat;
    return "http://yumeblog.dip.jp/yb2g0.php?zoom=" + zoom + "&long=" + lng + "&lat=" + lat;
};
mvr.addTo(map);
function fromPointToLatLng(point, max_zoom) {
    var size = (1 << max_zoom) * 256,
        lat = (2 * Math.atan(Math.exp((point.y - size / 2) / -(size / (2 * Math.PI)))) - (Math.PI / 2)) * (180 / Math.PI),
        lng = (point.x - size / 2) * (360 / size);
    return L.latLng(lat, lng);
}