react-native-map4d-map-dtqg 0.1.1 → 0.1.3

package/src/components/extends/area/AreaFocusGeometryUtils.js

@@ -0,0 +1,164 @@
+import {BoundHelper} from '../BoundHelper'
+
+const WORLD_MASK_PATH = [
+  { longitude: -180, latitude: -90 },
+  { longitude: 180, latitude: -90 },
+  { longitude: 180, latitude: 90 },
+  { longitude: -180, latitude: 90 },
+  { longitude: -180, latitude: -90 },
+]
+
+function parseViewbox(viewbox) {
+  const bounds = viewbox.split(',').map(Number)
+
+  if (bounds.length != 4) {
+    return null
+  }
+
+  const [minLat, minLng, maxLat, maxLng] = bounds
+
+  if (
+    Number.isNaN(minLat) ||
+    Number.isNaN(minLng) ||
+    Number.isNaN(maxLat) ||
+    Number.isNaN(maxLng)
+  ) {
+    return null
+  }
+
+  return {
+    minLat,
+    minLng,
+    maxLat,
+    maxLng,
+  }
+}
+
+function getViewboxFromGeometry(geometry) {
+  if (!geometry || typeof geometry !== 'object') {
+    return null
+  }
+
+  const bounds = BoundHelper.createEmptyBounds()
+
+  const updateBounds = (coordinate) => {
+    if (!Array.isArray(coordinate) || coordinate.length < 2) {
+      return
+    }
+
+    const lng = coordinate[0]
+    const lat = coordinate[1]
+
+    if (Number.isNaN(lat) || Number.isNaN(lng)) {
+      return
+    }
+
+    BoundHelper.updateBounds(bounds, lat, lng)
+  }
+
+  if (geometry.type === 'Polygon') {
+    geometry.coordinates.forEach((ring) => {
+      ring.forEach((coordinate) => {
+        updateBounds(coordinate)
+      })
+    })
+  }
+
+  if (geometry.type === 'MultiPolygon') {
+    geometry.coordinates.forEach((polygon) => {
+      polygon.forEach((ring) => {
+        ring.forEach((coordinate) => {
+          updateBounds(coordinate)
+        })
+      })
+    })
+  }
+
+  if (!BoundHelper.isValidBounds(bounds)) {
+    return null
+  }
+
+  return bounds
+}
+
+function convertAndClosePath(path) {
+  if (!Array.isArray(path) || path.length == 0) {
+    return []
+  }
+
+  const coordinatePath = path
+    .filter((point) => Array.isArray(point) && point.length >= 2)
+    .map((point) => ({
+      latitude: point[1],
+      longitude: point[0],
+    }))
+
+  if (coordinatePath.length == 0) {
+    return []
+  }
+
+  const firstPoint = coordinatePath[0]
+  const lastPoint = coordinatePath[coordinatePath.length - 1]
+
+  if (
+    firstPoint.latitude == lastPoint.latitude &&
+    firstPoint.longitude == lastPoint.longitude
+  ) {
+    return coordinatePath
+  }
+
+  return [
+    ...coordinatePath,
+    firstPoint,
+  ]
+}
+
+function areaGeometryToPolygonPaths(geometry) {
+  const paths = []
+
+  if (!geometry || typeof geometry !== 'object') {
+    return paths
+  }
+
+  if (geometry.type === 'Polygon') {
+    if (Array.isArray(geometry.coordinates) && geometry.coordinates.length > 0) {
+      const path = convertAndClosePath(geometry.coordinates[0])
+      if (path.length > 0) {
+        paths.push(path)
+      }
+    }
+    return paths
+  }
+
+  if (geometry.type === 'MultiPolygon') {
+    geometry.coordinates.forEach((polygonCoordinates) => {
+      if (!Array.isArray(polygonCoordinates) || polygonCoordinates.length === 0) {
+        return
+      }
+
+      const path = convertAndClosePath(polygonCoordinates[0])
+      if (path.length > 0) {
+        paths.push(path)
+      }
+    })
+  }
+
+  return paths
+}
+
+function createWorldMaskPaths(geometry) {
+  const holes = areaGeometryToPolygonPaths(geometry)
+
+  return [
+    WORLD_MASK_PATH,
+    ...holes,
+  ]
+}
+
+export {
+  WORLD_MASK_PATH,
+  parseViewbox,
+  getViewboxFromGeometry,
+  areaGeometryToPolygonPaths,
+  createWorldMaskPaths,
+}

package/src/components/extends/area/AreaFocusSession.js

@@ -0,0 +1,100 @@
+import {
+  areaGeometryToPolygonPaths,
+  createWorldMaskPaths,
+} from './AreaFocusGeometryUtils'
+
+class AreaFocusSession {
+  constructor(mapView, area, options) {
+    this.mapView = mapView
+    this.area = area
+    this.options = options || {}
+    this.polygonIds = []
+  }
+
+  render() {
+    this.clearPolygons()
+
+    const data = this.area.getGeometryData()
+    if (!data || !data.geometry) {
+      return
+    }
+
+    const highlight = this.options.display === 'highlight'
+
+    if (highlight) {
+      this.renderHighlight(data.geometry)
+    }
+    else {
+      this.renderNormal(data.geometry)
+    }
+  }
+
+  destroy() {
+    this.clearPolygons()
+  }
+
+  renderNormal(geometry) {
+    const polygons = areaGeometryToPolygonPaths(geometry)
+
+    polygons.forEach((coordinates, index) => {
+      this.addPolygon({
+        id: `${String(this.area.getId ? this.area.getId() : 'area')}-normal-${index}`,
+        coordinates,
+        fillColor: '#2196F3BF',
+        strokeColor: '#0D47A1FF',
+        strokeWidth: 1.5,
+        visible: true,
+      })
+    })
+  }
+
+  renderHighlight(geometry) {
+    const paths = createWorldMaskPaths(geometry)
+
+    if (paths.length <= 1) {
+      return
+    }
+
+    const [coordinates, ...holes] = paths
+
+    this.addPolygon({
+      id: `${String(this.area.getId ? this.area.getId() : 'area')}-highlight`,
+      coordinates,
+      holes,
+      fillColor: '#0000001E',
+      strokeColor: '#FF0000FF',
+      strokeWidth: 2,
+      zIndex: 999,
+      visible: true,
+    })
+  }
+
+  addPolygon(polygon) {
+    if (!this.mapView || typeof this.mapView._addPolygon !== 'function') {
+      return
+    }
+
+    const id = this.mapView._addPolygon(polygon)
+
+    if (id != null) {
+      this.polygonIds.push(id)
+    }
+  }
+
+  clearPolygons() {
+    if (!this.mapView || typeof this.mapView._removePolygon !== 'function') {
+      this.polygonIds = []
+      return
+    }
+
+    this.polygonIds.forEach((id) => {
+      this.mapView._removePolygon(id)
+    })
+
+    this.polygonIds = []
+  }
+}
+
+export {
+  AreaFocusSession,
+}

package/src/components/extends/area/AreaFocusTypes.js

@@ -0,0 +1,36 @@
+/**
+ * @typedef {{type: 'Point', coordinates: [number, number]}} PointGeometry
+ * @typedef {Array<Array<[number, number]>>} PolygonCoordinates
+ * @typedef {{type: 'Polygon', coordinates: PolygonCoordinates}} PolygonGeometry
+ * @typedef {{type: 'MultiPolygon', coordinates: Array<PolygonCoordinates>}} MultiPolygonGeometry
+ * @typedef {PointGeometry | PolygonGeometry | MultiPolygonGeometry} AreaGeometry
+ */
+
+/**
+ * @typedef {Object} GeometryData
+ * @property {string=} name
+ * @property {AreaGeometry=} geometry
+ */
+
+/**
+ * @typedef {Object} FocusableArea
+ * @property {boolean} loaded
+ * @property {boolean} editable
+ * @property {() => Promise<boolean>} load
+ * @property {() => GeometryData | null} getGeometryData
+ * @property {() => {minLat: number, minLng: number, maxLat: number, maxLng: number} | null} getBounds
+ * @property {() => string | number | null=} getId
+ */
+
+const IndustrialEconomicType = {
+  INDUSTRIAL_ZONE: 1,
+  ECONOMIC_ZONE: 2,
+  ECO_INDUSTRIAL_ZONE: 3,
+  FREE_TRADE_ZONE: 4,
+  NON_TARIFF_ZONE: 5,
+  OTHER_ZONE_MODEL: 6,
+}
+
+export {
+  IndustrialEconomicType,
+}