@hzab/map-combine 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,2 @@
+# @hzab/map-combine@0.0.1
+组件初始化

package/README.md

@@ -0,0 +1,67 @@
+# @hzab/map-combine
+
+组件模板
+
+- node@16.16.0
+
+# 组件
+
+## 示例
+
+```jsx
+import Demo from "@hzab/map-combine";
+
+<Demo />;
+```
+
+## API
+
+### InfoPanel Attributes
+
+| 参数   | 类型   | 必填 | 默认值 | 说明              |
+| ------ | ------ | ---- | ------ | ----------------- |
+| schema | Object | 是   | -      | 数据信息的 schema |
+
+# 组件开发流程
+
+- 在 config/webpack.config.js 中按需修改 library 配置的文件名
+- 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
+- 在 tsconfig.json 中按需修改 paths 配置的包名，解决 ts 报错问题
+- npm run dev
+
+## 文件目录
+
+- example 本地开发测试代码
+- src 组件源码
+- lib 组件打包编译后的代码
+
+## 命令
+
+- Mac 执行该命令，设置 pre-commit 为可执行文件
+
+  - npm run mac-chmod
+  - chmod +x .husky && chmod +x .husky/pre-commit
+
+- 生成文档：npm run docs
+- 本地运行：npm run dev
+- 打包编译：npm run build
+
+## 发布
+
+- 注意：示例代码生效，但发布之后未生效。确认是否执行了编译！！！
+
+- 编译组件：npm run build
+- 命令：npm publish --access public
+- 发布目录：
+  - lib
+  - src
+
+## 配置
+
+### 配置文件
+
+- 本地配置文件：config/config.js
+
+### webpack 配置文件
+
+- config/webpack.config.js

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@hzab/map-combine",
+  "version": "0.0.1",
+  "description": "地图组件",
+  "main": "src",
+  "scripts": {
+    "dev": "npm run prepare && webpack serve -c ./config/webpack.config.js --env local",
+    "build": "webpack -c ./config/webpack.config.js --env production",
+    "publish-patch": "npm version patch && npm publish --access public",
+    "publish-minor": "npm version minor && npm publish --access public",
+    "publish-major": "npm version major && npm publish --access public",
+    "prepare": "husky install",
+    "mac-chmod": "chmod +x .husky && chmod +x .husky/pre-commit",
+    "docs": "typedoc"
+  },
+  "files": [
+    "src",
+    "CHANGELOG.md"
+  ],
+  "keywords": [],
+  "author": "CaiYansong",
+  "license": "ISC",
+  "devDependencies": {
+    "@hzab/permissions": "0.1.1",
+    "@hzab/webpack-config": "^0.2.1",
+    "@types/react": "^17.0.62",
+    "@types/react-dom": "^17.0.20",
+    "antd": "^4.14.0",
+    "axios": "^1.4.0",
+    "eslint": "^8.30.0",
+    "less": "^4.1.3",
+    "mobx": "^6.7.0",
+    "mobx-react": "^7.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.14.1",
+    "typedoc": "^0.24.8",
+    "typescript": "^4.9.4"
+  },
+  "directories": {
+    "lib": "lib"
+  },
+  "peerDependencies": {
+    "@dvgis/cesium-map": "^3.1.0",
+    "coordtransform": "^2.1.2",
+    "lodash": ">=4.17.21",
+    "ol": "^7.4.0",
+    "react-dom": "^17.0.2",
+    "zrender": "^5.4.4"
+  },
+  "lint-staged": {
+    "**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
+      "prettier --write"
+    ]
+  }
+}

package/src/basic/ContextMenu.tsx

@@ -0,0 +1,49 @@
+import ReactDOM from "react-dom";
+import { MapCombine } from "./MapCombine";
+
+export interface ContextMenuItem {
+  label: string;
+  onclick: () => void;
+}
+
+export class ContextMenu {
+  map: MapCombine;
+  root: HTMLDivElement;
+  element = (items: ContextMenuItem[]) => {
+    return (
+      <div className="combine-context-menu">
+        {items.map((e) => (
+          <div className="combine-context-item" onClick={e.onclick} key={e.label}>
+            {e.label}
+          </div>
+        ))}
+      </div>
+    );
+  };
+  hide() {
+    ReactDOM.unmountComponentAtNode(this.root);
+  }
+  constructor(map: MapCombine) {
+    this.map = map;
+    const root = document.createElement("div");
+    root.style.zIndex = "2000";
+    root.style.position = "absolute";
+    root.addEventListener("pointerleave", () => {
+      this.hide();
+    });
+    root.addEventListener("click", () => {
+      setTimeout(() => {
+        this.hide();
+      });
+    });
+    map.htmllayer.appendChild(root);
+    this.root = root;
+  }
+  show(items: ContextMenuItem[]) {
+    const { root, map } = this;
+    ReactDOM.render(this.element(items), root);
+    root.style.left = map.event.canvas[0] - 5 + "px";
+    root.style.top = map.event.canvas[1] - 5 + "px";
+    root.focus();
+  }
+}

package/src/basic/MapCombine.ts

@@ -0,0 +1,67 @@
+import { ContextMenu } from "./ContextMenu";
+import { MapElement } from "./MapElement";
+import { MapEvent } from "./MapEvent";
+import { Point, PointOption } from "./Point";
+import { Polygon, PolygonOption } from "./Polygon";
+import { Polyline, PolylineOption } from "./Polyline";
+import { ReactPoint, ReactPointOption, drawReactPoint } from "./ReactPoint";
+import { Tile3D, Tile3DOption } from "./Tile3D";
+export abstract class MapCombine {
+  /* 用于挂载html元素的根节点 */
+  readonly htmllayer = document.createElement("div");
+  readonly elements = new Map<string, MapElement>()
+  readonly event = new MapEvent()
+  readonly menu: ContextMenu;
+  abstract get cursor(): string;
+  abstract set cursor(val: string);
+
+  abstract get moveable(): boolean;
+  abstract set moveable(val: boolean);
+
+  abstract get center(): number[]
+  abstract set center(val)
+
+  abstract get zoom(): number
+  abstract set zoom(val)
+
+  constructor() {
+    const { htmllayer } = this
+    htmllayer.style.zIndex = "1000";
+    htmllayer.style.position = "absolute";
+    htmllayer.style.width = "0";
+    htmllayer.style.height = "0";
+    htmllayer.style.left = "0";
+    htmllayer.style.top = "0";
+    this.menu = new ContextMenu(this);
+    (window as any).map = this
+  }
+
+  createReactPoint<K>(option?: Partial<ReactPointOption<K>>): ReactPoint<K> {
+    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 createPolyline<K>(option?: Partial<PolylineOption<K>>): Polyline<K>
+
+  abstract createPolygon<K>(option?: Partial<PolygonOption<K>>): Polygon<K>
+
+  abstract createTile3D(option?: Partial<Tile3DOption>): Tile3D
+
+  abstract canvasTgeography(p: number[]): number[]
+
+  abstract geographyTcanvas(p: number[]): number[]
+
+  destroy() {
+    this.htmllayer.remove()
+    this.event.trigger('destroy')
+  }
+}

package/src/basic/MapElement.ts

@@ -0,0 +1,32 @@
+import { MapCombine } from "./MapCombine"
+
+export interface MapElementOption {
+  name: string
+}
+
+export abstract class MapElement<
+  T extends MapElementOption = MapElementOption
+>{
+  abstract type: string
+  readonly map: MapCombine
+  protected readonly _option: T
+  get name() {
+    return this._option.name
+  }
+
+  constructor(map: MapCombine, option: T) {
+    this.map = map
+    this._option = option
+    if (map.elements.has(option.name)) {
+      throw new Error(`已存在同名元素 ${option.name}`)
+    }
+    map.elements.set(option.name, this)
+  }
+
+  destroy() {
+    this.map.elements.delete(this.name)
+    this._onDestroy()
+  }
+
+  protected abstract _onDestroy(): void
+}

package/src/basic/MapEvent.ts

@@ -0,0 +1,18 @@
+import Eventful from "zrender/lib/core/Eventful";
+
+export class MapEvent extends Eventful<{
+  'pointer-down': () => void
+  'pointer-move': () => void
+  'pointer-up': () => void
+  'left-click': () => void
+  'right-click': () => void
+  'double-click': () => void
+  'view-change': () => void
+  'view-moveEnd': () => void
+  'frame': () => void
+  'resize': () => void
+  'destroy': () => void
+}> {
+  canvas = [0, 0]
+  geography = [0, 0, 0]
+}

package/src/basic/Point.ts

@@ -0,0 +1,176 @@
+import Eventful from "zrender/lib/core/Eventful"
+
+import { MapElement, MapElementOption } from "./MapElement"
+import { MapCombine } from "./MapCombine"
+
+export interface PointOption<K> extends MapElementOption {
+  show: boolean
+  cursor: string
+  coordinates?: number[]
+  src: string
+  center: number[]
+  size: number[]
+  rotation: number
+  editable: boolean
+  userdata: K
+  silent: boolean,
+  height: number
+}
+
+export class Point<K = undefined> extends MapElement<PointOption<K>> {
+  type = 'Point'
+  event = new Eventful<{
+    'data-loaded': () => void
+    'data-update': () => void
+    'pointer-in': () => void
+    'pointer-out': () => void
+    'left-click': () => void
+    'right-click': () => void
+    'update': (keys: Set<string>) => void
+    'destroy': () => void
+  }>()
+
+  get userdata() {
+    return this._option.userdata
+  }
+
+
+  get cursor() {
+    return this._option.cursor
+  }
+
+  get show() {
+    return this._option.show
+  }
+
+  set show(val) {
+    if (this._option.show != val) {
+      this._option.show = val
+      this._update('show')
+    }
+  }
+
+  get silent() {
+    return this._option.silent
+  }
+
+  set silent(val) {
+    if (this._option.silent != val) {
+      this._option.silent = val
+      this._update('silent')
+    }
+  }
+
+  get editable() {
+    return this._option.editable
+  }
+
+  set editable(val) {
+    if (this._option.editable != val) {
+      this._option.editable = val
+      this._update('editable')
+    }
+  }
+
+  get coordinates() {
+    return this._option.coordinates
+  }
+
+  set coordinates(val) {
+    if (this._option.coordinates != val) {
+      this._option.coordinates = val
+      this._update('coordinates')
+    }
+  }
+
+  get src() {
+    return this._option.src
+  }
+
+  set src(val) {
+    if (this._option.src != val) {
+      this._option.src = val
+      this._update('src')
+    }
+  }
+
+  get size() {
+    return this._option.size
+  }
+
+  set size(val) {
+    if (this._option.size != val) {
+      this._option.size = val
+      this._update('size')
+    }
+  }
+  get center() {
+    return this._option.center
+  }
+
+  set center(val) {
+    if (this._option.center != val) {
+      this._option.center = val
+      this._update('center')
+    }
+  }
+
+  get height() {
+    return this._option.height
+  }
+
+  set height(val) {
+    if (this._option.height != val) {
+      this._option.height = val
+      this._update('height')
+    }
+  }
+
+  get rotation() {
+    return this._option.rotation
+  }
+
+  set rotation(val) {
+    if (this._option.rotation != val) {
+      this._option.rotation = val
+      this._update('rotation')
+    }
+  }
+
+
+
+  constructor(map: MapCombine, option: Partial<PointOption<K>> = {}) {
+    super(map, Object.assign({ ...Point.option }, option))
+  }
+
+  static option: PointOption<undefined> = {
+    name: '点',
+    show: true,
+    src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAIxJREFUOE+tU4ENgCAM6y5TL1MuEy+bmQjChAjIEkKAretIS1DBwAy3pnuXDAvgIGDT+RRfsEtYdZI6mxgoAFQWe6wAcgE0FicgHoA/aJeeF+rs/rBgYI9+u5WIFQa99K9mQwB+j1AjntLfGBlBZCssmoMAGiOkDjWmUvbcK0WVN1PGlS87i63JWTvECRNBLcaa3Jq0AAAAAElFTkSuQmCC',
+    center: [0.5, 0.5],
+    editable: false,
+    size: [16, 16],
+    rotation: 0,
+    cursor: 'pointer',
+    userdata: undefined,
+    silent: false,
+    height: 0
+  }
+
+  private _needUpdate?: Set<string>
+  private _update(key: string) {
+    if (this._needUpdate) {
+      this._needUpdate.add(key)
+    } else {
+      this._needUpdate = new Set([key])
+      setTimeout(() => {
+        this.event.trigger('update', this._needUpdate)
+        this._needUpdate = undefined
+      });
+    }
+  }
+
+  protected _onDestroy(): void {
+    this.event.trigger('destroy')
+  }
+}

package/src/basic/PointAggregation.tsx

@@ -0,0 +1,189 @@
+import { ReactElement } from "react";
+import { throttle } from 'lodash';
+
+import { LATTOONE, LONTOONE } from "../utils/static";
+import { getUUID, setValue } from "../utils";
+import { MapCombine } from "../basic/MapCombine";
+import { ReactPoint } from "./ReactPoint";
+
+export interface PointAggregationOption {
+  /** 组件名，唯一标识 */
+  name: string;
+  /** 组件是否显示 */
+  show: boolean;
+  datas: any[];
+  /** 小于该值的等级下会聚合 */
+  maxZoomLevel?: number;
+  /** 值越大聚合点的间距越小 */
+  density?: number;
+  element(e: any[], p: number[]): ReactElement;
+  location(e: any): number[];
+}
+
+class TileNode {
+  private _location: number[];
+  private _element: any;
+  marker: ReactPoint | undefined;
+  private _map: MapCombine;
+  constructor(map: MapCombine, location: number[], element: ReactElement) {
+    this._map = map;
+    this._location = location;
+    this._element = element;
+  }
+  test(east: number, south: number, west: number, north: number) {
+    if (
+      this._location[0] < east &&
+      this._location[1] > south &&
+      this._location[0] > west &&
+      this._location[1] < north
+    ) {
+      if (!this.marker) {
+        const option = {
+          show: true,
+          name: getUUID(),
+          element: () => (this._element),
+          center: [0.5, 0.5],
+          coordinates: [this._location[0], this._location[1], 0],
+          editable: false,
+        };
+        this.marker = this._map.createReactPoint(option);
+      } else {
+        this.marker.coordinates = [this._location[0], this._location[1]];
+      }
+    } else {
+      if (this.marker) {
+        this.marker.destroy();
+      }
+    }
+  }
+}
+
+
+export class PointAggregation {
+  private readonly _cache = new Map<number, TileNode[]>();
+  private _current = 0;
+  private _map: MapCombine;
+  private _option: PointAggregationOption;
+
+  /** 唯一标识 */
+  get name() {
+    return this._option.name;
+  }
+
+  /** 是否显示 */
+  get show() {
+    return this._option.show;
+  }
+
+  set show(val) {
+    setValue(this._option, "show", val, () => {
+      val ? this._update() : this._turnoff();
+    });
+  }
+
+  /** 点聚合 */
+  constructor(map: MapCombine, option: PointAggregationOption) {
+    this._map = map;
+    this._option = option;
+    const { event } = map;
+    this.onAfterViewChange();
+    event.on("view-moveEnd", () => {
+      this.onAfterViewChange()
+    });
+  }
+
+  private _turnon(zoom: number) {
+    const { _option, _cache } = this;
+    const maxZoomLevel = this._option.maxZoomLevel ?? 17;
+    const cache = _cache.get(zoom);
+    if (!cache) {
+      if (zoom < maxZoomLevel) {
+        const cache: TileNode[] = [];
+        const grid = new Map();
+        const max = Math.pow(2, zoom) * (_option.density ?? 1);
+        _option.datas.forEach((data) => {
+          const location = _option.location(data);
+          const x = Math.floor(LONTOONE.forward(location[0]) * max * 2);
+          const y = Math.floor(LATTOONE.forward(location[1]) * max);
+          const k = `${x}_${y}`;
+          const group = grid.get(k);
+          if (group) {
+            group.push(data);
+          } else {
+            grid.set(k, [data]);
+          }
+        });
+        grid.forEach((e) => {
+          const { lon, lat } = e.reduce(
+            (a, b) => {
+              const loaction = _option.location(b);
+              a.lon += loaction[0];
+              a.lat += loaction[1];
+              return a;
+            },
+            { lon: 0, lat: 0 },
+          );
+          cache.push(
+            new TileNode(
+              this._map,
+              [lon / e.length, lat / e.length],
+              _option.element(e, [lon / e.length, lat / e.length]),
+            ),
+          );
+        });
+        _cache.set(zoom, cache);
+      } else {
+        const cache: TileNode[] = [];
+        _option.datas.forEach((e) => {
+          const location = _option.location(e);
+          cache.push(new TileNode(this._map, location, _option.element([e], location)));
+        });
+        _cache.set(zoom, cache);
+      }
+    }
+  }
+
+  private _turnoff() {
+    this._cache.get(this._current)?.forEach((e) => {
+      if (e.marker) {
+        e.marker.destroy();
+      }
+    });
+    this._cache.delete(this._current);
+  }
+
+  private _update() {
+    const { _map } = this;
+    const { offsetHeight, offsetWidth } = (_map as any).container;
+    if (offsetHeight && offsetWidth) {
+      const [west, south] = _map.canvasTgeography([0, offsetHeight]);
+      const [east, north] = _map.canvasTgeography([offsetWidth, 0]);
+      this._cache.get(this._current)?.forEach((e) => {
+        e.test(east, south, west, north);
+      });
+    }
+  }
+
+  onAfterViewChange(): void {
+    const { _map } = this;
+    const zoom = Math.min(Math.round(_map.zoom * 4) / 4, this._option.maxZoomLevel ?? 17);
+    if (zoom !== this._current) {
+      this._turnoff();
+      this._current = zoom;
+      this._turnon(zoom);
+    }
+    this._update();
+  }
+
+  /** 销毁组件 */
+  destroy() {
+    const { event } = this._map;
+    event.on("view-moveEnd", null);
+    this._map.elements.delete(this.name);
+    this._cache.forEach((e) => {
+      e.forEach((f) => {
+        f.marker?.destroy();
+      });
+    });
+  }
+}