import filterGjData from indexclass myMap constructorel config thisaMap = null thispolygonList = 多边形 thisoverlays = 地图上的覆盖物 if el thisinitel config
import { filterGjData } from "./index"
class myMap { private aMap: AMap.Map | null; private polygonList: AMap.Polygon[]; //多边形 private overlays: AMap.Overlay[]; //地图上的覆盖物
constructor(el: HTMLElement | null, config: AMap.MapOptions) {
this.aMap = null;
this.polygonList = []; //多边形
this.overlays = []; //地图上的覆盖物
if (el) {
this.init(el, config);
}
}
/**
* 地图初始化
* @param {dom元素} el
* @param {配置参数} config 对传入的配置合并
*/
private init(el: HTMLElement, config: AMap.MapOptions): void {
let setConf: AMap.MapOptions = {
mapStyle: 'amap://styles/fresh', //设置地图的显示样式
rotateEnable: false,
pitchEnable: false,
resizeEnable: true,
zoom: 12.5,
pitch: 45, //45度俯视
// rotation: 45,
viewMode: '3D', //开启3D视图,默认为关闭
zooms: [2, 20],
skyColor: "#002d56", //天空颜色 倾斜后才会产生 仅限于3D 模式下
center: [121.489612, 31.405457], //中心点
};
this.aMap = new AMap.Map(el, {
...setConf,
...config
});
this.sketchContours();
}
/**
* 默认添加地图城市级边阔
* https://lbs.amap.com/api/javascript-api-v2/guide/services/district-search
* @param {initconfig}: Polygon的样式
*/
private sketchContours(initconfig?: AMap.PolygonOptions): void {
let that = this;
let mapConfig: AMap.PolygonOptions = {
strokeWeight: 4,
strokeColor: '#005aad', //轮廓边框颜色
fillColor: '', //填充的背景色
fillOpacity: 0.3,
bubble: true //覆盖物的点击事件冒泡到地图上
};
Object.assign(mapConfig, initconfig);
let district = new AMap.DistrictSearch({ // 创建行政区查询对象
extensions: 'all', // 返回行政区边界坐标等具体信息
level: 'city' // 设置查询行政区级别为 省
});
district.search("上海市", function (status, result) {
if (Object.keys(result).length <= 0) {
return;
}
let holes = result.districtList[0].boundaries;
for (let i = 0, l = holes.length; i < l; i++) {
let polygon = new AMap.Polygon({
map: that.aMap,
...mapConfig,
path: holes[i]
});
that.aMap!.add(polygon);
that.aMap!.setFitView(); // 地图自适应 调整视野
}
});
}
/**
* 对外暴露的amap,可自行获取map对象
*/
public getMap(): AMap.Map | null {
return this.aMap;
}
/**
* 撒点
* @param {config}
* @param {content} HTML要素字符串
* @param {contentCallBack} 在此回调函数中可以获取到自定义的数据 返回值以供弹框展示内容
*/
public addMark(config: AMap.MarkerOptions, contentCallBack?: (data: any) => string): void {
const oldconfig: AMap.MarkerOptions = {
clickable: true, //点标记是否可点击
position: [], //经纬度
icon: "https://vdata.amap.com/icons/b18/1/2.png", //点标记图片
extData: { //自定义属性
}
};
Object.assign(oldconfig, config);
let marker = new AMap.Marker({
map: this.aMap!,
...oldconfig
});
this.aMap!.add(marker);
this.overlays.push(marker);
let userData = marker.getExtData();
if (contentCallBack) {
marker.on('click', (e) => {
this.openInfoWindow(userData, contentCallBack(userData)); //自定义信息窗体
});
}
this.aMap!.setFitView();
}
public openInfoWindow(data: any, content: string): void {
let infoWindow = new AMap.InfoWindow({
content,
anchor: 'bottom-center',
offset: [16, 0]
});
infoWindow.open(this.aMap!, data.position); //信息窗体打开
this.aMap!.setFitView();
}
/**
* 清除地图覆盖物(不包括轮廓)包括停止轨迹
*/
public clearMap(): void {
this.aMap!.clearInfoWindow();
this.overlays.forEach(item => {
if (item.type == "AMap.Marker" && item.getExtData() == "stopdrawGj") {
item.stopMove();
}
item.remove();
});
}
}
export function initMap(): Promise<AMap.Map> { return new Promise((resolve, reject) => { AMapLoader.load({ "key": "填写你自己的key", // 申请好的Web端开发者Key,首次调用 load 时必填 "version": "2.0", // 指定要加载的 JS API 的版本,缺省时默认为 1.4.15 "plugins": [ "AMap.MoveAnimation,AMap.MouseTool,AMap.PlaceSearch,AMap.DistrictSearch" ], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 // "AMapUI": { // 是否加载 AMapUI,缺省不加载 // "version": '1.1', // AMapUI 版本 // "plugins": [], // 需要加载的 AMapUI ui插件 // }, // "Loca": { // 是否加载 Loca, 缺省不加载 // "version": '2.0' // Loca 版本 // }, }).then((AMap) => { window.AMap = AMap; resolve(AMap); }).catch((e) => { console.error(e); //加载错误提示 reject(e); }); }); }
export default myMap
原文地址: http://www.cveoy.top/t/topic/h5mO 著作权归作者所有。请勿转载和采集!