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

package/src/components/MFBanDoSo.js

@@ -0,0 +1,124 @@
+import PropTypes from 'prop-types';
+import { MFMapView } from './MFMapView';
+import {
+  buildGeojsonStyle,
+  createCategoryItemsSignature,
+} from './internal/GeojsonStyleUtils';
+
+const FilterStylePropType = PropTypes.shape({
+  kind: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
+  kind_detail: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
+});
+
+const DrawLinePropType = PropTypes.shape({
+  color: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.array]),
+});
+
+const DrawFillPropType = PropTypes.shape({
+  color: PropTypes.string,
+});
+
+const DrawSymbolPropType = PropTypes.shape({
+  icon_image: PropTypes.string,
+  icon_index: PropTypes.number,
+  icon_color: PropTypes.string,
+  use_direct_icon_url: PropTypes.bool,
+});
+
+const CategoryStylePropType = PropTypes.shape({
+  line: PropTypes.arrayOf(
+    PropTypes.shape({
+      layer: PropTypes.string,
+      filter: FilterStylePropType,
+      draw: DrawLinePropType,
+    })
+  ),
+  fill: PropTypes.arrayOf(
+    PropTypes.shape({
+      layer: PropTypes.string,
+      filter: FilterStylePropType,
+      draw: DrawFillPropType,
+    })
+  ),
+  symbol: PropTypes.arrayOf(
+    PropTypes.shape({
+      layer: PropTypes.string,
+      filter: FilterStylePropType,
+      draw: DrawSymbolPropType,
+    })
+  ),
+});
+
+const CategoryItemPropType = PropTypes.shape({
+  key: PropTypes.string,
+  title: PropTypes.string,
+  group: PropTypes.string,
+  order: PropTypes.number,
+  checked: PropTypes.bool,
+  style: CategoryStylePropType,
+});
+
+class MFBanDoSo extends MFMapView {
+  constructor(props) {
+    super(props);
+    this._appliedGeojsonStyle = null;
+  }
+
+  componentDidMount() {
+    this._syncGeojsonStyle();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const mapReadyChanged = prevState.isReady !== this.state.isReady;
+    const mapStyleChanged = prevProps.mapStyle !== this.props.mapStyle;
+    const sourceUrlChanged = prevProps.sourceUrl !== this.props.sourceUrl;
+    const itemsChanged =
+      createCategoryItemsSignature(prevProps.items) !==
+      createCategoryItemsSignature(this.props.items);
+
+    if (
+      mapReadyChanged ||
+      mapStyleChanged ||
+      sourceUrlChanged ||
+      itemsChanged
+    ) {
+      this._syncGeojsonStyle();
+    }
+  }
+
+  _syncGeojsonStyle() {
+    if (!this.state.isReady) {
+      return;
+    }
+
+    const items = this.props.items || [];
+
+    const geojsonStyle = buildGeojsonStyle(
+      this.props.mapStyle,
+      this.props.sourceUrl,
+      items
+    );
+
+    if (!geojsonStyle || geojsonStyle === this._appliedGeojsonStyle) {
+      return;
+    }
+
+    this._appliedGeojsonStyle = geojsonStyle;
+    this._runCommand('setMapStyle', [geojsonStyle]);
+  }
+}
+
+MFBanDoSo.propTypes = {
+  ...MFMapView.propTypes,
+  items: PropTypes.arrayOf(CategoryItemPropType),
+  sourceUrl: PropTypes.string.isRequired,
+};
+
+export { MFBanDoSo };

package/src/components/MFMapView.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {ViewPropTypes, ColorPropType} from 'deprecated-react-native-prop-types';
+import {AreaFocusManager} from './extends/AreaFocusManager';
 import {AreaFocuser} from './extends/AreaFocuser';
 import {MFPolygon} from './MFPolygon';
 import {
@@ -144,13 +145,15 @@ const propTypes = {
    * Callback that is called when user taps on location Button
    */
   onMyLocationButtonPress: PropTypes.func,
+
 };
 
 
 class MFMapView extends React.Component {
   constructor(props) {
     super(props);
-    this.areaFocuser = new AreaFocuser(this);
+    this.areaFocusManager = new AreaFocusManager(this);
+    this.areaFocuser = new AreaFocuser(this.areaFocusManager);
     this.state = {
       isReady: Platform.OS === 'ios',
       managedPolygons: {},
@@ -361,6 +364,21 @@ class MFMapView extends React.Component {
     return Promise.reject('coordinateForPoint not supported on this platform');
   }
 
+  focusArea(focusOptions) {
+    if (!this.areaFocusManager) {
+      return Promise.resolve(null)
+    }
+
+    return this.areaFocusManager.focus(focusOptions)
+  }
+
+  clearFocusedArea() {
+    if (!this.areaFocusManager) {
+      return
+    }
+    this.areaFocusManager.clear()
+  }
+
   _getHandle() {
     return findNodeHandle(this.map);
   }
@@ -399,7 +417,6 @@ class MFMapView extends React.Component {
     return NativeModules[`RMFMapView`][name];
   }
 
-
   render() {
     let props;
     const { children, ...restProps } = this.props;

package/src/components/extends/AreaFocusManager.js

@@ -0,0 +1,196 @@
+import {AreaFocusSession} from './area/AreaFocusSession'
+import {ProvinceArea, IndustrialEconomicArea} from './area/AreaFocusAreas'
+import {IndustrialEconomicType} from './area/AreaFocusTypes'
+
+/**
+ * @typedef {'normal' | 'highlight'} FocusDisplay
+ */
+
+/**
+ * @typedef {{left?: number, right?: number, top?: number, bottom?: number}} FocusPadding
+ */
+
+/**
+ * @typedef {'province' | 'industrialZone' | 'economicZone' | 'ecoIndustrialZone' | 'freeTradeZone' | 'nonTariffZone' | 'otherZoneModel' | number} FocusType
+ */
+
+/**
+ * @typedef {Object} FocusOptions
+ * @property {FocusType} type
+ * @property {number=} id
+ * @property {string=} name
+ * @property {FocusDisplay=} display
+ * @property {FocusPadding=} padding
+ */
+
+const VIETNAM_MAINLAND_BOUNDS = {
+  minLat: 8.18,
+  minLng: 102.14,
+  maxLat: 23.4,
+  maxLng: 109.47,
+}
+
+const FOCUS_TYPE_TO_INDUSTRIAL_ECONOMIC_TYPE = {
+  industrialZone: IndustrialEconomicType.INDUSTRIAL_ZONE,
+  economicZone: IndustrialEconomicType.ECONOMIC_ZONE,
+  ecoIndustrialZone: IndustrialEconomicType.ECO_INDUSTRIAL_ZONE,
+  freeTradeZone: IndustrialEconomicType.FREE_TRADE_ZONE,
+  nonTariffZone: IndustrialEconomicType.NON_TARIFF_ZONE,
+  otherZoneModel: IndustrialEconomicType.OTHER_ZONE_MODEL,
+}
+
+export class AreaFocusManager {
+  constructor(mapView) {
+    this.mapView = mapView
+    this.currentSession = null
+  }
+
+  async _focusArea(area, options) {
+    this.clear()
+
+    if (!area) {
+      return null
+    }
+
+    try {
+      if (!(await area.load())) {
+        return null
+      }
+
+      const focusOptions = {...(options || {})}
+      const bounds = area.getBounds() || VIETNAM_MAINLAND_BOUNDS
+
+      this._fitBounds(bounds, focusOptions)
+
+      this.currentSession = new AreaFocusSession(this.mapView, area, focusOptions)
+      this.currentSession.render()
+
+      return this.currentSession
+    }
+    catch (error) {
+      console.error('Cannot focus area:', error)
+      return null
+    }
+  }
+
+  async _focusProvince(options) {
+    const provinceId = this._getProvinceId(options)
+    const provinceName = this._getProvinceName(options)
+
+    if (provinceId == null && !provinceName) {
+      this.clear()
+      return null
+    }
+
+    const area = provinceId != null ? new ProvinceArea(provinceId) : ProvinceArea.fromName(provinceName)
+    const display = options && options.display === 'highlight' ? 'highlight' : 'normal'
+
+    return this._focusArea(area, {
+      display,
+      padding: options ? options.padding : undefined,
+    })
+  }
+
+  /**
+   * @param {FocusOptions | null | undefined} focusOptions
+   * @returns {Promise<AreaFocusSession | null>}
+   */
+  async focus(focusOptions) {
+    if (focusOptions == null) {
+      this.clear()
+      return null
+    }
+
+    if (focusOptions.type === 'province') {
+      return this._focusProvince(focusOptions)
+    }
+
+    if (focusOptions.id == null) {
+      console.warn('Focus options must include an id for non-province types:', focusOptions)
+      this.clear()
+      return null
+    }
+
+    const industrialEconomicType = this._getIndustrialEconomicType(focusOptions.type)
+
+    if (industrialEconomicType != null) {
+      return this._focusArea(new IndustrialEconomicArea(industrialEconomicType, focusOptions.id), {
+        display: focusOptions.display,
+        padding: focusOptions.padding,
+      })
+    }
+
+    console.warn('Unsupported focus type:', focusOptions.type)
+    return null
+  }
+
+  _getIndustrialEconomicType(type) {
+    if (typeof type === 'number') {
+      const values = Object.values(IndustrialEconomicType)
+      return values.includes(type) ? type : null
+    }
+
+    if (typeof type !== 'string') {
+      return null
+    }
+
+    return FOCUS_TYPE_TO_INDUSTRIAL_ECONOMIC_TYPE[type] || null
+  }
+
+  clear() {
+    if (this.currentSession) {
+      this.currentSession.destroy()
+      this.currentSession = null
+    }
+  }
+
+  _fitBounds(bounds, options) {
+    if (!this.mapView || typeof this.mapView.fitBounds !== 'function' || !bounds) {
+      return
+    }
+
+    this.mapView.fitBounds({
+      bounds: {
+        southWest: {
+          latitude: bounds.minLat,
+          longitude: bounds.minLng,
+        },
+        northEast: {
+          latitude: bounds.maxLat,
+          longitude: bounds.maxLng,
+        },
+      },
+      padding: options ? options.padding : undefined,
+    })
+  }
+
+  _getProvinceName(options) {
+    if (options == null || typeof options !== 'object') {
+      return null
+    }
+
+    if (typeof options.name === 'string') {
+      const name = options.name.trim()
+      return name.length > 0 ? name : null
+    }
+
+    const optionKeys = Object.keys(options)
+    const unsupportedKeys = optionKeys.filter((key) => key !== 'type' && key !== 'id' && key !== 'name' && key !== 'display' && key !== 'padding')
+
+    if (unsupportedKeys.length > 0) {
+      console.warn(
+        `[AreaFocusManager] focusProvince expects options like { type: 'province', name: 'Ha Noi', display: 'highlight' }. Unsupported keys: ${unsupportedKeys.join(', ')}`
+      )
+    }
+
+    return null
+  }
+
+  _getProvinceId(options) {
+    if (options == null || typeof options !== 'object') {
+      return null
+    }
+
+    return typeof options.id === 'number' ? options.id : null
+  }
+}

package/src/components/extends/AreaFocuser.js

@@ -1,105 +1,37 @@
 export class AreaFocuser {
 
-  constructor(mapView) {
-    this.mapView = mapView
-    this.highlightPaths = []
-    this.highlightPolygonId = 'area-focuser-highlight-polygon'
+  constructor(areaFocusManager) {
+    this._areaFocusManager = areaFocusManager
   }
 
   /**
    * @param {{name?: string, highlight?: boolean}=} options
    */
   async focusProvince(options) {
-    const provinceName = this.getProvinceName(options)
-    const shouldHighlight = this.shouldHighlight(options)
+    const provinceName = this._getProvinceName(options)
+    const shouldHighlight = this._shouldHighlight(options)
 
     if (!provinceName) {
-      this.clearHighlightPaths()
-      this.clearHighlightPolygon()
+      this._clear()
       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],
-          },
-        }
+    if (this._areaFocusManager) {
+      await this._areaFocusManager.focus({
+        type: 'province',
+        name: provinceName,
+        display: shouldHighlight ? 'highlight' : 'normal',
       })
-
-      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)
+  }
+
+  _clear() {
+    if (this._areaFocusManager) {
+      this._areaFocusManager.clear()
     }
   }
 
-  getProvinceName(options) {
+  _getProvinceName(options) {
     if (options == null || typeof options !== 'object') {
       return null
     }
@@ -120,220 +52,11 @@ export class AreaFocuser {
     return null
   }
 
-  shouldHighlight(options) {
+  _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,
-    ]
-  }
 }