二次封装创建地图方法

---

前言

二次封装创建地图方法

---

一、创建步骤

1.引入库

import Map from 'ol/Map';
import View from 'ol/View';
import { transform} from 'ol/proj';
import * as olControl from 'ol/control';

2.封装创建地图方法(ol-map.js)

/**创建地图
 * @param target {string} dom容器id
 * @param centerPoint {Array} 中心点坐标
 * @param dataCrs {Array} 数据坐标
 * @param sysCrs {Array} 系统坐标
 * @param zoom {Number} 层级
 * @returns {Map}
 */
export function crtMap ({
	target,
	centerPoint,
	dataCrs = 'EPSG:4326',
	sysCrs = 'EPSG:3857',
	zoom = 8
} = {}) {
	const _map = new Map({
		target: target,
		view: new View({
			projection: sysCrs,
			center: transform(centerPoint, dataCrs, sysCrs),//必须要有
			zoom: zoom
		}),
		controls: olControl.defaults({
			attribution: false,//地图版权信息控件
			zoom: false,//放大缩小控件
			rotate: false//旋转控件
		}),
		interactions: new defaults({
			doubleClickZoom: false//禁用双击交互时事件
		})
	});
	return _map;
}

2.实例化地图方法

import { crtMap } from "./ol-map.js";
const mapParms = {
	target: 'ol-map',
	centerPoint: [104.03895139819457, 29.05014046749801],
	dataCrs:'EPSG:4326',
	sysCrs:'EPSG:3857',
	zoom: 6
}
let olMap = crtMap(mapParms )

二、注意

1.地图dom容器必须设置宽度和高度
2.设置中心点坐标。