更新地图初始化逻辑
This commit is contained in:
parent
f7c3baa76f
commit
d4fd572394
16
src/main.js
16
src/main.js
|
|
@ -16,6 +16,7 @@ import qs from 'qs'
|
|||
|
||||
import store from './store/index'
|
||||
import { extractWMTSBoundsInfo } from '@/utils/mapbox-utils'
|
||||
import { getGeoserverCapabilities } from '@/utils/vector-layer-utils'
|
||||
|
||||
window.sessionStorage.setItem('webInfo', 'ASOS')
|
||||
Vue.use(ElementUI, { locale: Zhlocale })
|
||||
|
|
@ -35,6 +36,9 @@ new Vue({
|
|||
|
||||
// 定义部分全局变量
|
||||
Vue.config.maps = {};
|
||||
Vue.config.layers = {};
|
||||
Vue.config.username = "***";
|
||||
Vue.config.password = "***";
|
||||
Vue.config.firstRender = true;
|
||||
Vue.config.boundsInfoList = [];
|
||||
Vue.config.baseUrl = process.env.NODE_ENV === 'development' ? 'http://124.222.8.13:9801' : `${window.location.protocol}//${window.location.hostname}:${window.location.port}`
|
||||
|
|
@ -43,7 +47,14 @@ Vue.config.sprites = ["go.png", "ship.png", "ship1.png", "ship2.png", "ship3.png
|
|||
|
||||
if (Vue.config.firstRender) {
|
||||
Vue.config.firstRender = !Vue.config.firstRender;
|
||||
fetch(`${Vue.config.baseUrl}/geoserver/gwc/service/wmts?service=WMTS&acceptVersions=1.0.0&request=GetCapabilities`)
|
||||
// fetch(`${Vue.config.baseUrl}/geoserver/gwc/service/wmts?service=WMTS&acceptVersions=1.0.0&request=GetCapabilities`)
|
||||
// fetch(`http://10.1.51.150:8080/geoserver/gwc/service/wmts?service=WMTS&acceptVersions=1.0.0&request=GetCapabilities`, {
|
||||
fetch(`${Vue.config.baseUrl}/geoserver/gwc/service/wmts?service=WMTS&acceptVersions=1.0.0&request=GetCapabilities`, {
|
||||
headers: {
|
||||
// 'Authorization': `Basic ${btoa(`${Vue.config.username}:${Vue.config.password}`)}`,
|
||||
'Accept': 'application/vnd.ogc.sld+xml'
|
||||
}
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(async (xmlContent) => {
|
||||
Vue.config.boundsInfoList = await extractWMTSBoundsInfo(xmlContent);
|
||||
|
|
@ -53,8 +64,9 @@ if (Vue.config.firstRender) {
|
|||
window.mapboxgl.accessToken = 'pk.eyJ1IjoicWRod2kiLCJhIjoiY2xiaXppcjEyMGNhMjNwbzVrcHl4d20zOSJ9.0ETMJM3-zllFh2GRrRVUZg'
|
||||
|
||||
Vue.config.tiles = {
|
||||
// "world_horizon_1": `${Vue.config.baseUrl}/geoserver/gwc/service/wmts/rest/ougp:world_horizon_1/EPSG:900913/EPSG:900913:{z}/{y}/{x}?format=image/jpeg`,
|
||||
"world_horizon_1": `${Vue.config.baseUrl}/geoserver/gwc/service/wmts/rest/ougp:world_horizon_1/EPSG:900913/EPSG:900913:{z}/{y}/{x}?format=image/jpeg`,
|
||||
"World_Imagery": "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
|
||||
"GEBCO_basemap_NCEI": "https://tiles.arcgis.com/tiles/C8EMgrsFcRFL6LrL/arcgis/rest/services/GEBCO_basemap_NCEI/MapServer/tile/{z}/{y}/{x}",
|
||||
"gaode":"https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&scl=2&style=8&x={x}&y={y}&z={z}"
|
||||
"gaode": "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&scl=2&style=8&x={x}&y={y}&z={z}"
|
||||
};
|
||||
|
|
@ -62,6 +62,23 @@ export function initMapbox(mapId, options = {}) {
|
|||
boxZoom: true,//如果为true，则启用了“缩放框”交互，按住shift并在地图上拖框放大
|
||||
preserveDrawingBuffer: false,//如果为true，地图的canvas可以使用导出到png，通过map.getCanvas().toDataURL()。默认为false，会提高地图性能。
|
||||
// projection: 'equirectangular', // 设置投影方式，经纬度直投（解决缩放级别大于26时瓦片消失的问题）
|
||||
transformRequest(url, resourceType) {
|
||||
// 注释掉，以免缩放级别大于12时出现空白底图
|
||||
// if (url.includes("ougp:world"))
|
||||
// return filterRequest(url, resourceType, 12);
|
||||
|
||||
// 判断请求是否来自你的 GeoServer
|
||||
if (url.includes(`${Vue.config.baseUrl}/geoserver`)) {
|
||||
return {
|
||||
url: url,
|
||||
// headers: { 'Authorization': `Basic ${btoa(`${Vue.config.username}:${Vue.config.password}`)}` },
|
||||
credentials: 'same-origin' // 用于控制Cookie发送
|
||||
};
|
||||
}
|
||||
|
||||
// 对其他请求不做修改
|
||||
return { url: url };
|
||||
}
|
||||
});
|
||||
Vue.config.maps[mapId] = map;
|
||||
|
||||
|
|
@ -89,8 +106,8 @@ export function initMapbox(mapId, options = {}) {
|
|||
loadVectorLayer({ layerId: "GSHHS_f_L1", features: ["line"], colors: ["#5c71c3"], visibility: "visible", mapId, workspace: 'ougp' });
|
||||
// 加载等深线
|
||||
if (options.contourOn || false) {
|
||||
loadVectorLayer({ layerId: "contour-4500m", features: ["line"], colors: ["#FEFEFE"], visibility: "visible", mapId, workspace: 'ougp' });
|
||||
loadVectorLayer({ layerId: "contour-6000m", features: ["line"], colors: ["#FEFEFE"], visibility: "visible", mapId, workspace: 'ougp' });
|
||||
loadVectorLayer({ layerId: (Vue.config.layers["4500米等深线"] || Vue.config.layers["contour-4500m"]), features: ["line"], colors: ["#FEFEFE"], visibility: "none", mapId, workspace: 'ougp' });
|
||||
loadVectorLayer({ layerId: (Vue.config.layers["6000米等深线"] || Vue.config.layers["contour-6000m"]), features: ["line"], colors: ["#FEFEFE"], visibility: "none", mapId, workspace: 'ougp' });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@ export function loadVectorLayer({ layerId, features = ["line", "symbol"], colors
|
|||
if (!source) {
|
||||
// request vector tiles with extra buffer to avoid geometry clipping at tile edges
|
||||
const tilesUrl = `${Vue.config.baseUrl}/geoserver/gwc/service/tms/1.0.0/${workspace}:${layerId}@EPSG:900913@pbf/{z}/{x}/{y}.pbf?buffer=64`;
|
||||
// const tilesUrl = `http://10.1.51.150:8080/geoserver/gwc/service/tms/1.0.0/${workspace}:${layerId}@EPSG:900913@pbf/{z}/{x}/{y}.pbf?buffer=64`;
|
||||
let bb = Vue.config.boundsInfoList.find(x => x.layerName.toLowerCase() == `${workspace}:${layerId}`.toLocaleLowerCase());
|
||||
let bounds = bb ? bb.bounds : null;
|
||||
if (bounds) {
|
||||
|
|
@ -420,9 +421,20 @@ export function showSampleStationInfo(layerId, mapId = "homeMap", callbackOnClic
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示高亮样品信息弹窗
|
||||
* @param {Object} params - 参数对象
|
||||
* @param {string} params.mapId - 地图实例ID
|
||||
* @param {string} params.job_type - 作业类型（"测线作业"或"站位作业"）
|
||||
* @param {Object} params.sample - 样品数据对象
|
||||
* @param {string} params.layerId - 图层ID
|
||||
* @param {string} params.sourceLayerId - 源图层ID
|
||||
* @param {Function} params.callbackOnClick - 关闭弹窗时的回调函数
|
||||
*/
|
||||
export function showHighlightSampleInfo({ mapId, job_type, sample, layerId, sourceLayerId, callbackOnClick }) {
|
||||
let description = "";
|
||||
let coordinate;
|
||||
// 根据作业类型生成对应的信息弹窗内容
|
||||
if (job_type == "测线作业") {
|
||||
// // 恢复其它测线的线宽
|
||||
// // setMapPaintProperty({ mapId, property: "line-width", value: lineWidthExpression });
|
||||
|
|
@ -441,11 +453,7 @@ export function showHighlightSampleInfo({ mapId, job_type, sample, layerId, sour
|
|||
// { hover: true }
|
||||
// );
|
||||
|
||||
// if (lastLineId)
|
||||
// Vue.config.maps[mapId].setPaintProperty(lastLineId, 'line-color', '#FFFFFF')
|
||||
// Vue.config.maps[mapId].setPaintProperty(layerId, 'line-color', '#FFFF00')
|
||||
// lastLineId = layerId;
|
||||
|
||||
// 测线坐标取起止点中点
|
||||
coordinate = [(Number(sample.start_lon) + Number(sample.end_lon)) / 2, (Number(sample.start_lat) + Number(sample.end_lat)) / 2];
|
||||
description = `
|
||||
<table class="popup-table" style="min-width:380px;">
|
||||
|
|
@ -483,6 +491,7 @@ export function showHighlightSampleInfo({ mapId, job_type, sample, layerId, sour
|
|||
</tr>
|
||||
</table>`;
|
||||
}
|
||||
// 站位作业：使用采样点坐标，生成站位信息表格
|
||||
else if (job_type == "站位作业") {
|
||||
coordinate = [sample.sampling_lon, sample.sampling_lat];
|
||||
description = `
|
||||
|
|
@ -510,9 +519,10 @@ export function showHighlightSampleInfo({ mapId, job_type, sample, layerId, sour
|
|||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">备注信息: <b>${sample.sample_remark}</b></td>
|
||||
</tr>
|
||||
</tr>
|
||||
</table>`;
|
||||
}
|
||||
// 调用弹窗工具显示详情
|
||||
showPopupDetails({ mapId, coordinate, description, maxWidth: "450px", callbackOnClose: callbackOnClick });
|
||||
}
|
||||
|
||||
|
|
@ -529,7 +539,7 @@ export function showTrackInfo(layerId, mapId = "homeMap") {
|
|||
let match = layerId.match(/vector-(.*)-[(symbol)|(line)]/);
|
||||
if (!match)
|
||||
return;
|
||||
const voyageId = match[1];
|
||||
const voyageId = getKeyByValue(Vue.config.layers,match[1]);
|
||||
regInfo({ voyage_name: voyageId }).then(res => {
|
||||
const info = res.map.voyage;
|
||||
const description = `
|
||||
|
|
@ -751,4 +761,45 @@ export async function highlightFeaturesByProperty(mapId, sourceId, layerId, prop
|
|||
'#FFFFFF', // 高亮颜色
|
||||
"#FF0000"// 默认颜色
|
||||
]);
|
||||
}
|
||||
|
||||
export async function getGeoserverCapabilities() {
|
||||
const url = `${Vue.config.baseUrl}/geoserver/ows?service=WMS&version=1.3.0&request=GetCapabilities`;
|
||||
// const url = `http://10.1.51.150:8080/geoserver/ows?service=WMS&version=1.3.0&request=GetCapabilities`;
|
||||
const xmlContent = await fetch(url
|
||||
, {
|
||||
headers: {
|
||||
// 'Authorization': `Basic ${btoa(`${Vue.config.username}:${Vue.config.password}`)}`,
|
||||
'Accept': 'application/vnd.ogc.sld+xml'
|
||||
}
|
||||
})
|
||||
.then(response => response.text())
|
||||
.then(xml => xml);
|
||||
const parser = new DOMParser();
|
||||
const xmlDoc = parser.parseFromString(xmlContent, "text/xml");
|
||||
|
||||
const layerInfoList = [];
|
||||
const layers = xmlDoc.getElementsByTagName("Layer");
|
||||
|
||||
// 遍历所有 Layer 元素，提取图层信息
|
||||
for (let i = 0; i < layers.length; i++) {
|
||||
const layer = layers[i];
|
||||
|
||||
// 提取 Name
|
||||
const nameElement = layer.getElementsByTagName("Name")[0];
|
||||
const name = nameElement ? nameElement.textContent || "" : "";
|
||||
if (!name) continue;
|
||||
|
||||
// 提取 Title
|
||||
const titleElement = layer.getElementsByTagName("Title")[0];
|
||||
const title = titleElement ? titleElement.textContent || "" : "";
|
||||
if (!title || title === "sea_ice" || title === "north magnetic pole") continue;
|
||||
|
||||
Vue.config.layers[title] = name.split(':')[1];
|
||||
}
|
||||
console.log(Vue.config.layers);
|
||||
}
|
||||
|
||||
function getKeyByValue(obj, value) {
|
||||
return Object.keys(obj).find(key => obj[key] === value);
|
||||
}
|
||||
Loading…
Reference in New Issue