增加 mapbox 初始化相关逻辑
This commit is contained in:
parent
3ee81903e6
commit
bc32b1aaae
|
|
@ -1,5 +1,96 @@
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
|
|
||||||
|
export function initMapbox(mapId, options = {}) {
|
||||||
|
const map = new window.mapboxgl.Map({
|
||||||
|
container: mapId,
|
||||||
|
// style: 'mapbox://styles/mapbox/standard',
|
||||||
|
style: {
|
||||||
|
"version": 8,
|
||||||
|
"name": "default_style",
|
||||||
|
// mapbox地图使用的图标
|
||||||
|
"sprite": `${Vue.config.baseUrl}/oe/${Vue.config.wwwrootBaseUrl}/sprites/sprite`,
|
||||||
|
// 使用官方标注字体（需联网）
|
||||||
|
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
|
||||||
|
// 自部署标注字体（无需联网），glyphs 前有两个斜杠时，可能导致404
|
||||||
|
// "glyphs": `${Vue.config.baseUrl}/oe/${Vue.config.wwwrootBaseUrl}/glyphs/{fontstack}/{range}.pbf`,
|
||||||
|
"sources": {
|
||||||
|
"影像地图": {
|
||||||
|
"type": "raster",
|
||||||
|
"tiles": [
|
||||||
|
Vue.config.tiles[options.tileKey || "gaode"]
|
||||||
|
],
|
||||||
|
"tileSize": 256,
|
||||||
|
// "minzoom": 0,
|
||||||
|
// "maxzoom": baseMapMaxZoom
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"layers": [
|
||||||
|
{
|
||||||
|
"id": "影像地图",
|
||||||
|
"type": "raster",
|
||||||
|
"source": "影像地图",
|
||||||
|
"layout": { visibility: "visible" },
|
||||||
|
// "minzoom": 0,
|
||||||
|
// "maxzoom": baseMapMaxZoom
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
config: {
|
||||||
|
basemap: {
|
||||||
|
theme: 'monochrome',
|
||||||
|
lightPreset: 'night'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
zoom: options.zoom || 5,
|
||||||
|
center: options.center || [112, 20],
|
||||||
|
minZoom: options.minZoom || 2,
|
||||||
|
maxZoom: options.maxZoom || 29,
|
||||||
|
trackResize: true,
|
||||||
|
scrollZoom: false, // 禁用滚轮缩放
|
||||||
|
// 地图默认字体
|
||||||
|
localIdeographFontFamily: "Microsoft YoHei, 'Noto Sans', 'Noto Sans CJK SC', sans-serif",
|
||||||
|
pitch: 0,
|
||||||
|
bearing: 0,
|
||||||
|
// // 禁用所有旋转和俯仰角控制
|
||||||
|
// dragRotate: false,
|
||||||
|
// touchZoomRotate: false,
|
||||||
|
// pitchWithRotate: false,
|
||||||
|
// maxBounds: [[-180, -90], [180, 90]],// Set the map's geographical boundaries.
|
||||||
|
antialias: true,
|
||||||
|
attributionControl: false,
|
||||||
|
boxZoom: true,//如果为true，则启用了“缩放框”交互，按住shift并在地图上拖框放大
|
||||||
|
preserveDrawingBuffer: false,//如果为true，地图的canvas可以使用导出到png，通过map.getCanvas().toDataURL()。默认为false，会提高地图性能。
|
||||||
|
projection: 'equirectangular', // 设置投影方式，经纬度直投（解决缩放级别大于26时瓦片消失的问题）
|
||||||
|
});
|
||||||
|
Vue.config.maps[mapId] = map;
|
||||||
|
|
||||||
|
// 确保窗口大小改变时，地图能正确铺满容器
|
||||||
|
window.addEventListener('resize', (event) => {
|
||||||
|
map.resize();
|
||||||
|
// // maps.forEach((key: string, value: any) => {
|
||||||
|
// // console.log(`${key}: ${value}`);
|
||||||
|
// // });
|
||||||
|
// for (let [key, value] of Object.entries(maps)) {
|
||||||
|
// // value.resize();
|
||||||
|
// }
|
||||||
|
// Object.values(maps).forEach((map) => {
|
||||||
|
// map.resize();
|
||||||
|
// });
|
||||||
|
});
|
||||||
|
|
||||||
|
// handleWheel("voyageMap_ship");
|
||||||
|
Vue.config.maps[mapId].scrollZoom.enable();
|
||||||
|
initSprites(mapId)
|
||||||
|
|
||||||
|
map.on('load', () => {
|
||||||
|
// 加载海岸线
|
||||||
|
// loadVectorLayer("GSHHS_f_L1", ["line"], ["#5c71c3"], "visible", "workUnitMap_ship", 'ougp');
|
||||||
|
// 加载等深线
|
||||||
|
// loadVectorLayer("contour-4500m", ["line"], ["#FEFEFE"], "visible", "workUnitMap_ship", 'ougp');
|
||||||
|
// loadVectorLayer("contour-6000m", ["line"], ["#FEFEFE"], "visible", "workUnitMap_ship", 'ougp');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取所有图层信息
|
* 获取所有图层信息
|
||||||
* @param {mapboxgl.Map} map - Mapbox 地图实例
|
* @param {mapboxgl.Map} map - Mapbox 地图实例
|
||||||
|
|
@ -132,7 +223,7 @@ export async function triggerLayerClick(mapId, sourceLayerId, layerId, lnglat, o
|
||||||
|
|
||||||
// 在浏览器控制台或 triggerLayerClick 中运行（替换 sourceId/sourceLayerName）
|
// 在浏览器控制台或 triggerLayerClick 中运行（替换 sourceId/sourceLayerName）
|
||||||
const feats = map.querySourceFeatures(sourceId, { sourceLayer: "sample_station_TS-46-1_Ship_CTDI_SY" }) || [];
|
const feats = map.querySourceFeatures(sourceId, { sourceLayer: "sample_station_TS-46-1_Ship_CTDI_SY" }) || [];
|
||||||
console.log(sourceId,">>>>>>>>>>>>>>>>>>>>sample_station_TS-46-1_Ship_CTDI_SY",' ======sample of features:', feats.slice(0, 5));
|
console.log(sourceId, ">>>>>>>>>>>>>>>>>>>>sample_station_TS-46-1_Ship_CTDI_SY", ' ======sample of features:', feats.slice(0, 5));
|
||||||
console.log('props keys:', feats.slice(0, 5).map(f => Object.keys(f.properties || {})));
|
console.log('props keys:', feats.slice(0, 5).map(f => Object.keys(f.properties || {})));
|
||||||
|
|
||||||
let relatedTracks = map.querySourceFeatures(sourceId, {
|
let relatedTracks = map.querySourceFeatures(sourceId, {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue