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

package/src/components/extends/AreaFocuser.js

@@ -1,339 +1,62 @@
-export class AreaFocuser {
-
-  constructor(mapView) {
-    this.mapView = mapView
-    this.highlightPaths = []
-    this.highlightPolygonId = 'area-focuser-highlight-polygon'
-  }
-
-  /**
-   * @param {{name?: string, highlight?: boolean}=} options
-   */
-  async focusProvince(options) {
-    const provinceName = this.getProvinceName(options)
-    const shouldHighlight = this.shouldHighlight(options)
-
-    if (!provinceName) {
-      this.clearHighlightPaths()
-      this.clearHighlightPolygon()
-      return
-    }
-
-    const url =
-      `https://api-app-cdtqg.map4d.vn/map/country/geometry?name=${encodeURIComponent(provinceName)}`
-
-    try {
-      const response = await fetch(url)
-
-      if (!response.ok) {
-        return
-      }
-
-      const data = await response.json()
-
-      if (data.code !== 'ok') {
-        return
-      }
-
-      const feature =
-        data.result && data.result.features && data.result.features.length > 0 ? data.result.features[0] : null
-
-      if (!feature) {
-        return
-      }
-
-      const geometry = feature.geometry
-      if (!geometry) {
-        return
-      }
-
-      let bounds = null
-
-      const viewbox =
-        feature.properties && feature.properties.viewbox ? feature.properties.viewbox : null
-
-      if (viewbox != null && viewbox.trim() != '') {
-        bounds = this.parseViewbox(viewbox)
-      }
-
-      if (!bounds) {
-        bounds = this.getViewboxFromGeometry(geometry)
-      }
-
-      if (!bounds) {
-        return
-      }
-
-      this.mapView.fitBounds({
-        bounds: {
-          southWest: {
-            latitude: bounds[0],
-            longitude: bounds[1],
-          },
-          northEast: {
-            latitude: bounds[2],
-            longitude: bounds[3],
-          },
-        }
-      })
-
-      this.createHighlightPaths(geometry)
-
-      if (shouldHighlight) {
-        const polygon = this.getHighlightPolygonProps()
-
-        if (polygon) {
-          this.mapView._addPolygon({
-            ...polygon,
-            id: this.highlightPolygonId,
-            zIndex: 999,
-          })
-        }
-      }
-      else {
-        this.clearHighlightPolygon()
-      }
-    }
-    catch (error) {
-      console.error('Cannot focus province:', error)
-    }
-  }
-
-  getProvinceName(options) {
-    if (options == null || typeof options !== 'object') {
-      return null
-    }
-
-    if (typeof options.name === 'string') {
-      return options.name.trim()
-    }
-
-    const optionKeys = Object.keys(options)
-    const unsupportedKeys = optionKeys.filter((key) => key !== 'name' && key !== 'highlight')
-
-    if (unsupportedKeys.length > 0) {
-      console.warn(
-        `[AreaFocuser] focusProvince expects options like { name: 'Ha Noi', highlight: true }. Unsupported keys: ${unsupportedKeys.join(', ')}`
-      )
-    }
-
-    return null
-  }
-
-  shouldHighlight(options) {
-    if (options == null || typeof options !== 'object') {
-      return false
-    }
-
-    return options.highlight === true
-  }
-
-  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,
-    ]
-  }
-
-  getViewboxFromGeometry(geometry) {
-    const bounds = {
-      minLat: Infinity,
-      minLng: Infinity,
-      maxLat: -Infinity,
-      maxLng: -Infinity,
-    }
-
-    const updateBounds = function (coordinate) {
-      if (coordinate.length < 2) {
-        return
-      }
-
-      const lng = coordinate[0]
-      const lat = coordinate[1]
-
-      if (Number.isNaN(lat) || Number.isNaN(lng)) {
-        return
-      }
-
-      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)
-    }
-
-    if (geometry.type === 'Polygon') {
-      const polygons = geometry.coordinates
-
-      polygons.forEach(function (ring) {
-        ring.forEach(function (coordinate) {
-          updateBounds(coordinate)
-        })
-      })
-    }
-
-    if (geometry.type === 'MultiPolygon') {
-      const multiPolygons = geometry.coordinates
-
-      multiPolygons.forEach(function (polygon) {
-        polygon.forEach(function (ring) {
-          ring.forEach(function (coordinate) {
-            updateBounds(coordinate)
-          })
-        })
-      })
-    }
-
-    if (
-      bounds.minLat === Infinity ||
-      bounds.minLng === Infinity ||
-      bounds.maxLat === -Infinity ||
-      bounds.maxLng === -Infinity
-    ) {
-      return null
-    }
-
-    return [
-      bounds.minLat,
-      bounds.minLng,
-      bounds.maxLat,
-      bounds.maxLng,
-    ]
-  }
-
-  createHighlightPaths(geometry) {
-    this.clearHighlightPaths()
-
-    const paths = this.createWorldMaskPaths(geometry)
-
-    if (paths.length <= 1) {
-      return
-    }
-
-    this.highlightPaths = paths
-  }
-
-  clearHighlightPaths() {
-    this.highlightPaths = []
-  }
-
-  clearHighlightPolygon() {
-    if (!this.mapView) {
-      return
-    }
-
-    this.mapView._removePolygon(this.highlightPolygonId)
-  }
-
-  getHighlightPolygonProps() {
-    if (!this.highlightPaths || this.highlightPaths.length <= 1) {
-      return null
-    }
-
-    const [coordinates, ...holes] = this.highlightPaths
-
-    return {
-      coordinates,
-      holes,
-      fillColor: "#0000001E",
-      strokeColor: "#FF0000FF",
-      strokeWidth: 2.0,
-    }
-  }
-
-  createWorldMaskPaths(geometry) {
-    const worldPath = [
-      { longitude: -180, latitude: -90 },
-      { longitude: 180, latitude: -90 },
-      { longitude: 180, latitude: 90 },
-      { longitude: -180, latitude: 90 },
-      { longitude: -180, latitude: -90 },
-    ]
-
-    const paths = [
-      worldPath,
-    ]
-
-    const holes = this.getHolePathsFromGeometry(geometry)
-
-    holes.forEach((hole) => {
-      paths.push(hole)
-    })
-
-    return paths
-  }
-
-  getHolePathsFromGeometry(geometry) {
-    const paths = []
-
-    if (geometry.type == 'Polygon') {
-      const polygon = geometry.coordinates
-
-      if (polygon.length > 0) {
-        paths.push(this.convertAndClosePath(polygon[0]))
-      }
-    }
-
-    if (geometry.type == 'MultiPolygon') {
-      const multiPolygon = geometry.coordinates
-
-      multiPolygon.forEach((polygon) => {
-        if (polygon.length > 0) {
-          paths.push(this.convertAndClosePath(polygon[0]))
-        }
-      })
-    }
-
-    return paths
-  }
-
-  convertAndClosePath(path) {
-    if (path.length == 0) {
-      return []
-    }
-
-    const coordinatePath = path
-      .filter((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,
-    ]
-  }
+export class AreaFocuser {
+
+  constructor(areaFocusManager) {
+    this._areaFocusManager = areaFocusManager
+  }
+
+  /**
+   * @param {{name?: string, highlight?: boolean}=} options
+   */
+  async focusProvince(options) {
+    const provinceName = this._getProvinceName(options)
+    const shouldHighlight = this._shouldHighlight(options)
+
+    if (!provinceName) {
+      this._clear()
+      return
+    }
+
+    if (this._areaFocusManager) {
+      await this._areaFocusManager.focus({
+        type: 'province',
+        name: provinceName,
+        display: shouldHighlight ? 'highlight' : 'normal',
+      })
+    }
+  }
+
+  _clear() {
+    if (this._areaFocusManager) {
+      this._areaFocusManager.clear()
+    }
+  }
+
+  _getProvinceName(options) {
+    if (options == null || typeof options !== 'object') {
+      return null
+    }
+
+    if (typeof options.name === 'string') {
+      return options.name.trim()
+    }
+
+    const optionKeys = Object.keys(options)
+    const unsupportedKeys = optionKeys.filter((key) => key !== 'name' && key !== 'highlight')
+
+    if (unsupportedKeys.length > 0) {
+      console.warn(
+        `[AreaFocuser] focusProvince expects options like { name: 'Ha Noi', highlight: true }. Unsupported keys: ${unsupportedKeys.join(', ')}`
+      )
+    }
+
+    return null
+  }
+
+  _shouldHighlight(options) {
+    if (options == null || typeof options !== 'object') {
+      return false
+    }
+
+    return options.highlight === true
+  }
 }

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