高德地图自定义覆盖物和信息窗体示例 - myMap 类

import\x20{\n\x20\x20filterGjData\n}\x20from\x20"./index"\n\nclass\x20myMap\x20{\n\x20\x20private\x20aMap: AMap.Map\x20|\x20null;\n\x20\x20private\x20polygonList: AMap.Polygon[]; //多边形\n\x20\x20private\x20overlays: AMap.Overlay[]; //地图上的覆盖物\n\n\x20\x20constructor(el: HTMLElement\x20|\x20null, config: AMap.MapOptions) {\n\x20\x20\x20\x20this.aMap\x20=\x20null;\n\x20\x20\x20\x20this.polygonList\x20=\x20[]; //多边形\n\x20\x20\x20\x20this.overlays\x20=\x20[]; //地图上的覆盖物\n\x20\x20\x20\x20if\x20(el) {\n\x20\x20\x20\x20\x20\x20this.init(el, config);\n\x20\x20\x20\x20}\n\x20\x20}\n\n\x20\x20/\n\x20\x20*\x20地图初始化\n\x20\x20*\x20@param\x20{dom元素}\x20el\n\x20\x20*\x20@param\x20{配置参数}\x20config\x20对传入的配置合并\n\x20\x20*/\n\x20\x20private\x20init(el: HTMLElement, config: AMap.MapOptions): void {\n\x20\x20\x20\x20let\x20setConf: AMap.MapOptions\x20=\x20{\n\x20\x20\x20\x20\x20\x20mapStyle: 'amap://styles/fresh', //设置地图的显示样式\n\x20\x20\x20\x20\x20\x20rotateEnable: false,\n\x20\x20\x20\x20\x20\x20pitchEnable: false,\n\x20\x20\x20\x20\x20\x20resizeEnable: true,\n\x20\x20\x20\x20\x20\x20zoom: 12.5,\n\x20\x20\x20\x20\x20\x20pitch: 45, //45度俯视\n\x20\x20\x20\x20\x20\x20// rotation: 45,\n\x20\x20\x20\x20\x20\x20viewMode: '3D', //开启3D视图,默认为关闭\n\x20\x20\x20\x20\x20\x20zooms: [2, 20],\n\x20\x20\x20\x20\x20\x20skyColor: "#002d56", //天空颜色 倾斜后才会产生 仅限于3D 模式下\n\x20\x20\x20\x20\x20\x20center: [121.489612, 31.405457], //中心点\n\x20\x20\x20\x20};\n\x20\x20\x20\x20this.aMap\x20=\x20new\x20AMap.Map(el, {\n\x20\x20\x20\x20\x20\x20...setConf,\n\x20\x20\x20\x20\x20\x20...config\n\x20\x20\x20\x20});\n\x20\x20\x20\x20this.sketchContours();\n\x20\x20}\n\n\x20\x20/\n\x20\x20*\x20默认添加地图城市级边阔\n\x20\x20*\x20https://lbs.amap.com/api/javascript-api-v2/guide/services/district-search\n\x20\x20*\x20@param\x20{initconfig}: Polygon的样式\n\x20\x20*/\n\x20\x20private\x20sketchContours(initconfig?: AMap.PolygonOptions): void {\n\x20\x20\x20\x20let\x20that\x20=\x20this;\n\x20\x20\x20\x20let\x20mapConfig: AMap.PolygonOptions\x20=\x20{\n\x20\x20\x20\x20\x20\x20strokeWeight: 4,\n\x20\x20\x20\x20\x20\x20strokeColor: '#005aad', //轮廓边框颜色\n\x20\x20\x20\x20\x20\x20fillColor: '', //填充的背景色\n\x20\x20\x20\x20\x20\x20fillOpacity: 0.3,\n\x20\x20\x20\x20\x20\x20bubble: true //覆盖物的点击事件冒泡到地图上\n\x20\x20\x20\x20};\n\x20\x20\x20\x20Object.assign(mapConfig, initconfig);\n\x20\x20\x20\x20let\x20district\x20=\x20new\x20AMap.DistrictSearch({ // 创建行政区查询对象\n\x20\x20\x20\x20\x20\x20extensions: 'all', // 返回行政区边界坐标等具体信息\n\x20\x20\x20\x20\x20\x20level: 'city' // 设置查询行政区级别为 省\n\x20\x20\x20\x20});\n\x20\x20\x20\x20district.search("上海市", function (status, result) {\n\x20\x20\x20\x20\x20\x20if\x20(Object.keys(result).length\x20<=\x200) {\n\x20\x20\x20\x20\x20\x20\x20\x20return;\n\x20\x20\x20\x20\x20\x20}\n\x20\x20\x20\x20\x20\x20let\x20holes\x20=\x20result.districtList[0].boundaries;\n\x20\x20\x20\x20\x20\x20for\x20(let\x20i\x20=\x200, l\x20=\x20holes.length; i\x20<\x20l; i++) {\n\x20\x20\x20\x20\x20\x20\x20\x20let\x20polygon\x20=\x20new\x20AMap.Polygon({\n\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20map: that.aMap,\n\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20...mapConfig,\n\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20path: holes[i]\n\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20});\n\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20that.aMap!.add(polygon);\n\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20that.aMap!.setFitView(); // 地图自适应 调整视野 \n\x20\x20\x20\x20\x20\x20\x20\x20}\n\x20\x20\x20\x20\x20\x20});\n\x20\x20}\n\n\x20\x20/\n\x20\x20*\x20对外暴露的amap,可自行获取map对象\n\x20\x20*/\n\x20\x20public\x20getMap(): AMap.Map\x20|\x20null {\n\x20\x20\x20\x20return\x20this.aMap;\n\x20\x20}\n\n\x20\x20/\n\x20\x20*\x20撒点\n\x20\x20*\x20@param\x20{config}\n\x20\x20*\x20@param\x20{content}\x20HTML要素字符串\n\x20\x20*\x20@param\x20{contentCallBack}\x20在此回调函数中可以获取到自定义的数据 返回值以供弹框展示内容\n\x20\x20*/\n\x20\x20public\x20addMark(config: AMap.MarkerOptions, contentCallBack?: (data: any) => string): void {\n\x20\x20\x20\x20const\x20oldconfig: AMap.MarkerOptions\x20=\x20{\n\x20\x20\x20\x20\x20\x20clickable: true, //点标记是否可点击\n\x20\x20\x20\x20\x20\x20position: [], //经纬度\n\x20\x20\x20\x20\x20\x20icon: "https://vdata.amap.com/icons/b18/1/2.png", //点标记图片\n\x20\x20\x20\x20\x20\x20extData: { //自定义属性\n\x20\x20\x20\x20\x20\x20}\n\x20\x20\x20\x20};\n\x20\x20\x20\x20Object.assign(oldconfig, config);\n\x20\x20\x20\x20let\x20marker\x20=\x20new\x20AMap.Marker({\n\x20\x20\x20\x20\x20\x20map: this.aMap!,\n\x20\x20\x20\x20\x20\x20...oldconfig\n\x20\x20\x20\x20});\n\x20\x20\x20\x20this.aMap!.add(marker);\n\x20\x20\x20\x20this.overlays.push(marker);\n\x20\x20\x20\x20let\x20userData\x20=\x20marker.getExtData();\n\n\x20\x20\x20\x20if\x20(contentCallBack) {\n\x20\x20\x20\x20\x20\x20marker.on('click', (e) => {\n\x20\x20\x20\x20\x20\x20\x20\x20this.openInfoWindow(userData, contentCallBack(userData)); //自定义信息窗体\n\x20\x20\x20\x20\x20\x20});\n\x20\x20\x20\x20}\n\x20\x20\x20\x20this.aMap!.setFitView();\n\x20\x20}\n\n\x20\x20public\x20openInfoWindow(data: any, content: string): void {\n\x20\x20\x20\x20let\x20infoWindow\x20=\x20new\x20AMap.InfoWindow({\n\x20\x20\x20\x20\x20\x20content,\n\x20\x20\x20\x20\x20\x20anchor: 'bottom-center',\n\x20\x20\x20\x20\x20\x20offset: [16, 0]\n\x20\x20\x20\x20});\n\x20\x20\x20\x20infoWindow.open(this.aMap!, data.position); //信息窗体打开\n\x20\x20\x20\x20this.aMap!.setFitView();\n\x20\x20}\n\n\x20\x20/**\n\x20\x20*\x20清除地图覆盖物（不包括轮廓）包括停止轨迹\n\x20\x20*/\n\x20\x20public\x20clearMap(): void {\n\x20\x20\x20\x20this.aMap!.clearInfoWindow();\n\x20\x20\x20\x20this.overlays.forEach(item => {\n\x20\x20\x20\x20\x20\x20if\x20(item.type == "AMap.Marker" && item.getExtData() == "stopdrawGj") {\n\x20\x20\x20\x20\x20\x20\x20\x20item.stopMove();\n\x20\x20\x20\x20\x20\x20}\n\x20\x20\x20\x20\x20\x20item.remove();\n\x20\x20\x20\x20});\n\x20\x20}\n}\n\n\x20export\x20function\x20initMap(): Promise<AMap.Map> {\n\x20\x20return\x20new\x20Promise((resolve, reject) => {\n\x20\x20\x20\x20AMapLoader.load({\n\x20\x20\x20\x20\x20\x20"key": "填写你自己的key", // 申请好的Web端开发者Key，首次调用 load 时必填\n\x20\x20\x20\x20\x20\x20"version": "2.0", // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15\n\x20\x20\x20\x20\x20\x20"plugins": [\n\x20\x20\x20\x20\x20\x20\x20\x20"AMap.MoveAnimation,AMap.MouseTool,AMap.PlaceSearch,AMap.DistrictSearch"\n\x20\x20\x20\x20\x20\x20], // 需要使用的的插件列表，如比例尺'AMap.Scale'等\n\x20\x20\x20\x20\x20\x20// "AMapUI": { // 是否加载 AMapUI，缺省不加载\n\x20\x20\x20\x20\x20\x20// "version": '1.1', // AMapUI 版本\n\x20\x20\x20\x20\x20\x20// "plugins": [], // 需要加载的 AMapUI ui插件\n\x20\x20\x20\x20\x20\x20// },\n\x20\x20\x20\x20\x20\x20// "Loca": { // 是否加载 Loca， 缺省不加载\n\x20\x20\x20\x20\x20\x20// "version": '2.0' // Loca 版本\n\x20\x20\x20\x20\x20\x20// },\n\x20\x20\x20\x20}).then((AMap) => {\n\x20\x20\x20\x20\x20\x20window.AMap\x20=\x20AMap;\n\x20\x20\x20\x20\x20\x20resolve(AMap);\n\x20\x20\x20\x20}).catch((e) => {\n\x20\x20\x20\x20\x20\x20console.error(e); //加载错误提示\n\x20\x20\x20\x20\x20\x20reject(e);\n\x20\x20\x20\x20});\n\x20\x20});\n}\n\nexport\x20default\x20myMap;