project

返回的 Point 以地图容器左上角为原点，单位是 CSS 像素。

参数与返回

结果随视图实时变化：平移、缩放、旋转、改倾斜都会改变它。 任何缓存过的像素值都必须在地图变化后重新计算。

给 HTML 元素定位

var label = document.createElement('div');
label.className = 'site-label';
label.textContent = '站点 A';
map.getContainer().appendChild(label);

var lnglat = [116.391263, 39.907359];

function placeLabel() {
  var p = map.project(lnglat);
  label.style.transform =
    'translate(-50%, -100%) translate(' + p.x + 'px, ' + p.y + 'px)';
}

placeLabel();
map.on('move', placeLabel);

move 在拖动与动画期间持续触发，跟着它更新位置能与地图保持同步。 元素本身要设 position: absolute 并位于容器内。

判断是否在视野内

function isVisible(lnglat) {
  var p = map.project(lnglat);
  var w = map.getContainer().clientWidth;
  var h = map.getContainer().clientHeight;

  return p.x >= 0 && p.x <= w && p.y >= 0 && p.y <= h;
}

地图旋转后视野是倾斜的四边形，用上面的矩形判断会把角落误判为可见。 需要严格判断时改用 map.getBounds().contains(lnglat)。

与相关方法的关系

不要与瓦片坐标混用

project 给的是屏幕像素，不是瓦片坐标，也不是墨卡托米。 需要世界坐标时用 map.transform 内部的换算或 MercatorCoordinate， 后者常用于自定义 WebGL 图层。