Fix: simple map location

examples/demos/bugfix/index.ts

@@ -5,6 +5,7 @@ export { removeMutiLayer } from './remove-muti-layer';
 export { setColor } from './set-color';
 export { setData } from './set-data';
 export { setSize } from './set-size';
+export { simpleMap } from './simple-map';
 export { textOffsets } from './text-offsets';
 export { tileText } from './tile-text';
 export { tileUpdate } from './tile-update';

examples/demos/bugfix/simple-map.ts

@@ -0,0 +1,67 @@
+import { ImageLayer, MouseLocation, PointLayer } from '@antv/l7';
+import type { TestCase } from '../../types';
+import { CaseScene } from '../../utils';
+export const simpleMap: TestCase = async (options) => {
+  const scene = await CaseScene({
+    ...options,
+    mapConfig: {
+      center: [500, 500],
+      zoom: 3,
+      version: 'SIMPLE',
+      mapSize: 1000,
+      pitchEnabled: false,
+      rotateEnabled: false,
+    },
+  });
+  scene.setBgColor('rgb(94, 182, 140)');
+
+  const imagelayer = new ImageLayer({}).source(
+    'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*I0X5R4jAUQ4AAAAAAAAAAAAAARQnAQ',
+    {
+      parser: {
+        type: 'image',
+        extent: [360, 400, 640, 600],
+      },
+    },
+  );
+
+  fetch('https://gw.alipayobjects.com/os/bmw-prod/7dc0d454-fabc-4461-a5d5-d404dadb49a9.json')
+    .then((res) => res.json())
+    .then((data) => {
+      const textlayer = new PointLayer({ zIndex: 2 })
+        .source(data, {
+          parser: {
+            type: 'json',
+            x: 'x',
+            y: 'y',
+          },
+        })
+        .shape('t', 'text')
+        .size(12)
+        .active({
+          color: '#00f',
+          mix: 0.9,
+        })
+        .color('rgb(86, 156, 214)')
+        .style({
+          textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+          spacing: 2, // 字符间距
+          fontWeight: '800',
+          padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+          stroke: '#ffffff', // 描边颜色
+          strokeWidth: 2, // 描边宽度
+          textAllowOverlap: true,
+        });
+      scene.addLayer(textlayer);
+    });
+
+  scene.addLayer(imagelayer);
+  const mouseLocation = new MouseLocation({
+    position: 'bottomright',
+  });
+  scene.addControl(mouseLocation);
+  scene.on('click', (e) => {
+    console.log(e.lngLat);
+  });
+  return scene;
+};

package.json

@@ -81,6 +81,7 @@
     "@changesets/cli": "^2.27.1",
     "@commitlint/cli": "^19.2.1",
     "@commitlint/config-conventional": "^19.1.0",
+    "@eslint/js": "^9.30.1",
     "@types/jest": "^29.5.1",
     "@types/offscreencanvas": "^2019.7.0",
     "@types/pixelmatch": "^5.2.5",

packages/map/src/map/events.ts

@@ -6,6 +6,8 @@ import { DOM } from './util/dom';
 import type { LngLat } from './geo/lng_lat';
 import type { Map } from './map';
 
+import { SimpleMapCoord } from './util/simpleMapCoord';
+
 /**
  * `MapEventType` - a mapping between the event name and the event value.
  * These events are used with the {@link Map#on} method.
@@ -308,6 +310,11 @@ export class MapMouseEvent extends Event implements MapLibreEvent<MouseEvent> {
     this.originalEvent = originalEvent;
     this._defaultPrevented = false;
     this.target = map;
+    if (map.version === 'SIMPLE') {
+      const simpleMapCoord = new SimpleMapCoord(map.mapSize);
+      const [lng, lat] = simpleMapCoord.project([lngLat.lng, lngLat.lat]);
+      this.lngLat = { lng, lat } as LngLat;
+    }
   }
 }
 

packages/map/src/map/map.ts

@@ -34,6 +34,16 @@ import type { TaskID } from './util/task_queue';
  * The {@link Map} options object.
  */
 export type MapOptions = {
+  /**
+   * The MapType of the map.
+   * @defaultValue DEFAUlTMAP
+   */
+  version?: string;
+  /**
+   * The map size for SIMPLE map.
+   * @defaultValue 10000
+   */
+  mapSize?: number;
   /**
    * If `false`, no mouse, touch, or keyboard listeners will be attached to the map, so it will not respond to interaction.
    * @defaultValue true
@@ -266,6 +276,9 @@ export class Map extends Camera {
   _removed: boolean;
   _clickTolerance: number;
 
+  version: string;
+  mapSize: number;
+
   /**
    * The map's {@link ScrollZoomHandler}, which implements zooming in and out with a scroll wheel or trackpad.
    * Find more details and examples using `scrollZoom` in the {@link ScrollZoomHandler} section.
@@ -362,6 +375,8 @@ export class Map extends Camera {
     this._bearingSnap = resolvedOptions.bearingSnap!;
     this._fadeDuration = resolvedOptions.fadeDuration!;
     this._clickTolerance = resolvedOptions.clickTolerance!;
+    this.version = options.version;
+    this.mapSize = options.mapSize;
 
     if (typeof resolvedOptions.container === 'string') {
       this._container = document.getElementById(resolvedOptions.container)!;

packages/map/src/map/util/simpleMapCoord.ts

@@ -0,0 +1,70 @@
+export interface ISimpleMapCoord {
+  setSize(size: number): void;
+  getSize(): [number, number];
+  project(lnglat: [number, number]): [number, number];
+  unproject(xy: [number, number]): [number, number];
+}
+export class SimpleMapCoord implements ISimpleMapCoord {
+  private size: number = 10000;
+  constructor(size?: number) {
+    this.size = size ? size : 10000;
+  }
+
+  public setSize(size: number) {
+    this.size = size;
+  }
+
+  public getSize(): [number, number] {
+    return [this.size, this.size];
+  }
+
+  /**
+   * coord
+   * ^ y (y > 0)
+   * |
+   * |
+   * |
+   * |(x = 0, y = 0)
+   * ---------------> x (x > 0)
+   */
+
+  /***
+   * lng: [-180, 180] 360
+   * lat: [-85.05112877980659, 85.05112877980659] 170.10225755961318
+   */
+
+  public mercatorXfromLng(lng: number): number {
+    // (0 - 1) * this.size
+    return ((180 + lng) / 360) * this.size;
+  }
+
+  public mercatorYfromLat(lat: number): number {
+    // (0 - 1) * this.size
+    return (
+      (1 -
+        (180 - (180 / Math.PI) * Math.log(Math.tan(Math.PI / 4 + (lat * Math.PI) / 360))) / 360) *
+      this.size
+    );
+  }
+
+  public lngFromMercatorX(x: number): number {
+    return (x / this.size) * 360 - 180;
+  }
+
+  public latFromMercatorY(y: number): number {
+    const y2 = 180 - (1 - y / this.size) * 360;
+    return (360 / Math.PI) * Math.atan(Math.exp((y2 * Math.PI) / 180)) - 90;
+  }
+
+  public project(lnglat: [number, number]): [number, number] {
+    const x = this.mercatorXfromLng(lnglat[0]);
+    const y = this.mercatorYfromLat(lnglat[1]);
+    return [x, y];
+  }
+
+  public unproject(xy: [number, number]): [number, number] {
+    const lng = this.lngFromMercatorX(xy[0]);
+    const lat = this.latFromMercatorY(xy[1]);
+    return [lng, lat];
+  }
+}

packages/maps/src/map/map.ts

@@ -92,6 +92,8 @@ export default class DefaultMapService extends BaseMapService<Map> {
       this.map = new Map({
         container: this.$mapContainer,
         bearing: rotation,
+        version: version,
+        mapSize: mapSize,
         ...rest,
       });
     }

site/docs/api/experiment/simple_coordinates.zh.md

@@ -13,7 +13,7 @@ order: 1
 
 ### Map
 
-为了使用简单坐标系，我们需要是使用 L7 自定义的 Map 地图类型，同时制定 map 的 version 属性
+为了使用简单坐标系，我们需要是使用 L7 自定义的 Map 地图类型，同时指定 map 的 version 属性
 
 ```javascript
 import { Scene, ImageLayer, PointLayer } from '@antv/l7';