feat: 超图supermapgis

.cspell/custom-dictionary-workspace.txt

@@ -5,10 +5,13 @@ Bookstory
 codepaths
 CRACO
 ENOENT
+EPSG
 fengian
 fengxian
 hookspath
 Huksy
+iclient
+markercluster
 packagehash
 preid
 premajor
@@ -18,6 +21,8 @@ Qube
 singleline
 snyk
 Snyk
+spiderfy
+supermapgis
 teambit
 treee
 tsbuildinfo

package.json

@@ -233,7 +233,10 @@
     "@sentry/react": "^8.18.0",
     "@sentry/tracing": "^7.118.0",
     "@types/three": "^0.166.0",
+    "@supermapgis/iclient-leaflet": "^11.2.0",
     "@welldone-software/why-did-you-render": "^8.0.3",
+    "leaflet": "^1.9.4",
+    "leaflet.markercluster": "^1.5.3",
     "antd": "^5.18.3",
     "axios": "^1.7.4",
     "blueimp-md5": "^2.19.0",

src/pages/layout/proSecNav/index.jsx

@@ -82,6 +82,7 @@ const ProSecNav = () => {
     { label: 'ReactAmap', key: '/react-amap', icon: <QrcodeOutlined /> },
     { label: 'PostMessage', key: '/postmessage', icon: <FireOutlined /> },
     { label: 'GeoChart', key: '/geo', icon: <QrcodeOutlined /> },
+    { label: 'SuperMap', key: '/super-map', icon: <FireOutlined /> },
     {
       label: '技术栈',
       key: '/sub-act',

src/pages/superMap/index.jsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useRef } from 'react'
+import L from 'leaflet'
+import { TiledMapLayer } from '@supermapgis/iclient-leaflet'
+import 'leaflet/dist/leaflet.css'
+import 'leaflet.markercluster/dist/leaflet.markercluster-src.js'
+import 'leaflet.markercluster/dist/MarkerCluster.css'
+import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
+import markerIcon from './icon.png'
+
+import styles from './index.module.less'
+
+const SuperMap = () => {
+  const superMapRef = useRef(null)
+  const tiledLayerRef = useRef(null)
+  const markerClusterRef = useRef(null)
+
+  const iconList = [
+    {
+      locationX: 121.44,
+      locationY: 31.25,
+    },
+    {
+      locationX: 121.54,
+      locationY: 31.14,
+    },
+    {
+      locationX: 121.473919,
+      locationY: 30.955082,
+    },
+    {
+      locationX: 121.447153,
+      locationY: 30.800443,
+    },
+  ]
+
+  useEffect(() => {
+    initSuperMap()
+  }, [])
+
+  useEffect(() => {
+    getResultLayer(iconList)
+  }, [])
+  const initSuperMap = () => {
+    const url = 'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China_4326'
+
+    const map = L.map('superMap', {
+      preferCanvas: true,
+      crs: L.CRS.EPSG4326,
+      center: [30.92, 121.56],
+      maxZoom: 18,
+      minZoom: 3,
+      zoom: 3,
+      attributionControl: false,
+      zoomControl: true,
+    })
+    const layer = new TiledMapLayer(url)
+    layer.addTo(map)
+    superMapRef.current = map
+    tiledLayerRef.current = layer
+
+    // map.on('click', function (e) {
+    //   console.log('e', e);
+    // });
+  }
+
+  const getResultLayer = (projectList) => {
+    if (markerClusterRef.current) {
+      superMapRef?.current?.removeLayer(markerClusterRef.current)
+    }
+
+    const markerCluster = L.markerClusterGroup({
+      spiderfyOnMaxZoom: true,
+      showCoverageOnHover: false,
+      zoomToBoundsOnClick: true,
+    })
+
+    markerClusterRef.current = markerCluster
+
+    projectList.forEach((element) => {
+      const lat = element.locationY
+      const lon = element.locationX
+
+      const iconUrl = markerIcon
+
+      const myIcon = L.icon({
+        iconUrl,
+        iconSize: [20, 24],
+      })
+
+      const marker = L.marker([lat, lon], {
+        icon: myIcon,
+      })
+
+      markerCluster.addLayer(marker)
+    })
+
+    superMapRef?.current?.addLayer(markerCluster)
+  }
+
+  return (
+    <section className={styles.homeBox}>
+      <div id="superMap" className={styles.superMap} ref={superMapRef}></div>
+    </section>
+  )
+}
+
+export default SuperMap

src/pages/superMap/index.module.less

@@ -0,0 +1,4 @@
+.superMap{
+  width: 1200px;
+  height: 600px;
+}

src/routers/index.jsx

@@ -37,6 +37,7 @@ const PrismRender = lazy(() => import('@pages/prism'))
 // const DynamicModal = lazy(() => import('@pages/dynamicModal'))
 const BigScreen = lazy(() => import('@pages/bigScreen'))
 const ReactAmap = lazy(() => import('@pages/reactAmap'))
+const SuperMap = lazy(() => import('@pages/superMap'))
 const PostMessage = lazy(() => import('@pages/postmessage'))
 const GeoChart = lazy(() => import('@pages/geoChart'))
 const MyIframe = lazy(() => import('@pages/postmessage/myIframe'))
@@ -205,6 +206,14 @@ const rootRouter = [
         auth: false,
         element: lazyLoad(MyIframe),
       },
+      {
+        index: false,
+        path: 'super-map',
+        name: 'super-map',
+        key: '/super-map',
+        auth: false,
+        element: lazyLoad(SuperMap),
+      },
       {
         index: false,
         path: 'coupons',