mapbox加载4490(CGCS2000)坐标系

1.下载资源包

npm install @cgcs2000/mapbox-gl

 2.引入mapbox-gl

import '@cgcs2000/mapbox-gl/dist/mapbox-gl.css';

import mapboxgl from '@cgcs2000/mapbox-gl';

3. 设置不需要添加token操作

mapboxgl.accessToken = null;

class Cjmapbox extends mapboxgl.Map {}

Cjmapbox.prototype.__proto__._authenticate = function () {

    return true;

};

 4.代码

onMounted(() => {
	mapboxgl.accessToken = null;
	class Cjmapbox extends mapboxgl.Map {}
	Cjmapbox.prototype.__proto__._authenticate = function () {
		return true;
	};
	let bounds = [
		[101.25543088037318, 29.34312792014849], //赋值你想要的界限的西南坐标
		[106.4820798028914, 32.151061649798784], //赋值你想要的界限的东北坐标
	];
	// 创建地图对象
	map = new mapboxgl.Map({
		container: 'map',
		center, // 设置地图中心
		crs: 'EGSP:4490',
		view: '3D',
		maxBounds: bounds,
		// 背景设置
		style: {
			version: 8,
			name: 'BlankMap',
			glyphs: `${publick}mapbox/{fontstack}/{range}.pbf`,
			sources: {},
			layers: [
				{
					id: 'background',
					type: 'background',
					paint: {
						'background-color': '#08294A',
					} /* 背景颜色 */,
				},
			],
		},
		showZoomControl: false, //不显示mapbox控制工具
		zoom: 8, //图层
		pitch: 0, //地图倾斜
		maxZoom: src.value.MAX_ZOOM, //最大图层
		minZoom: 6, //最小图层
		preserveDrawingBuffer: true,
	});
	// 地图初始化加载操作
	map.on('load', () => {
		// 加载地图图层资源
		map.addSource('sourceId', {
			type: 'raster',
			tiles: [path],
			tileSize: 256,
		});
		// 加载天空盒子图层
		map.addLayer({
			id: 'sky',
			type: 'sky',
			paint: {
				'sky-type': 'atmosphere',
				'sky-atmosphere-sun': [0.0, 0.0],
				'sky-atmosphere-sun-intensity': 15,
			},
		});
		// 加载地图图层，控制显示隐藏
		map.addLayer({
			id:'layerId',
			type:'raster',
			source:'sourceId',
			layout: { visibility: 'visible' },// 控制图层显隐
			paint: { 'raster-opacity': 0.8 },// 图层透明度
		})
		map._logoControl && map.removeControl(map._logoControl); //去除mapbox logo
	});
});