1.0.6 • Published 11 months ago
maptalks-tools v1.0.6
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 版本
初始化模块