@hzab/map-combine 0.1.3 → 0.2.1

package/CHANGELOG.md

@@ -1,6 +1,14 @@
+# @hzab/map-combine0.2.1
+
+feat: openLayer对除EPSG:3857和EPSG:4326的瓦片坐标系取消偏移
+
+# @hzab/map-combine0.2.0
+
+feat: flyToViewer 所有点位移动至视口，调整位置及层级
+
 # @hzab/map-combine0.1.3
 
-feat: 添加地图preRender事件
+feat: 添加地图 preRender 事件
 
 # @hzab/map-combine@0.1.0
 
@@ -8,4 +16,5 @@ feat: BIM 模型加载；旋转、平移、缩放
 feat: 地图瓦片转 84 坐标系
 
 # @hzab/map-combine@0.0.1
-组件初始化
+
+组件初始化

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/map-combine",
-  "version": "0.1.3",
+  "version": "0.2.1",
   "description": "地图组件",
   "main": "src",
   "scripts": {
@@ -23,6 +23,7 @@
   "devDependencies": {
     "@hzab/permissions": "0.1.1",
     "@hzab/webpack-config": "^0.2.1",
+    "@turf/turf": "6.5",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "antd": "^4.14.0",
@@ -42,6 +43,7 @@
     "lib": "lib"
   },
   "peerDependencies": {
+    "@turf/turf": "6.5",
     "coordtransform": "^2.1.2",
     "lodash": ">=4.17.21",
     "ol": "^7.4.0",

package/src/basic/MapCombine.ts

@@ -8,11 +8,13 @@ import { ReactPoint, ReactPointOption, drawReactPoint } from "./ReactPoint";
 import { Tile3D, Tile3DOption } from "./Tile3D";
 import { type BasicBusiness, type BasicBusinessOption } from "./BasicBusiness";
 
+import { getBounds } from "../utils/points-viewer";
+
 export abstract class MapCombine {
   /* 用于挂载html元素的根节点 */
   readonly htmllayer = document.createElement("div");
-  readonly elements = new Map<string, MapElement>()
-  readonly event = new MapEvent()
+  readonly elements = new Map<string, MapElement>();
+  readonly event = new MapEvent();
   readonly menu: ContextMenu;
   abstract get cursor(): string;
   abstract set cursor(val: string);
@@ -20,18 +22,18 @@ export abstract class MapCombine {
   abstract get moveable(): boolean;
   abstract set moveable(val: boolean);
 
-  abstract get center(): number[]
-  abstract set center(val)
+  abstract get center(): number[];
+  abstract set center(val);
 
-  abstract get zoom(): number
-  abstract set zoom(val)
+  abstract get zoom(): number;
+  abstract set zoom(val);
 
   bussinesses = new Map<string, BasicBusiness<BasicBusinessOption>>();
 
   /** 地图是否存在 */
   isAlive = true;
   constructor() {
-    const { htmllayer } = this
+    const { htmllayer } = this;
     htmllayer.style.zIndex = "1000";
     htmllayer.style.position = "absolute";
     htmllayer.style.width = "0";
@@ -46,32 +48,39 @@ export abstract class MapCombine {
   }
 
   createReactPoint<K>(option?: Partial<ReactPointOption<K>>): ReactPoint<K> {
-    const e = new ReactPoint(this, option)
-    drawReactPoint(this, e)
-    return e
+    const e = new ReactPoint(this, option);
+    drawReactPoint(this, e);
+    return e;
   }
 
-
   /**
    * 设置地图视图
    * @param option 视图参数
    * @param time 设置时间会动画形式调整视图
    */
-  abstract createPoint<K>(option?: Partial<PointOption<K>>): Point<K>
+  abstract createPoint<K>(option?: Partial<PointOption<K>>): Point<K>;
+
+  abstract createPolyline<K>(option?: Partial<PolylineOption<K>>): Polyline<K>;
 
-  abstract createPolyline<K>(option?: Partial<PolylineOption<K>>): Polyline<K>
+  abstract createPolygon<K>(option?: Partial<PolygonOption<K>>): Polygon<K>;
 
-  abstract createPolygon<K>(option?: Partial<PolygonOption<K>>): Polygon<K>
+  abstract createTile3D(option?: Partial<Tile3DOption>): Tile3D;
 
-  abstract createTile3D(option?: Partial<Tile3DOption>): Tile3D
+  abstract canvasTgeography(p: number[]): number[];
 
-  abstract canvasTgeography(p: number[]): number[]
+  abstract geographyTcanvas(p: number[]): number[];
+
+  /**
+   * 所有点位移动至视口，调整位置及层级
+   * @param points
+   */
+  abstract flyToViewer(points: number[][], opt?: Object): void;
 
-  abstract geographyTcanvas(p: number[]): number[]
+  getBounds = getBounds;
 
   destroy() {
     this.isAlive = false;
-    this.htmllayer.remove()
-    this.event.trigger('destroy')
+    this.htmllayer.remove();
+    this.event.trigger("destroy");
   }
-}
+}

package/src/cesium/CesiumMap.ts

@@ -247,6 +247,25 @@ export class CesiumMap extends MapCombine {
     }
     return [res.x, res.y];
   }
+
+  /**
+   * 所有点位移动至视口，调整位置及层级
+   * @param points
+   * @param opt
+   * @param {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
+   */
+  flyToViewer(points, opt = { avoid: [0, 0, 0, 0] }) {
+    // 创建矩形
+    const rectangle = Cesium.Rectangle.fromDegrees(
+      ...this.getBounds(points, { canvas: this.viewer.scene.canvas, ...opt }),
+    );
+
+    // 设置相机视角
+    this.viewer.camera.setView({
+      destination: rectangle,
+      ...opt,
+    });
+  }
 }
 
 function createColorCanvas(color) {

package/src/mine/MineMap.ts

@@ -1,4 +1,3 @@
-
 import { MapCombine } from "../basic/MapCombine";
 import { PointOption, Point } from "../basic/Point";
 import { PolygonOption, Polygon } from "../basic/Polygon";
@@ -11,15 +10,14 @@ import { drawPolyline } from "./MinePolyline";
 import { drawTile3D } from "./MineTile3D";
 
 export class MineMap extends MapCombine {
-
   viewer: any;
   container: HTMLDivElement;
 
   get cursor(): string {
-    return this.viewer.getCursor()
+    return this.viewer.getCursor();
   }
   set cursor(val: string) {
-    this.viewer.setCursor(val)
+    this.viewer.setCursor(val);
   }
 
   get moveable(): boolean {
@@ -29,31 +27,29 @@ export class MineMap extends MapCombine {
     val ? this.viewer.dragPan.enable() : this.viewer.dragPan.disable();
   }
   get center(): number[] {
-    const p = this.viewer.getCenter()
-    return [p.lng, p.lat]
+    const p = this.viewer.getCenter();
+    return [p.lng, p.lat];
   }
   set center(val: number[]) {
-    this.viewer.setCenter(val)
+    this.viewer.setCenter(val);
   }
 
   get zoom(): number {
-    return this.viewer.getZoom()
+    return this.viewer.getZoom();
   }
   set zoom(val: number) {
-    this.viewer.setZoom(val)
+    this.viewer.setZoom(val);
   }
 
   constructor(viewer: any) {
-    super()
-    this.viewer = viewer
-    this.container = viewer.getContainer()
-    this.container.children.item(1).appendChild(this.htmllayer)
-    this.cursor = 'default'
-    bindEvent(this)
+    super();
+    this.viewer = viewer;
+    this.container = viewer.getContainer();
+    this.container.children.item(1).appendChild(this.htmllayer);
+    this.cursor = "default";
+    bindEvent(this);
   }
 
-
-
   canvasTgeography(p: number[]): number[] {
     const res = this.viewer.getTDSpaceCoord({ point: p, disableLayer: true });
     return [res.lngLat.lng, res.lngLat.lat, 0];
@@ -64,27 +60,41 @@ export class MineMap extends MapCombine {
   }
 
   createPoint<K>(option?: Partial<PointOption<K>>): Point<K> {
-    const e = new Point(this, option)
-    drawPoint(this, e)
-    return e
+    const e = new Point(this, option);
+    drawPoint(this, e);
+    return e;
   }
 
   createPolyline<K>(option?: Partial<PolylineOption<K>>): Polyline<K> {
-    const e = new Polyline(this, option)
-    drawPolyline(this, e)
-    return e
+    const e = new Polyline(this, option);
+    drawPolyline(this, e);
+    return e;
   }
   createPolygon<K>(option?: Partial<PolygonOption<K>>): Polygon<K> {
-    const e = new Polygon(this, option)
-    drawPolygon(this, e)
-    return e
+    const e = new Polygon(this, option);
+    drawPolygon(this, e);
+    return e;
   }
 
-  createTile3D(option?: Partial<Tile3DOption>): Tile3D {
-    const e = new Tile3D(this, option)
-    drawTile3D(this, e)
-    return e
+  /**
+   * 所有点位移动至视口，调整位置及层级
+   * @param points
+   * @param opt
+   * @param {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
+   */
+  flyToViewer(points, opt = { avoid: [0, 0, 0, 0] }) {
+    const rectangle = this.getBounds(points, { canvas: this.viewer.getCanvas(), ...opt });
+
+    // 设置地图视图，使用调整后的边界范围
+    this.viewer.fitBounds([
+      [rectangle[0], rectangle[1]],
+      [rectangle[2], rectangle[3]],
+    ]);
   }
 
+  createTile3D(option?: Partial<Tile3DOption>): Tile3D {
+    const e = new Tile3D(this, option);
+    drawTile3D(this, e);
+    return e;
+  }
 }
-

package/src/openlayer/OpenlayerMap.ts

@@ -1,14 +1,21 @@
-import { MapCombine } from "../basic/MapCombine";
-import { PointOption, Point } from "../basic/Point";
+import * as ol from "ol/index.js";
 import Map from "ol/Map.js";
 import View from "ol/View";
 import XYZ from "ol/source/XYZ";
 import Tile from "ol/layer/Tile";
 import DragPan from "ol/interaction/DragPan";
-import { Projection } from "../utils/Projection";
 import VectorSource from "ol/source/Vector";
 import VectorLayer from "ol/layer/Vector";
 import { fromLonLat } from "ol/proj";
+import * as olGeom from "ol/geom";
+import * as olSource from "ol/source";
+import * as olStyle from "ol/style";
+import * as olLayer from "ol/layer";
+import * as olExtent from "ol/extent";
+
+import { MapCombine } from "../basic/MapCombine";
+import { PointOption, Point } from "../basic/Point";
+import { Projection } from "../utils/Projection";
 import { bindEvent } from "./OpenlayerEvent";
 import { PolylineOption, Polyline } from "../basic/Polyline";
 import DoubleClickZoom from "ol/interaction/DoubleClickZoom";
@@ -39,6 +46,7 @@ export class OpenlayerMap extends MapCombine {
   option: IOpenlayerOption;
   offset: number[];
   fov = 0.9272952180016121;
+  isFromLonLat = true;
   get cursor(): string {
     return this.container.style.cursor;
   }
@@ -113,8 +121,9 @@ export class OpenlayerMap extends MapCombine {
     this.cursor = "default";
 
     const { center } = this;
-    this.offset = fromLonLat(center);
-
+    const proj = this.viewer.getView().getProjection().getCode();
+    this.isFromLonLat = (proj === "EPSG:3857" || proj === "EPSG:4326");
+    this.offset = this.getFromLonLat(center);
     this.vectors = new VectorSource();
     this.viewer.addLayer(
       new VectorLayer({
@@ -135,6 +144,11 @@ export class OpenlayerMap extends MapCombine {
     bindEvent(this);
   }
 
+
+  getFromLonLat(lonLat) {
+    return this.isFromLonLat ? fromLonLat(lonLat) : lonLat;
+  }
+
   createPoint<K>(option?: Partial<PointOption<K>>): Point<K> {
     const e = new Point(this, option);
     drawPoint(this, e);
@@ -163,12 +177,50 @@ export class OpenlayerMap extends MapCombine {
   //   // this.meterPerPixel = height / this.container.offsetHeight;
   // }
 
+  /**
+   * 所有点位移动至视口，调整位置及层级
+   * @param points
+   * @param opt
+   * @param {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
+   */
+  flyToViewer(points, opt = { avoid: [0, 0, 0, 0] }) {
+    const { avoid } = opt || {};
+    // 创建 Feature 数组
+    const features = points.map((point) => {
+      const [lon, lat] = point;
+      const coord = this.getFromLonLat([lon, lat]);
+      return new ol.Feature({
+        geometry: new olGeom.Point(coord),
+      });
+    });
+
+    // 创建 VectorSource
+    const source = new olSource.Vector({
+      features: features,
+    });
+
+    // 计算边界范围
+    const extent = source.getExtent();
+
+    // 调整边界范围
+    olExtent.buffer(extent, this.viewer.getView().getResolution(), extent);
+
+    // 设置地图视图
+    this.viewer.getView().fit(extent, {
+      // avoid  {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
+      // 上 右 下 左
+      padding: [avoid[0], avoid[3], avoid[1], avoid[2]],
+      duration: 1000,
+      ...opt,
+    });
+  }
+
   geographyTspace(p: number[]): number[] {
     const { offset } = this;
     return [Projection.lonToX(p[0]) - offset[0], Projection.latToY(p[1]) - offset[1], p[2] ?? 0];
   }
   geographyTcanvas(p: number[]): number[] {
-    const pixel = this.viewer.getPixelFromCoordinate(fromLonLat(p));
+    const pixel = this.viewer.getPixelFromCoordinate(this.getFromLonLat(p));
     if (pixel) {
       return [pixel[0], pixel[1]];
     } else {

package/src/openlayer/OpenlayerPoint.ts

@@ -9,7 +9,7 @@ import VectorLayer from "ol/layer/Vector";
 const RD = 0.017453292519943295
 
 export function drawPoint(map: OpenlayerMap, point: Point<unknown>) {
-  const { viewer, event } = map
+  const { viewer, event, getFromLonLat } = map
   let status = 0
 
   const source = new VectorSource();
@@ -67,7 +67,7 @@ export function drawPoint(map: OpenlayerMap, point: Point<unknown>) {
   feature.set('event', _event, true)
   if (point.coordinates) {
     status = 2
-    geometry.setCoordinates(fromLonLat(point.coordinates))
+    geometry.setCoordinates(getFromLonLat(point.coordinates))
     layer.setZIndex(point.coordinates[2] ?? 1)
     point.event.trigger('data-loaded')
     source.addFeature(feature)
@@ -87,7 +87,7 @@ export function drawPoint(map: OpenlayerMap, point: Point<unknown>) {
           break;
         case 'coordinates':
           if (point.coordinates) {
-            geometry.setCoordinates(fromLonLat(point.coordinates))
+            geometry.setCoordinates(getFromLonLat(point.coordinates))
             layer.setZIndex(point.coordinates[2])
             switch (status) {
               case 0:
@@ -138,16 +138,16 @@ export function drawPoint(map: OpenlayerMap, point: Point<unknown>) {
   }
 
   const onMouseMove = () => {
-    const coordinates = [event.geography[0], event.geography[1], point.height]
+    const coordinates = [event.geography[0], event.geography[1], point.height];
     switch (status) {
       case 0:
         status = 1
-        geometry.setCoordinates(fromLonLat(coordinates))
+        geometry.setCoordinates(getFromLonLat(coordinates))
         source.addFeature(feature)
         break;
       case 1:
       case 3:
-        geometry.setCoordinates(fromLonLat(coordinates))
+        geometry.setCoordinates(getFromLonLat(coordinates))
         break
     }
   }

package/src/openlayer/OpenlayerPolygon.ts

@@ -34,7 +34,7 @@ const styleVirtual = new Style({
 
 
 export function drawPolygon(map: OpenlayerMap, polygon: Polygon<unknown>) {
-  const { event, viewer, vectors } = map
+  const { event, viewer, vectors, getFromLonLat } = map
 
   const source = new VectorSource();
 
@@ -93,7 +93,7 @@ export function drawPolygon(map: OpenlayerMap, polygon: Polygon<unknown>) {
   feature.set('event', _event, true)
   if (polygon.coordinates) {
     status = 2
-    geometry.setCoordinates([polygon.coordinates.map(e => fromLonLat(e))])
+    geometry.setCoordinates([polygon.coordinates.map(e => getFromLonLat(e))])
     layer.setZIndex(polygon.coordinates[0][2] ?? 1)
     source.addFeature(feature)
   }
@@ -116,7 +116,7 @@ export function drawPolygon(map: OpenlayerMap, polygon: Polygon<unknown>) {
           break;
         case 'coordinates':
           if (polygon.coordinates) {
-            geometry.setCoordinates([polygon.coordinates.map(e => fromLonLat(e))])
+            geometry.setCoordinates([polygon.coordinates.map(e => getFromLonLat(e))])
             layer.setZIndex(polygon.coordinates[0][2] ?? 1)
             switch (status) {
               case 0:
@@ -158,11 +158,11 @@ export function drawPolygon(map: OpenlayerMap, polygon: Polygon<unknown>) {
     switch (status) {
       case 1:
         cache.pop()
-        cache.push(fromLonLat(event.geography))
+        cache.push(getFromLonLat(event.geography))
         geometry.setCoordinates([cache])
         break
       case 4:
-        activeNode.update(fromLonLat(event.geography))
+        activeNode.update(getFromLonLat(event.geography))
         geometry.setCoordinates([editor.getCoordinates()])
         break;
     }
@@ -172,8 +172,7 @@ export function drawPolygon(map: OpenlayerMap, polygon: Polygon<unknown>) {
     switch (status) {
       case 0:
         status = 1
-
-        cache = [fromLonLat(event.geography)]
+        cache = [getFromLonLat(event.geography)]
         cache.push(cache[0])
         geometry.setCoordinates([cache])
         source.addFeature(feature)

package/src/openlayer/OpenlayerPolyline.ts

@@ -30,7 +30,7 @@ const styleVirtual = new Style({
 });
 
 export function drawPolyline(map: OpenlayerMap, polyline: Polyline<unknown>) {
-  const { event, viewer } = map
+  const { event, viewer, getFromLonLat } = map
 
   const source = new VectorSource();
 
@@ -86,7 +86,7 @@ export function drawPolyline(map: OpenlayerMap, polyline: Polyline<unknown>) {
   feature.set('event', _event, true)
   if (polyline.coordinates) {
     status = 2
-    geometry.setCoordinates(polyline.coordinates.map(e => fromLonLat(e)))
+    geometry.setCoordinates(polyline.coordinates.map(e => getFromLonLat(e)))
     layer.setZIndex(polyline.coordinates[0][2] ?? 1)
     source.addFeature(feature)
   }
@@ -106,7 +106,7 @@ export function drawPolyline(map: OpenlayerMap, polyline: Polyline<unknown>) {
           break;
         case 'coordinates':
           if (polyline.coordinates) {
-            geometry.setCoordinates(polyline.coordinates.map(e => fromLonLat(e)))
+            geometry.setCoordinates(polyline.coordinates.map(e => getFromLonLat(e)))
             layer.setZIndex(polyline.coordinates[0][2] ?? 1)
             switch (status) {
               case 0:
@@ -147,11 +147,11 @@ export function drawPolyline(map: OpenlayerMap, polyline: Polyline<unknown>) {
     switch (status) {
       case 1:
         cache.pop()
-        cache.push(fromLonLat(event.geography))
+        cache.push(getFromLonLat(event.geography))
         geometry.setCoordinates(cache)
         break
       case 4:
-        activeNode.update(fromLonLat(event.geography))
+        activeNode.update(getFromLonLat(event.geography))
         geometry.setCoordinates(editor.getCoordinates())
         break;
     }
@@ -161,8 +161,8 @@ export function drawPolyline(map: OpenlayerMap, polyline: Polyline<unknown>) {
     switch (status) {
       case 0:
         status = 1
-        _event.silent = true
-        cache = [fromLonLat(event.geography)]
+        _event.silent = true;
+        cache = [getFromLonLat(event.geography)]
         cache.push(cache[0])
         geometry.setCoordinates(cache)
         source.addFeature(feature)

package/src/utils/points-viewer.ts

@@ -0,0 +1,47 @@
+/**
+ * 所有点位移动至视口，活动边界经纬度
+ * @param points
+ * @param opt
+ * @param {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
+ */
+export const getBounds = function (points, opt) {
+  const {
+    /**
+     * avoid (Array<number> = [0,0,0,0]) 距离边框的内边距，顺序：上、下、左、右
+     */
+    avoid = [0, 0, 0, 0],
+    canvas,
+  } = opt;
+
+  // 计算边界框
+  let minLon = Infinity;
+  let maxLon = -Infinity;
+  let minLat = Infinity;
+  let maxLat = -Infinity;
+
+  points.forEach((point) => {
+    const [longitude, latitude] = point;
+    minLon = Math.min(minLon, longitude);
+    maxLon = Math.max(maxLon, longitude);
+    minLat = Math.min(minLat, latitude);
+    maxLat = Math.max(maxLat, latitude);
+  });
+
+  // 获取画布尺
+  const canvasWidth = canvas.clientWidth;
+  const canvasHeight = canvas.clientHeight;
+
+  // 估算像素到地理范围的转换比例
+  const lonRange = maxLon - minLon;
+  const latRange = maxLat - minLat;
+  const lonPixelRatio = lonRange / canvasWidth;
+  const latPixelRatio = latRange / canvasHeight;
+
+  // 根据像素距离调整边界框
+  minLon -= avoid[2] * lonPixelRatio;
+  maxLon += avoid[3] * lonPixelRatio;
+  minLat -= avoid[1] * latPixelRatio;
+  maxLat += avoid[0] * latPixelRatio;
+
+  return [minLon, minLat, maxLon, maxLat];
+};