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

package/src/components/extends/BoundHelper.js

@@ -0,0 +1,32 @@
+class BoundHelper {
+  static createEmptyBounds() {
+    return {
+      minLat: Infinity,
+      minLng: Infinity,
+      maxLat: -Infinity,
+      maxLng: -Infinity,
+    }
+  }
+
+  static updateBounds(bounds, lat, lng) {
+    bounds.minLat = Math.min(bounds.minLat, lat)
+    bounds.minLng = Math.min(bounds.minLng, lng)
+    bounds.maxLat = Math.max(bounds.maxLat, lat)
+    bounds.maxLng = Math.max(bounds.maxLng, lng)
+  }
+
+  static isValidBounds(bounds) {
+    if (!bounds) {
+      return false
+    }
+
+    return !(
+      bounds.minLat === Infinity ||
+      bounds.minLng === Infinity ||
+      bounds.maxLat === -Infinity ||
+      bounds.maxLng === -Infinity
+    )
+  }
+}
+
+export {BoundHelper}

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

@@ -0,0 +1,164 @@
+import {getViewboxFromGeometry} from './AreaFocusGeometryUtils'
+import {IndustrialEconomicType} from './AreaFocusTypes'
+
+const INDUSTRIAL_ECONOMIC_PATH_BY_TYPE = {
+  [IndustrialEconomicType.INDUSTRIAL_ZONE]: 'khu-cong-nghiep',
+  [IndustrialEconomicType.ECONOMIC_ZONE]: 'khu-kinh-te',
+  [IndustrialEconomicType.ECO_INDUSTRIAL_ZONE]: 'khu-cong-nghiep-sinh-thai',
+  [IndustrialEconomicType.FREE_TRADE_ZONE]: 'khu-thuong-mai-tu-do',
+  [IndustrialEconomicType.NON_TARIFF_ZONE]: 'khu-phi-thue-quan',
+  [IndustrialEconomicType.OTHER_ZONE_MODEL]: 'mo-hinh-khu-khac',
+}
+
+const BDS_API_BASE_URL = 'https://cmcdtqg-gateway.dieuhanhso.vn/staging'
+
+class ProvinceArea {
+  constructor(id) {
+    this.id = id
+    this.name = null
+    this.loaded = false
+    this.geometryData = null
+    this.bounds = null
+  }
+
+  static fromName(name) {
+    const area = new ProvinceArea(null)
+    area.name = name
+    return area
+  }
+
+  async load() {
+    if (this.loaded) {
+      return true
+    }
+
+    const hasValidId = typeof this.id === 'number'
+    const hasValidName = typeof this.name === 'string' && this.name.trim() !== ''
+
+    if (!hasValidId && !hasValidName) {
+      return false
+    }
+
+    const normalizedName = hasValidName ? this.name.trim() : null
+    const url = hasValidId
+      ? `${BDS_API_BASE_URL}/bds/api/dmhc/TinhThanh/${this.id}/geometry`
+      : `${BDS_API_BASE_URL}/bds/api/dmhc/TinhThanh/geometry?ten=${encodeURIComponent(normalizedName)}`
+
+    const response = await fetch(url)
+
+    if (!response.ok) {
+      return false
+    }
+
+    const data = await response.json()
+
+    if (!data.success) {
+      console.error('Fetch province area data failed:', data.message)
+      return false
+    }
+
+    const areaData = data.data
+    const geometry = areaData && areaData.geometry ? areaData.geometry : null
+
+    if (!geometry) {
+      return false
+    }
+
+    this.geometryData = {
+      name: areaData && areaData.name ? areaData.name : normalizedName,
+      geometry,
+    }
+    this.bounds = getViewboxFromGeometry(geometry)
+    this.loaded = true
+
+    return true
+  }
+
+  getGeometryData() {
+    return this.geometryData
+  }
+
+  getBounds() {
+    return this.bounds
+  }
+
+  getId() {
+    return this.id != null ? this.id : `province-${this.name || 'unknown'}`
+  }
+}
+
+class IndustrialEconomicArea {
+  constructor(type, id) {
+    this.type = type
+    this.id = id
+    this.loaded = false
+    this.geometryData = null
+    this.bounds = null
+  }
+
+  async load() {
+    if (this.loaded) {
+      return true
+    }
+
+    if (typeof this.id !== 'number') {
+      return false
+    }
+
+    const pathSegment = INDUSTRIAL_ECONOMIC_PATH_BY_TYPE[this.type]
+
+    if (!pathSegment) {
+      console.error('Unsupported industrial/economic area type:', this.type)
+      return false
+    }
+
+    const url = `${BDS_API_BASE_URL}/bds/api/kcnkkt/${pathSegment}/${this.id}/geometry`
+
+    const response = await fetch(url)
+
+    if (!response.ok) {
+      console.error('Failed to fetch industrial zone data:', response.status, response.statusText)
+      return false
+    }
+
+    const data = await response.json()
+
+    if (!data.success) {
+      console.error('API returned error:', data.message)
+      return false
+    }
+
+    const areaData = data.data
+    const geometry = areaData && areaData.geometry ? areaData.geometry : null
+
+    if (!geometry) {
+      return false
+    }
+
+    this.geometryData = {
+      name: areaData && areaData.name ? areaData.name : null,
+      geometry,
+    }
+    this.bounds = getViewboxFromGeometry(geometry)
+    this.loaded = true
+
+    return true
+  }
+
+  getGeometryData() {
+    return this.geometryData
+  }
+
+  getBounds() {
+    return this.bounds
+  }
+
+  getId() {
+    return this.id
+  }
+}
+
+export {
+  ProvinceArea,
+  IndustrialEconomicArea,
+}

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,
+}