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

import filterGjData from indexclass myMap constructorel config thisaMap = null thispolygonList = 多边形 thisoverlays = 地图上的覆盖物 if el thisinitel config

原文地址: http://www.cveoy.top/t/topic/h5mO 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录