自定义坐标系的地图,是能够根据坐标系的参数,加载地图的底图,坐标系不仅仅限制于wgs84(EPSG:4326)、webmercator(EPSG:3857),这种常见的坐标系。
目前,找到开源的使用比较好的是openlayers和maptalks,借助于proj4.js的开源库,实现自定义地图的坐标系,加载地图切片。
openlayers的示例网址:
https://openlayers.org/en/latest/examples/reprojection-by-code.html
自定义坐标系,将地图的坐标系设置成此坐标系
proj4.defs('EPSG:XXXX', 'proj4字符串');
ol.proj.proj4.register(proj4);
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: center,
projection: 'EPSG:XXXX'
})
});
maptalks的示例网站:
https://maptalks.org/examples/cn/tilelayer-projection/proj4js/#tilelayer-projection_proj4js
同样也是进行坐标系的定义
// EPSG:3857's proj definition
var proj3857 = '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs';
var proj4 = proj4('WGS84', proj3857);
// define a custom projection object
var projection = {
code : 'proj4-merc', // code of the projection
project : function (c) {
// from wgs84 to EPSG3857
var pc = proj4.forward(c.toArray());
return new maptalks.Coordinate(pc);
},
unproject : function (pc) {
// from EPSG3857 to wgs84
var c = proj4.inverse(pc.toArray());
return new maptalks.Coordinate(c);
}
};
相对来说,maptalks能转换俯仰角,进行三维形式的查看,这个和目前二维地图中百度、高德的效果相近。
mapbox-gl默认就支持webmercator的坐标系,开源上有改写了国内的cgcs2000的坐标系支持,目前还没能实现自定义坐标系的效果。
leaflet中也实现了一个simple坐标系的api,对于平面坐标系的效果,也能够直接实现。
https://leafletjs.com/