Skip to content
目录

坐标系和投影控制

坐标系和投影控制就是动态的设置地图的全局坐标系和投影.
什么是地图投影?
epsg编号查询网站
我们平时常用的有:

  • EPSG:3857
  • EPSG:4326
  • EPSG:4490

maptalks内部都做了支持的,当然maptalks内部也只是做了常见的坐标系投影的支持,如果你的坐标系不在这个列表内,你需要自定义地图的坐标转化逻辑,具体的参考 maptalks+proj4

TIP

地图如果不配置坐标投影,那么其将采用EPSG:3857,如果一个图层不配置坐标投影其将自动从地图上拿投影作为自己的投影,所以你的项目应该 根据自己的需要为地图和图层设置对应的投影信息

WARNING

我们做项目时地图的坐标投影一般是不会随便的切换的,即在地图创建的那一刻就定好了,后期很少的去切换地图的坐标投影的

  • 地图投影一般采用标准的全球投影,一般是EPSG:3857,EPSG:4326
  • 图层可以有自己的投影,可以和地图不一样,如果和地图不一样其在渲染时会被按照地图的投影去渲染
  • 不要随便的动态切换地图的投影,即setSpatialReference
  • 所以请仔细认真的根据业务需要为地图选择一个合适的投影

但是也架不住有的项目的特殊导致需要动态的切换坐标投影. 地图提供了setSpatialReference方法来动态设置地图的投影信息.

WARNING

注意业务不推荐这么干,除非你的业务真的需要

js
const map = new maptalks.Map("map", {
  center: [116.45266161, 39.86656647],
  zoom: 5,
  baseLayer: new maptalks.TileLayer("base", {
    urlTemplate:
      "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
    subdomains: ["a", "b", "c", "d"],

    spatialReference: {
      projection: "EPSG:3857",
    },
  }),
});

var params = {
  zoom: map.getZoom(),
  pitch: 0,
  bearing: 0,
  //debug
  setSpatialReference: function () {
    const sp = map.getSpatialReference();
    const is4326 = sp._projection.code.includes("4326");
    let projection = "EPSG:4326";
    if (is4326) {
      projection = "EPSG:3857";
    }
    map.setSpatialReference({ projection });
  },
};
var gui = new dat.GUI({ width: 250 });
gui.add(params, "setSpatialReference");

WARNING

注意maptalks体系内图层是有自己的坐标投影配置信息的

  • 图层的坐标系可以和地图不同
  • 当图层不设置投影坐标信息的时候会自动的去拿地图的投影信息作为自己的坐标投影配置
  • 所以代码层面最好为图层设置自己的坐标信息,尤其时当图层的投影信息和地图不同时,否则会导致一些未知错误,尤其是瓦片图层会导致瓦片加载错乱

不建议使用百度(baidu)坐标投影

百度的坐标系投影非常特殊,和目前的上市面上的所有厂商都不兼容,所以我们将放弃百度坐标系的投入,理由:

  • 栅格瓦片服务数据已经不更新,数据比较老
  • 矢量切片服务数据不对外开放,只能使用其自身的百度SDK
  • 其坐标系统和和目前的上市面上的所有厂商都不兼容,导致如果项目使用百度坐标系为主要坐标时,和其他的厂商服务对接时非常的困难和头疼,表现在和arcgis,supermap,geoserver等对接时都非常困难

关于地理坐标系的说明

maptalks是个地图引擎,这意味着其是以地理信息为主,不可以将平时自己的哪些平面的思维往里带,即当用户不指定坐标系时,不管是地图还是图层,图形等一律采用地理信息的默认坐标系

  • 地理坐标是有实际意义和指代的,描述的实际生活的位置
  • 而我们平时的二维坐标系是个纯数学的东西,是个相对的东西,比如有个坐标值是[100,30],没有人知道其指代的意义,但是你要是说地理坐标是[100,30]大家立马就知道其所代表的实际位置在哪里

地理坐标系是非线性的,如果你的数据都是平面的(线性的)你要认真的思考:是否要用地图引擎来搞自己的业务,比如原神地图就是线性的,这时你就要思考是否要用地图引擎来加载数据了(用地图引擎来做游戏的好像没见过)

identity 坐标系

maptalks 里也提供了identity坐标的支持,也就是纯数学里的相对坐标,是没有实际指代,只有相对坐标的坐标系.

也就是我数学里的笛卡尔坐标系

一般用来加载一些小规模的场景地图,游戏,CAD图纸等

WARNING

  • 数学里的笛卡尔和地理坐标系是两码事
  • 虽然maptalks 支持这种坐标系,但是其不是我们的核心,不是我们主要方向,只是随手提供下支持而已,毕竟maptalks是个 地图引擎,这就决定了其将聚焦地理坐标系和地理数据

下面演示加载原神地图

参考文章 让 web 再次伟大——用 canvaskit 实现超级丝滑的原神地图(已开源)

This document is generated by mdpress