use upload-file

install

cnpm i maptalks-tools --save

文件上传组件

import * as React from "react";
import { memo, useCallback, useRef } from 'react';
import maptalksTools from 'maptalks-tools';
import { Menu } from 'antd';
import { CloseCircleFilled } from '@ant-design/icons';
import yuhangOut from './assets/yuhangOut.json';
import yuhang from './assets/yuhang.json';
import PointData from './assets/PointData.json';
import styles from './index.less';

const { SubMenu } = Menu;

const textMarker = "textMarker";
const imgMarker = "imgMarker";
const markerList = "markerList";

const TiandituKey = '天地图tk';

const MapTalkTools = () => {
  const mapTalkRef = useRef<maptalksTools>();
  const poRef = useRef<HTMLDivElement>(null);
  const poRef2 = useRef<HTMLDivElement>(null);
  const poRefMarker = useRef<HTMLDivElement>(null);
  const poRefImgMarker = useRef<HTMLDivElement>(null);
  const poRefTextMarker = useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    mapTalkRef.current = new maptalksTools({
      mapId: 'maptalks',
      center: [120.29803812, 30.39756793],
      tiandituOpts: { tk: TiandituKey }
    })

  }, [mapTalkRef]);

  const handleClick = useCallback(({ key }: any) => {
    const { current: mapOptFun } = mapTalkRef;
    switch (key) {
      case 'UseBaseLayer.setTiandituLayer.vec_c':
        // 先清除图层
        mapOptFun?.UseBaseLayer?.remove(['maptalks_tianditu'])
        mapOptFun?.UseBaseLayer?.setTiandituLayer({
          tk: TiandituKey,
          type: 'vec_c',
        })
        break;
      case 'UseBaseLayer.setTiandituLayer.img_c':
        // 先清除图层
        mapOptFun?.UseBaseLayer?.remove(['maptalks_tianditu'])
        mapOptFun?.UseBaseLayer?.setTiandituLayer({
          tk: TiandituKey,
          type: 'img_c',
        })
        break;
      case 'UseBaseLayer.setTiandituLayer.cia_c':
        // 先清除图层
        mapOptFun?.UseBaseLayer?.remove(['maptalks_tianditu'])
        mapOptFun?.UseBaseLayer?.setTiandituLayer({
          tk: TiandituKey,
          type: 'cia_c',
        })
        break;
      case 'UseBaseLayer.setTiandituLayer.ter_c':
        // 先清除图层
        mapOptFun?.UseBaseLayer?.remove(['maptalks_tianditu'])
        mapOptFun?.UseBaseLayer?.setTiandituLayer({
          tk: TiandituKey,
          type: 'ter_c',
        })
        break;
      case 'UseBaseLayer.setTiandituLayer.cta_c':
        // 先清除图层
        mapOptFun?.UseBaseLayer?.remove(['maptalks_tianditu'])
        mapOptFun?.UseBaseLayer?.setTiandituLayer({
          tk: TiandituKey,
          type: 'cta_c',
        })
        break;
      case 'UseBaseLayer.setTiandituLayer.ibo_c':
        // 先清除图层
        mapOptFun?.UseBaseLayer?.remove(['maptalks_tianditu'])
        mapOptFun?.UseBaseLayer?.setTiandituLayer({
          tk: TiandituKey,
          type: 'ibo_c',
        })
        break;
      case 'UseBaseLayer.setTiandituLWLayer':
        // 先清除图层
        mapOptFun?.UseBaseLayer?.setTiandituLWLayer({
          tk: TiandituKey,
          type: 'cva_c',
        })
        break;
      case 'UseBaseLayer.setBaiduLayer.normal':
        mapOptFun?.UseBaseLayer?.remove(['maptalks_baidu']);
        mapOptFun?.UseBaseLayer?.setBaiduLayer({
          customid: 'normal',
        });
        break;
      case 'UseBaseLayer.setBaiduLayer.light':
        mapOptFun?.UseBaseLayer?.remove(['maptalks_baidu']);
        mapOptFun?.UseBaseLayer?.setBaiduLayer({
          customid: 'light',
        });
        break;
      case 'UseBaseLayer.setBaiduLayer.dark':
        mapOptFun?.UseBaseLayer?.remove(['maptalks_baidu']);
        mapOptFun?.UseBaseLayer?.setBaiduLayer({
          customid: 'dark',
        });
        break;
      case 'UseBaseLayer.setBaiduLayer.redalert':
        mapOptFun?.UseBaseLayer?.remove(['maptalks_baidu']);
        mapOptFun?.UseBaseLayer?.setBaiduLayer({
          customid: 'redalert',
        });
        break;
      case 'UseBaseLayer.setBaiduLayer.googlelite':
        mapOptFun?.UseBaseLayer?.remove(['maptalks_baidu']);
        mapOptFun?.UseBaseLayer?.setBaiduLayer({
          customid: 'googlelite',
        });
        break;
      case 'UseBaseLayer.setBaiduLayer.grassgreen':
        mapOptFun?.UseBaseLayer?.remove(['maptalks_baidu']);
        mapOptFun?.UseBaseLayer?.setBaiduLayer({
          customid: 'grassgreen',
        });
        break;
      case 'UseBaseLayer.setBaiduLayer.midnight':
        mapOptFun?.UseBaseLayer?.remove(['maptalks_baidu']);
        mapOptFun?.UseBaseLayer?.setBaiduLayer({
          customid: 'midnight',
        });
        break;
      case 'UseBaseLayer.setBaiduLayer.pink':
        mapOptFun?.UseBaseLayer?.remove(['maptalks_baidu']);
        mapOptFun?.UseBaseLayer?.setBaiduLayer({
          customid: 'pink',
        });
        break;
      case 'UseBaseLayer.setBaiduLayer.darkgreen':
        mapOptFun?.UseBaseLayer?.remove(['maptalks_baidu']);
        mapOptFun?.UseBaseLayer?.setBaiduLayer({
          customid: 'darkgreen',
        });
        break;
      case 'UseBaseLayer.setBaiduLayer.bluish':
        mapOptFun?.UseBaseLayer?.remove(['maptalks_baidu']);
        mapOptFun?.UseBaseLayer?.setBaiduLayer({
          customid: 'bluish',
        });
        break;
      case 'UseBaseLayer.setBaiduLayer.grayscale':
        mapOptFun?.UseBaseLayer?.remove(['maptalks_baidu']);
        mapOptFun?.UseBaseLayer?.setBaiduLayer({
          customid: 'grayscale',
        });
        break;
      case 'UseBaseLayer.setBaiduLayer.hardedge':
        mapOptFun?.UseBaseLayer?.remove(['maptalks_baidu']);
        mapOptFun?.UseBaseLayer?.setBaiduLayer({
          customid: 'hardedge',
        });
        break;
      case 'UseBaseLayer.setGaodeLayer.道路带注记':
        mapOptFun?.UseBaseLayer?.remove(['maptalks_gaode']);
        mapOptFun?.UseBaseLayer?.setGaodeLayer({
          type: '道路带注记',
        });
        break;
      case 'UseBaseLayer.setGaodeLayer.道路不带注记':
        mapOptFun?.UseBaseLayer?.remove(['maptalks_gaode']);
        mapOptFun?.UseBaseLayer?.setGaodeLayer({
          type: '道路不带注记',
        });
        break;
      case 'UseBaseLayer.setGaodeLayer.矢量带标注':
        mapOptFun?.UseBaseLayer?.remove(['maptalks_gaode']);
        mapOptFun?.UseBaseLayer?.setGaodeLayer({
          type: '矢量带标注',
        });
        break;
      case 'UseBaseLayer.setGaodeLayer.影像不带注记':
        mapOptFun?.UseBaseLayer?.remove(['maptalks_gaode']);
        mapOptFun?.UseBaseLayer?.setGaodeLayer({
          type: '影像不带注记',
        });
        break;
      case 'UseBaseLayer.setGaodeLayer.矢量地图带注记':
        mapOptFun?.UseBaseLayer?.remove(['maptalks_gaode']);
        mapOptFun?.UseBaseLayer?.setGaodeLayer({
          type: '矢量地图带注记',
        });
        break;
      case 'UseBaseLayer.setGaodeLayer.矢量地图不带注记':
        mapOptFun?.UseBaseLayer?.remove(['maptalks_gaode']);
        mapOptFun?.UseBaseLayer?.setGaodeLayer({
          type: '矢量地图不带注记',
        });
        break;
      case 'UseBaseLayer.addLayerByMask':
        mapOptFun?.UseBaseLayer?.addLayerByMask({
          maskGeometry: yuhangOut?.features?.[0]?.geometry as any,
        })
        break;
      case 'UseBaseLayer.addArcGISLayer':
        mapOptFun?.UseBaseLayer?.addArcGISLayer({
          key: 'arcgis1',
          epsg: 'EPSG:3857',
          arcUrl: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',
          // arcUrl: '/arcgisserver/arcgis/rest/services/World_Imagery/MapServer',
          // arcUrl: 'https://yt.zjasm.net/qzgt18/d889d009190e4b23a470d11f696d4c54/arcgis/rest/services/GCS330800G100101_JCDL/GCS330800G100101_JCDL_XZQH_XZ_2022/MapServer',
          zIndex: 2,
        })
        break;
      case 'UseBaseLayer.addWMTSLayerByLoad':
        mapOptFun?.UseBaseLayer?.addWMTSLayerByLoad({
          wmtsUrl: 'https://t0.tianditu.gov.cn/vec_c/wmts?request=GetCapabilities&service=wmts',
          wmtsUrlSuffix: '&tk=97aba9f6dc9933630adbf89af37d0052',
          key: 'wmts',
          epsg: 'EPSG:4326',
          zIndex: 2,
        })
        break;
      case 'UseBaseLayer.addWMTSLayer':
        mapOptFun?.UseBaseLayer?.addWMTSLayer({
          key: 'wmts_js',
          epsg: 'EPSG:4326',
          tileSystem: [1, -1, -180, 90],
          layer: 'img',
          tilematrixset: 'c',
          format: 'tiles',
          urlTemplate: 'http://t{s}.tianditu.com/img_c/wmts?tk=97aba9f6dc9933630adbf89af37d0052',
          subdomains: ['1', '2', '3', '4', '5'],
          attribution: '© <a target="_blank" href="http://www.tianditu.cn">Tianditu</a>',
          zIndex: 2,
        })
        break;
      case 'UseBaseLayer.addMapboxglLayer':
        mapOptFun?.UseBaseLayer?.addMapboxglLayer({
          key: 'mapbox_gl',
          // glStyle: 'mapbox://styles/mapbox/dark-v10',
          glStyle: 'mapbox://styles/mapbox/light-v9',
          accessToken: 'pk.eyJ1Ijoic2hpaW5hbWFzaGlybzEyOSIsImEiOiJjazM3NW91aTcwMWc4M2hwMWJxMjhwaWdpIn0.8rBd40A6p1sh-m7xfhoizw',
        })
        break;
      case 'UseBaseLayer.clear':
        // 先清除图层
        mapOptFun?.UseBaseLayer?.clear();
        break;
      case 'UseAreaLayer.add':
        mapOptFun?.UseAreaLayer?.remove({ key: 'area_line_geojson' })
        mapOptFun?.UseAreaLayer?.add({
          key: 'area_line',
          isLock: false,
          visible: true,
          altitude: 1200,
          areaList: yuhang as any,
          textKey: 'name',
          renderMoving: false,
          renderZooming: false,
          renderRotating: false,
          zIndex: 9999,
          areaSymbol: {
            textFill: '#ffffff'
          },
          eventSymbol: {
            polygonFill: '#ffffff',
            textFill: '#333333'
          },
          eventAltitude: 3200,
          eventTriggerVisible: true,
          updateEventTypes: ['click'],
          events: [
            {
              type: 'click', callback: (e) => {
                console.log('边界单击', e);
              }
            }
          ],
        })
        break;
      case 'UseAreaLayer.addByGeoJson':
        mapOptFun?.UseAreaLayer?.remove({ key: 'area_line' })
        mapOptFun?.UseAreaLayer?.addByGeoJsonOrWkt({
          key: 'area_line_geojson',
          isLock: false,
          visible: true,
          altitude: 1200,
          areaList: yuhang,
          zIndex: 9999,
          areaSymbol: {
            textFill: '#ffffff'
          }
        })
        break;
      case 'UseAreaLayer.setToggetVisible':
        mapOptFun?.UseAreaLayer?.setToggetVisible({
          key: ['area_line', 'area_line_geojson'],
        })
        break;
      case 'UseAreaLayer.clear':
        mapOptFun?.UseAreaLayer?.clear();
        break;
      case 'UseTrajectory.add':
        mapOptFun?.UseTrajectory?.add({
          key: 'trajectory',
          lineData: [
            [120.543189862389, 31.35322014824814],
            [120.54391551057267, 31.35371261270089],
            [120.54506885867931, 31.354451304544426],
            [120.54587139673674, 31.35501763102789],
            [120.54707760663155, 31.355752208849054],
            [120.54825017720657, 31.356441639795918],
            [120.54965341740296, 31.357237762100084],
            [120.55118160364418, 31.35791076744991],
            [120.55261854668379, 31.358306813092582],
            [120.55456885954129, 31.35892438695859],
            [120.55632947631534, 31.359855802165697],
            [120.55739651678448, 31.360529047629626],
            [120.5583272131937, 31.361237721856668],
            [120.55895558146995, 31.36169835723942],
            [120.55950095770982, 31.361779347842656],
            [120.55989220588185, 31.36172872872382],
            [120.56026567004596, 31.361506004277174],
            [120.56086439830915, 31.36083276580959],
            [120.56180695072362, 31.359830492091845],
            [120.56218041488785, 31.359309103054073],
            [120.56241753499216, 31.3585295451185],
            [120.56237028513135, 31.357949524158727],
            [120.5621203930416, 31.357165719008975],
            [120.56187530656894, 31.35647218963217],
            [120.56165424818187, 31.355721202348974],
            [120.56164944256477, 31.355355965928624],
            [120.56182244478077, 31.35513436111691],
            [120.56208675372181, 31.354957897652554],
            [120.56249523117617, 31.354933274817228],
            [120.56287968054517, 31.355052285128153],
            [120.56336024225618, 31.355191814266362],
            [120.56383599835021, 31.355323135619102],
            [120.56411823174483, 31.35531370115811],
            [120.56451108319175, 31.355280752400773],
            [120.56493901066062, 31.355160938640353],
            [120.56587203284698, 31.35481347787183],
            [120.56675594860246, 31.354516937062584],
            [120.56843258245613, 31.353986755709315],
            [120.5700145110502, 31.35345956676693],
            [120.57178585016345, 31.352935370285905],
            [120.57333270273546, 31.352519006427343],
            [120.57448319625848, 31.35221646750327],
            [120.57551793890877, 31.351985818362692],
            [120.57763653064012, 31.351494563762202],
            [120.57919390601887, 31.351198012486947],
            [120.5809512147232, 31.350868509973196],
            [120.58295054797964, 31.35057195672377],
            [120.58502354088239, 31.350356281045975],
            [120.58627224726706, 31.350224478999365],
            [120.5874823700276, 31.350122631836854],
            [120.59152584231651, 31.349856304834162],
            [120.59430413211135, 31.349902525810847],
            [120.59755148381964, 31.349917932798093],
            [120.60048312077856, 31.3501798511941],
            [120.60473173926357, 31.350534210215955],
            [120.60818656066442, 31.350811533736504],
            [120.61173158627935, 31.350981008818707],
            [120.6170265736481, 31.35100411903349],
            [120.62201486668891, 31.350826940574763],
            [120.62405348192806, 31.35069598236899],
            [120.62905561628952, 31.350032419603707],
            [120.62990839532642, 31.34993531589643],
            [120.63024516959456, 31.34983613848371],
            [120.63079647383688, 31.349739949917847],
            [120.63147819413666, 31.349577947900315],
            [120.63169753023317, 31.349400757874122],
            [120.63182201828783, 31.349142566095594],
            [120.63175088225648, 31.34888943621283],
            [120.6315908261862, 31.348656556118982],
            [120.63120550601684, 31.34852999060874],
            [120.63087946587348, 31.34858061683329],
            [120.63070755379783, 31.348707182275376],
            [120.6305178577145, 31.348975500449427],
            [120.63038744165715, 31.349532384782577],
            [120.63034594563885, 31.350043702948568],
            [120.63042300967277, 31.350641081047087],
            [120.63066012977697, 31.351096705859646],
            [120.63095060190471, 31.351552328464862],
            [120.63118772200892, 31.351921887401176],
            [120.63168515539405, 31.35219880544568],
            [120.63248920420028, 31.352608017684105],
            [120.63305772355818, 31.35296867784163],
            [120.63374806849276, 31.353377886729987],
            [120.63403232817177, 31.35341950109344],
            [120.63426785761999, 31.35342643681892],
            [120.63443841342746, 31.353502729765154],
            [120.63498256767002, 31.35356515122058],
            [120.63552415947902, 31.353532455415092],
            [120.63596182529568, 31.35347320158391],
            [120.63661298663283, 31.35320883788225],
            [120.63707733938963, 31.3529216833642],
            [120.6373708957301, 31.352620853881007],
            [120.63744561916224, 31.35236104582563],
            [120.63738157050614, 31.352114911216376],
            [120.63717341237384, 31.351914356613946],
            [120.63692255513729, 31.35184598562907],
            [120.63660764924475, 31.351841427561652],
            [120.63636746678435, 31.35201463396865],
            [120.63623403208419, 31.352383836034647],
            [120.63633544245636, 31.352689224302623],
            [120.63650090148462, 31.3529216833642],
            [120.63683181954116, 31.353199721879236],
            [120.63742426961016, 31.35367375286191],
            [120.63899989912761, 31.35481832702638],
            [120.64019378977923, 31.355581242410636],
            [120.64162320987919, 31.3566631845234],
            [120.64244421131548, 31.357355036087455],
            [120.64279521271169, 31.357767168817503],
            [120.64328515216039, 31.35848527456139],
            [120.64376046655104, 31.359652965234176],
            [120.64456769613616, 31.363272225986208],
            [120.64494602107004, 31.36555252186676],
            [120.64581813599784, 31.36849036625327],
            [120.6465155185075, 31.370868523138512]
          ],
          img: require('./assets/lineMarker.svg'),
          zIndex: 99,
        })
        break;
      case 'UseTrajectory.restart':
        mapOptFun?.UseTrajectory?.restart({ key: 'trajectory' });
        break;
      case 'UseTrajectory.setToggetVisible':
        mapOptFun?.UseTrajectory?.setToggetVisible({ key: 'trajectory' });
        break;
      case 'UseTrajectory.clear':
        mapOptFun?.UseTrajectory?.clear();
        break;
      case 'UseIconLayer.addTextMarker':
        mapOptFun?.UseIconLayer?.add({
          key: textMarker,
          img: require('./assets/arrow.png'),
          isLock: false,
          iconList: [
            { lng: 120.29803812, lat: 30.39756793, name: '文本图标', textFill: '#34495e', key: 'icon1' },
          ],
          altitude: 0,
          zIndex: 99,
          infoWindow: {
            content: poRefTextMarker?.current!,
          },
          imgIconVisible: false,
        })
        break;
      case 'UseIconLayer.addImageMarker':
        mapOptFun?.UseIconLayer?.add({
          key: imgMarker,
          isLock: false,
          img: require('./assets/arrow.png'),
          iconList: [
            { lng: 120.119408, lat: 30.3458881, name: '图标1', textFill: 'green' },
          ],
          altitude: 0,
          zIndex: 99,
          infoWindow: {
            content: poRefImgMarker?.current!,
            dy: -50,
          },
        })
        break;
      case 'UseIconLayer.addMarkerList':
        mapOptFun?.UseIconLayer?.add({
          key: markerList,
          isLock: false,
          img: require('./assets/arrow.png'),
          iconList: [
            { lng: 119.2753492, lat: 30.45864397, name: '图标1', textFill: 'red' },
            { lng: 119.9753492, lat: 30.41864397, name: '图标2' },
            { lng: 119.3753492, lat: 30.49864397, name: '图标3' },
          ],
          altitude: 0,
          zIndex: 99,
          infoWindow: {
            content: poRefMarker?.current!,
            dy: -50,
          },
        })
        break;
      case 'UseIconLayer.setPosition':
        mapOptFun?.UseIconLayer?.setPosition({ key: textMarker, id: ['icon1'], center: mapOptFun?.UseView?.getViewOpts()?.center! });
        break;
      case 'UseIconLayer.setToggetVisible':
        mapOptFun?.UseIconLayer?.setToggetVisible({ key: [textMarker, imgMarker, markerList] });
        break;
      case 'UseIconLayer.clear':
        mapOptFun?.UseIconLayer?.clear();
        mapOptFun?.UseInfoWindow?.clear();
        break;
      case 'UseAnimateMarkerLayer.add':
        mapOptFun?.UseAnimateMarkerLayer?.add({
          key: 'animate_marker_list',
          isLock: false,
          iconList: [
            { lng: 119.2753492, lat: 30.45864397 },
            { lng: 119.9753492, lat: 30.41864397 },
            { lng: 119.3753492, lat: 30.49864397 },
          ],
          zIndex: 99,
          animateMarkerLayerOpts: {

          },
        })
        break;
      case 'UseAnimateMarkerLayer.setToggetVisible':
        mapOptFun?.UseAnimateMarkerLayer?.setToggetVisible({ key: ['animate_marker_list'] })
        break;
      case 'UseAnimateMarkerLayer.clear':
        mapOptFun?.UseAnimateMarkerLayer?.clear();
        break;
      case 'UseClusterLayer.add':
        mapOptFun?.UseClusterLayer?.add({
          img: require('./assets/arrow.png'),
          key: 'cluster',
          isLock: false,
          maxClusterRadius: 100,
          markers: PointData as any,
          visible: true,
          altitude: 600,
          zIndex: 99,
          events: [
            {
              type: 'click', callback: (e) => {
                const marker = e?.target;
                console.log('聚合点位单击', e, marker);
              }
            }
          ]
        })
        break;
      case 'UseClusterLayer.setToggetVisible':
        mapOptFun?.UseClusterLayer?.setToggetVisible({ key: 'cluster' });
        break;
      case 'UseClusterLayer.clear':
        mapOptFun?.UseClusterLayer?.clear();
        break;
      case 'UseInfoWindow.add':
        mapOptFun?.UseInfoWindow?.add({
          id: 'pop1',
          content: poRef?.current!,
          visible: true,
          coordinate: [119.3753492, 30.49864397],
        })
        break;
      case 'UseInfoWindow.setVisible':
        mapOptFun?.UseInfoWindow?.setVisible({
          id: 'pop1',
          visible: true,
          center: mapOptFun?.UseView?.getViewOpts()?.center,
        })
        break;
      case 'UseInfoWindow.setToggetVisible':
        mapOptFun?.UseInfoWindow?.setToggetVisible({
          id: 'pop1',
          center: mapOptFun?.UseView?.getViewOpts()?.center,
        })
        break;
      case 'UseInfoWindow.clear':
        mapOptFun?.UseInfoWindow?.clear();
        break;
      case 'UseInfoWindowChange.add':
        mapOptFun?.UseInfoWindowChange.add({
          id: 'test',
          content: poRef2.current!,
          time: 0.5,
          pointerList: [
            {
              lng: 120.201007942731,
              lat: 30.248280104838763,
              name: '优秀1',
              textBackgroundColor: 'red',
            },
            { lng: 120.202007942731, lat: 30.248280104838763, name: '优秀2' },
            { lng: 120.203007942731, lat: 30.248280104838763, name: '优秀3' },
            { lng: 120.204007942731, lat: 30.248280104838763, name: '优秀4' },
            { lng: 120.205007942731, lat: 30.248280104838763, name: '优秀5' },
            { lng: 120.206007942731, lat: 30.248280104838763, name: '优秀6' },
          ],
        });
        break;
      case 'UseInfoWindowChange.stop':
        mapOptFun?.UseInfoWindowChange.stop({ id: 'test' });
        break;
      case 'UseInfoWindowChange.start':
        mapOptFun?.UseInfoWindowChange.start({ id: 'test' });
        break;
      case 'UseInfoWindowChange.setToggetVisible':
        mapOptFun?.UseInfoWindowChange.setToggetVisible({ id: 'test' });
        break;
      case 'UseInfoWindowChange.clear':
        mapOptFun?.UseInfoWindowChange.clear();
        break;
      case 'UseEvent.addEventListener':
        mapOptFun?.UseEvent?.addEventListener('click', 'click', (e) => {
          const { clickJhMarker } = e;
          console.log('单击事件', e);
          if (clickJhMarker?.length) {
            console.log('单击聚合点位', clickJhMarker);
          }
        })
        break;
      case 'UseEvent.addMoveendEventListener':
        mapOptFun?.UseEvent?.addEventListener('moveend', 'moveend', (e) => {
          console.log('移动事件', e);
        })
        break;
      case 'UseEvent.addZoomendEventListener':
        mapOptFun?.UseEvent?.addEventListener('zoomend', 'zoomend', (e) => {
          console.log('缩放事件', e);
        })
        break;
      case 'UseEvent.clearEventListener':
        mapOptFun?.UseEvent?.clearEventListener();
        break;
      case 'UseHeatLayer.add':
        mapOptFun?.UseHeatLayer?.add({
          key: 'heat',
          data: [
            [120.201007942731, 30.248280104838763, 0.2],
            [120.202007942731, 30.248280104838763, 0.6],
            [120.203007942731, 30.248280104838763, 0.3],
            [120.204007942731, 30.248280104838763, 1],
            [120.205007942731, 30.248280104838763, 0.9],
            [120.206007942731, 30.248280104838763, 0.5]
          ],
          max: 1,
        })
        break;
      case 'UseHeatLayer.setToggetVisible':
        mapOptFun?.UseHeatLayer?.setToggetVisible({ key: 'heat' })
        break;
      case 'UseHeatLayer.clear':
        mapOptFun?.UseHeatLayer?.clear();
        break;
      case 'UseAllMapLayer.setLayerVisible':
        mapOptFun?.UseAllLayer?.setAllLayerVisible({ key: ['heat', 'test', 'pop1', 'cluster', 'animate_marker_list', textMarker, imgMarker, markerList, 'trajectory', 'area_line', 'area_line_geojson'], visible: false });
        break;
      case 'UseAllMapLayer.setLayerToggetVisible':
        mapOptFun?.UseAllLayer?.setAllLayerToggetVisible({ key: ['heat', 'test', 'pop1', 'cluster', 'animate_marker_list', textMarker, imgMarker, markerList, 'trajectory', 'area_line', 'area_line_geojson'] });
        break;
      case 'UseAllMapLayer.removeLayer':
        mapOptFun?.UseAllLayer?.removeAllLayer({ key: ['heat', 'test', 'pop1', 'cluster', 'animate_marker_list', textMarker, imgMarker, markerList, 'trajectory', 'area_line', 'area_line_geojson'] });
        break;
      case 'UseInteractive.addDistanceTools':
        mapOptFun?.UseInteractive?.addMappingTools({
          type: 'distance',
          once: false,
          metric: true,
          imperial: false,
          key: 'tools1',
          events: [
            {
              type: 'drawend',
              callback: (e) => {
                console.log('drawend', e);
              }
            },
          ]
        })
        break;
      case 'UseInteractive.removeDistanceTools':
        mapOptFun?.UseInteractive?.removeMappingTools('tools1')
        break;
      case 'UseInteractive.addAreaTools':
        mapOptFun?.UseInteractive?.addMappingTools({
          type: 'area',
          once: false,
          metric: true,
          imperial: false,
          key: 'tools2',
          events: [
            {
              type: 'drawend',
              callback: (e) => {
                console.log('drawend', e);
              }
            },
          ]
        })
        break;
      case 'UseInteractive.removeAreaTools':
        mapOptFun?.UseInteractive?.removeMappingTools('tools2')
        break;
      case 'UseInteractive.addDrawTools.Point':
        mapOptFun?.UseInteractive.addDrawTools({
          count: 3,
          key: 'Point',
          mode: 'Point',
          clearEventType: 'contextmenu',
        })
        break;
      case 'UseInteractive.addDrawTools.LineString':
        mapOptFun?.UseInteractive.addDrawTools({
          count: 3,
          key: 'LineString',
          mode: 'LineString',
          clearEventType: 'contextmenu',
        })
        break;
      case 'UseInteractive.addDrawTools.Polygon':
        mapOptFun?.UseInteractive.addDrawTools({
          key: 'Polygon',
          mode: 'Polygon',
        })
        break;
      case 'UseInteractive.addDrawTools.Circle':
        mapOptFun?.UseInteractive.addDrawTools({
          key: 'Circle',
          mode: 'Circle',
        })
        break;
      case 'UseInteractive.addDrawTools.Ellipse':
        mapOptFun?.UseInteractive.addDrawTools({
          key: 'Ellipse',
          mode: 'Ellipse',
        })
        break;
      case 'UseInteractive.addDrawTools.Rectangle':
        mapOptFun?.UseInteractive.addDrawTools({
          key: 'Rectangle',
          mode: 'Rectangle',
        })
        break;
      case 'UseInteractive.addDrawTools.FreeHandLineString':
        mapOptFun?.UseInteractive.addDrawTools({
          key: 'FreeHandLineString',
          mode: 'FreeHandLineString',
        })
        break;
      case 'UseInteractive.addDrawTools.FreeHandPolygon':
        mapOptFun?.UseInteractive.addDrawTools({
          key: 'FreeHandPolygon',
          mode: 'FreeHandPolygon',
        })
        break;
      case 'UseInteractive.removeDrawTools':
        mapOptFun?.UseInteractive.removeDrawTools();
        break;
      default:
        break;
    }
  }, [mapTalkRef])

  return (
    <div className={styles.mainPage} style={{ height: '100vh' }}>
      <div style={{ width: '100%', height: '100%' }} id="maptalks"></div>
      <Menu
        onClick={handleClick}
        mode="horizontal"
        style={{
          width: '100%',
          flexFlow: 'wrap',
          position: 'absolute',
          top: 0,
          left: 0,
          zIndex: 9,
        }}
      >
        <SubMenu key="UseBaseLayer" title="底图加载">
          <SubMenu key="UseBaseLayer.setTiandituLayer" title="添加天地图">
            <Menu.Item key="UseBaseLayer.setTiandituLayer.vec_c">矢量底图</Menu.Item>
            <Menu.Item key="UseBaseLayer.setTiandituLayer.img_c">影像底图</Menu.Item>
            <Menu.Item key="UseBaseLayer.setTiandituLayer.cia_c">影像标注</Menu.Item>
            <Menu.Item key="UseBaseLayer.setTiandituLayer.ter_c">地形晕眩</Menu.Item>
            <Menu.Item key="UseBaseLayer.setTiandituLayer.cta_c">地形注记</Menu.Item>
            <Menu.Item key="UseBaseLayer.setTiandituLayer.ibo_c">全球境界</Menu.Item>
          </SubMenu>
          <Menu.Item key="UseBaseLayer.setTiandituLWLayer">添加天地图路网</Menu.Item>
          {/* <Menu.Item key="UseBaseLayer.setBaiduLayer">添加百度底图</Menu.Item> */}
          <SubMenu key="UseBaseLayer.setBaiduLayer" title="百度地图">
            <Menu.Item key="UseBaseLayer.setBaiduLayer.normal">normal</Menu.Item>
            <Menu.Item key="UseBaseLayer.setBaiduLayer.light">light</Menu.Item>
            <Menu.Item key="UseBaseLayer.setBaiduLayer.dark">dark</Menu.Item>
            <Menu.Item key="UseBaseLayer.setBaiduLayer.redalert">redalert</Menu.Item>
            <Menu.Item key="UseBaseLayer.setBaiduLayer.googlelite">googlelite</Menu.Item>
            <Menu.Item key="UseBaseLayer.setBaiduLayer.grassgreen">grassgreen</Menu.Item>
            <Menu.Item key="UseBaseLayer.setBaiduLayer.midnight">midnight</Menu.Item>
            <Menu.Item key="UseBaseLayer.setBaiduLayer.pink">pink</Menu.Item>
            <Menu.Item key="UseBaseLayer.setBaiduLayer.darkgreen">darkgreen</Menu.Item>
            <Menu.Item key="UseBaseLayer.setBaiduLayer.bluish">bluish</Menu.Item>
            <Menu.Item key="UseBaseLayer.setBaiduLayer.grayscale">grayscale</Menu.Item>
            <Menu.Item key="UseBaseLayer.setBaiduLayer.hardedge">hardedge</Menu.Item>
          </SubMenu>
          {/* <Menu.Item key="UseBaseLayer.setGaodeLayer">添加高德底图</Menu.Item> */}
          <SubMenu key="UseBaseLayer.setGaodeLayer" title="添加高德地图">
            <Menu.Item key="UseBaseLayer.setGaodeLayer.道路带注记">道路带注记</Menu.Item>
            <Menu.Item key="UseBaseLayer.setGaodeLayer.道路不带注记">道路不带注记</Menu.Item>
            <Menu.Item key="UseBaseLayer.setGaodeLayer.矢量带标注">矢量带标注</Menu.Item>
            <Menu.Item key="UseBaseLayer.setGaodeLayer.影像不带注记">影像不带注记</Menu.Item>
            <Menu.Item key="UseBaseLayer.setGaodeLayer.矢量地图带注记">矢量地图带注记</Menu.Item>
            <Menu.Item key="UseBaseLayer.setGaodeLayer.矢量地图不带注记">矢量地图不带注记</Menu.Item>
          </SubMenu>
          <Menu.Item key="UseBaseLayer.addLayerByMask">指定范围内的瓦片取其他底图展示</Menu.Item>
          <Menu.Item key="UseBaseLayer.addArcGISLayer">添加ArcGIS底图图层</Menu.Item>
          <Menu.Item key="UseBaseLayer.addMapboxglLayer">添加Mapboxgl底图图层</Menu.Item>
          <Menu.Item key="UseBaseLayer.addWMTSLayer">添加WMTS图层（通过wmts第三方图层插件）</Menu.Item>
          <Menu.Item key="UseBaseLayer.addWMTSLayerByLoad">添加WMTS图层（maptalks.SpatialReference.loadWMTS）</Menu.Item>
          <Menu.Item key="UseBaseLayer.clear">清除图层</Menu.Item>
        </SubMenu>
        <SubMenu key="UseAreaLayer" title="区域边界">
          <Menu.Item key="UseAreaLayer.add">添加</Menu.Item>
          <Menu.Item key="UseAreaLayer.addByGeoJson">添加通过GeoJson</Menu.Item>
          <Menu.Item key="UseAreaLayer.setToggetVisible">显示/隐藏</Menu.Item>
          <Menu.Item key="UseAreaLayer.clear">清空</Menu.Item>
        </SubMenu>
        <SubMenu key="UseTrajectory" title="运动轨迹">
          <Menu.Item key="UseTrajectory.add">添加</Menu.Item>
          <Menu.Item key="UseTrajectory.restart">重绘</Menu.Item>
          <Menu.Item key="UseTrajectory.setToggetVisible">显示/隐藏</Menu.Item>
          <Menu.Item key="UseTrajectory.clear">清空</Menu.Item>
        </SubMenu>
        <SubMenu key="UseIconLayer" title="图标图层">
          <Menu.Item key="UseIconLayer.addTextMarker">添加文本图标</Menu.Item>
          <Menu.Item key="UseIconLayer.addImageMarker">添加图标</Menu.Item>
          <Menu.Item key="UseIconLayer.addMarkerList">添加多个图标</Menu.Item>
          <Menu.Item key="UseIconLayer.setPosition">修改屏幕中心的位置</Menu.Item>
          <Menu.Item key="UseIconLayer.setToggetVisible">显示/隐藏</Menu.Item>
          <Menu.Item key="UseIconLayer.clear">清空</Menu.Item>
        </SubMenu>
        <SubMenu key="UseAnimateMarkerLayer" title="闪烁点图标">
          <Menu.Item key="UseAnimateMarkerLayer.add">添加闪烁点</Menu.Item>
          <Menu.Item key="UseAnimateMarkerLayer.setToggetVisible">显示/隐藏</Menu.Item>
          <Menu.Item key="UseAnimateMarkerLayer.clear">清空</Menu.Item>
        </SubMenu>
        <SubMenu key="UseClusterLayer" title="聚合图标">
          <Menu.Item key="UseClusterLayer.add">添加</Menu.Item>
          <Menu.Item key="UseClusterLayer.setToggetVisible">显示/隐藏</Menu.Item>
          <Menu.Item key="UseClusterLayer.clear">清空</Menu.Item>
        </SubMenu>
        <SubMenu key="UseHeatLayer" title="热力图">
          <Menu.Item key="UseHeatLayer.add">添加</Menu.Item>
          <Menu.Item key="UseHeatLayer.setToggetVisible">显示/隐藏</Menu.Item>
          <Menu.Item key="UseHeatLayer.clear">清空</Menu.Item>
        </SubMenu>
        <SubMenu key="UseInfoWindow" title="信息提示框">
          <Menu.Item key="UseInfoWindow.add">添加</Menu.Item>
          <Menu.Item key="UseInfoWindow.setVisible">在屏幕中心点展示</Menu.Item>
          <Menu.Item key="UseInfoWindow.setToggetVisible">显示/隐藏</Menu.Item>
          <Menu.Item key="UseInfoWindow.clear">清空</Menu.Item>
        </SubMenu>
        <SubMenu key="UseInfoWindowChange" title="信息提示框切换">
          <Menu.Item key="UseInfoWindowChange.add">添加</Menu.Item>
          <Menu.Item key="UseInfoWindowChange.stop">停止</Menu.Item>
          <Menu.Item key="UseInfoWindowChange.start">继续</Menu.Item>
          <Menu.Item key="UseInfoWindowChange.setToggetVisible">显示/隐藏</Menu.Item>
          <Menu.Item key="UseInfoWindowChange.clear">清空</Menu.Item>
        </SubMenu>
        <SubMenu key="UseInteractive" title="地图交互">
          <Menu.Item key="UseInteractive.addDistanceTools">新增地图测距工具</Menu.Item>
          <Menu.Item key="UseInteractive.removeDistanceTools">移除地图测距工具</Menu.Item>
          <Menu.Item key="UseInteractive.addAreaTools">新增地图测面工具</Menu.Item>
          <Menu.Item key="UseInteractive.removeAreaTools">移除地图测面工具</Menu.Item>
          <SubMenu key="UseInteractive.addDrawTools" title="新增绘制工具">
            <Menu.Item key="UseInteractive.addDrawTools.Point">Point</Menu.Item>
            <Menu.Item key="UseInteractive.addDrawTools.LineString">LineString</Menu.Item>
            <Menu.Item key="UseInteractive.addDrawTools.Polygon">Polygon</Menu.Item>
            <Menu.Item key="UseInteractive.addDrawTools.Circle">Circle</Menu.Item>
            <Menu.Item key="UseInteractive.addDrawTools.Ellipse">Ellipse</Menu.Item>
            <Menu.Item key="UseInteractive.addDrawTools.Rectangle">Rectangle</Menu.Item>
            <Menu.Item key="UseInteractive.addDrawTools.FreeHandLineString">FreeHandLineString</Menu.Item>
            <Menu.Item key="UseInteractive.addDrawTools.FreeHandPolygon">FreeHandPolygon</Menu.Item>
          </SubMenu>
          <Menu.Item key="UseInteractive.removeDrawTools">移除地图绘制工具</Menu.Item>
        </SubMenu>
        <SubMenu key="UseEvent" title="事件绑定">
          <Menu.Item key="UseEvent.addEventListener">添加单击监听</Menu.Item>
          <Menu.Item key="UseEvent.addMoveendEventListener">添加地图移动事件</Menu.Item>
          <Menu.Item key="UseEvent.addZoomendEventListener">添加地图缩放事件</Menu.Item>
          <Menu.Item key="UseEvent.clearEventListener">清空</Menu.Item>
        </SubMenu>
        <SubMenu key="UseAllMapLayer" title="所有图层操作（除底图图层，信息提示框和信息提示框定时轮播图层外）">
          <Menu.Item key="UseAllMapLayer.setLayerVisible">图层隐藏</Menu.Item>
          <Menu.Item key="UseAllMapLayer.setLayerToggetVisible">图层显隐</Menu.Item>
          <Menu.Item key="UseAllMapLayer.removeLayer">图层移除</Menu.Item>
        </SubMenu>
      </Menu>
      <div
        ref={poRef}
        style={{
          width: 100,
          height: 100,
          background: 'red',
          color: '#fff',
          display: 'none',
        }}
      >
        我是一个浮动层
      </div>
      <div
        ref={poRef2}
        style={{
          width: 100,
          height: 100,
          background: 'rgba(0,0,0,.3)',
          color: '#fff',
          display: 'none',
        }}
      >
        我是浮动层切换
      </div>
      <div
        ref={poRefImgMarker}
        style={{
          width: 100,
          height: 100,
          background: 'rgba(0,0,0,.3)',
          color: '#fff',
          display: 'none',
          position: 'relative',
          padding: 10
        }}
      >
        <CloseCircleFilled style={{ fontSize: 16, position: 'absolute', right: 10, top: 10, cursor: 'pointer' }} onClick={() => {
          const { current: mapOptFun } = mapTalkRef;
          console.log('关闭')
          mapOptFun?.UseInfoWindow?.setVisible({ id: imgMarker, visible: false })
        }} />
        我是图标点位详情弹框
      </div>
      <div
        ref={poRefMarker}
        style={{
          width: 100,
          height: 100,
          background: 'rgba(0,0,0,.3)',
          color: '#fff',
          display: 'none',
          position: 'relative',
          padding: 10
        }}
      >
        <CloseCircleFilled style={{ fontSize: 16, position: 'absolute', right: 10, top: 10, cursor: 'pointer' }} onClick={() => {
          const { current: mapOptFun } = mapTalkRef;
          console.log('关闭')
          mapOptFun?.UseInfoWindow?.setVisible({ id: markerList, visible: false })
        }} />
        我是点位列表详情弹框
      </div>
      <div
        ref={poRefTextMarker}
        style={{
          width: 100,
          height: 100,
          background: 'rgba(0,0,0,.3)',
          color: '#fff',
          display: 'none',
          position: 'relative',
          padding: 10
        }}
      >
        <CloseCircleFilled style={{ fontSize: 16, position: 'absolute', right: 10, top: 10, cursor: 'pointer' }} onClick={() => {
          const { current: mapOptFun } = mapTalkRef;
          console.log('关闭')
          mapOptFun?.UseInfoWindow?.setVisible({ id: textMarker, visible: false })
        }} />
        我是点位详情弹框
      </div>
    </div>
  )
}
export default memo(MapTalkTools);

1.0.6 版本

初始化模块