Newer
Older
KaiFengWechat / src / utils / gis / AMapUtils.js
@zhangdeliang zhangdeliang on 24 May 5 KB 初始化项目
import lodash from "lodash";
export default class AMapUtils {

    static _default = {
        options: {
            rotateEnable: true,
            pitchEnable: true,
            zoom: 10,
            pitch: 0,
            rotation: 0,
            viewMode: '3D', //开启3D视图,默认为关闭
            zooms: [2, 20],
            mapStyle: 'amap://styles/light',
            center: [114.33999667685148, 34.80389630895566]
        },
        keys: {
            temporary: 'temporary'
        },
        events: {
            click: 'click'
        }
    }

    _map = null;

    callbacks = {
        click: []
    }


    constructor(container, options = {}) {
        this.initMap(container, options);
    }

    initMap(container, options) {
        this._map = new AMap.Map(container, Object.assign(AMapUtils._default.options, options));
    }

    /*自动定位*/
    showCityInfo() {
        let self = this;
        var citysearch = new AMap.CitySearch()
        citysearch.getLocalCity(function (status, result) {
            if (!(status === 'complete' && result.info === 'OK')) return;
            if (result && result.city && result.bounds) {
                var cityinfo = result.city
                var citybounds = result.bounds
                self._map.setBounds(citybounds);
            }
        });
    }

    geojsonToMap(geojson) {
        let self = this;
        geojson = gcoord.transform(geojson, gcoord.WGS84, gcoord.AMap);
        let labelsLayer = new AMap.LabelsLayer({ collision: false, zooms: [0, 20], zIndex: 1000 });
        let geoJSON = new AMap.GeoJSON({
            geoJSON: geojson,
            getMarker: (feature, lnglats) => {
                const { properties } = feature;
                const { mapParams } = properties;
                let overLay = new AMap.LabelMarker({
                    position: lnglats,
                    zooms: [0, 20],
                    opacity: 1,
                    zIndex: 2,
                    anchor: 'bottom-center',
                    offset: new AMap.Pixel(0, 0),
                    icon: {
                        type: 'image',
                        image: mapParams.icon || '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                        anchor: 'bottom-center',
                        size: mapParams.size || [15, 20]
                    },
                    text: {
                        content: mapParams.name || '',
                        zooms: [15, 20],
                        style: {
                            fontSize: 15,
                        }
                    },
                    extData: properties
                });
                overLay.newfiberId = mapParams.group || AMapUtils._default.keys.temporary;
                labelsLayer.add(overLay);
                // return overLay;
            },
            getPolyline: (feature, lnglats) => {
                const { properties } = feature;
                const { mapParams } = properties;
                let overLay = new AMap.Polyline({
                    path: lnglats,
                    isOutline: true,
                    outlineColor: '#ffeeff',
                    borderWeight: 3,
                    strokeColor: "#3366FF",
                    strokeOpacity: 1,
                    strokeWeight: 6,
                    // 折线样式还支持 'dashed'
                    strokeStyle: "dashed",
                    // strokeStyle是dashed时有效
                    strokeDasharray: [15, 5],
                    lineJoin: 'round',
                    lineCap: 'round',
                    zIndex: 50,
                    extData: properties
                });
                overLay.newfiberId = mapParams.group || AMapUtils._default.keys.temporary;
                return overLay;
            },
            getPolygon: (feature, lnglats) => {
                const { properties } = feature;
                const { mapParams } = properties;
                let overLay = new AMap.Polygon({
                    path: data,
                    fillColor: '#ccebc5',
                    strokeOpacity: 1,
                    fillOpacity: 0.5,
                    strokeColor: '#2b8cbe',
                    strokeWeight: 1,
                    strokeStyle: 'dashed',
                    strokeDasharray: [5, 5],
                    extData: properties
                });
                overLay.newfiberId = mapParams.group || AMapUtils._default.keys.temporary;
                return overLay;
            },
        });
        let arrays = geoJSON.getOverlays().filter(Boolean);
        let arrays1 = labelsLayer.getAllOverlays().filter(Boolean);
        if (arrays1.length) this._map.add(labelsLayer);
        if (arrays.length) this._map.add(geoJSON);
        this._map.setFitView(null, false, [150, 60, 100, 60]);
        arrays.concat(arrays1).forEach(i => i.on('click', lodash.debounce(function (a) {
            self.callbacks.click.forEach(i => i(a.target, [a.lnglat.lng, a.lnglat.lat]))
        }, 500)));
    }

    removeByIds(ids = []) {
        this.getOverLaysByIds(ids).forEach(i => i.remove());
    }

    setVisibleByIds(ids = [], visible) {
        this.getOverLaysByIds(ids).forEach(i => i[visible ? 'show' : 'hide']());
    }

    getOverLaysByIds(ids = []) {
        return this._map.getAllOverlays().filter(i => ids.includes(i.newfiberId));
    }

    registerEvent(type = AMapUtils._default.events.click, callback = () => { }) {
        let self = this;
        self.callbacks[type].push(callback);
    }
}