import { feature } from '@turf/turf'; import lodash from 'lodash'; export default class AMapUtils { static _default = { options: { rotateEnable: true, pitchEnable: true, zoom: 11.6, 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) ) ); } addGeojsonPolygon(Geojson, layerName) { let geojsonPolygon = new AMap.GeoJSON({ geoJSON: Geojson, // 还可以自定义getMarker和getPolyline getPolygon: (geojson, lnglats) => { // 计算面积 let eachPolygon = new AMap.Polygon({ path: lnglats, strokeColor: geojson.properties.outcolor || 'rgba(190, 161, 58, 1)', strokeWeight: 2, fillColor: geojson.properties.fillcolor || 'rgba(151 ,255 ,255,.2)', }); eachPolygon.newfiberId = layerName; return eachPolygon; }, }); this._map.add(geojsonPolygon); } //添加纯文本标注 addLabelLayer(geojson, layerName) { geojson.features.forEach((feature) => { gcoord.transform(feature, gcoord.WGS84, gcoord.AMap); let labelLayer = new AMap.Text({ zooms: [12, 20], text: feature.properties.name, //标记显示的文本内容 anchor: 'center', //设置文本标记锚点位置 draggable: false, //是否可拖拽 cursor: 'pointer', //指定鼠标悬停时的鼠标样式。 style: { background: 'none', padding: '5px 10px', // 'border-radius': '4px', color: '#1c92ff', 'text-align': 'center', 'font-family': 'Microsoft YaHei', 'font-size': '11px', 'font-style': 'normal', 'font-weight': 800, 'line-height': 'normal', border: 'none', //'box-shadow': '0 2px 6px 0 rgba(97, 113, 166, 0)', //'box-shadow': '0 2px 4px rgba(108, 167, 255, 1), 0 0 4px rgba(108, 167, 255, 1)', //border: '1px solid rgba(108, 167, 255, 1)', }, position: feature.geometry.coordinates, //点标记在地图上显示的位置 }); labelLayer.newfiberId = layerName; this._map.add(labelLayer); //将文本标记设置到地图上 gcoord.transform(feature, gcoord.AMap, gcoord.WGS84); }); } 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); } }