Skip to content

Commit 431a1e3

Browse files
chenxianhuiichenxianhuii
committed
[update]更新海图S100系列参数，增加获取S100参数接口
1 parent a1d067e commit 431a1e3

26 files changed

+5427
-1461
lines changed

‎examples/leaflet/01_chartService.html‎

Lines changed: 166 additions & 145 deletions
Large diffs are not rendered by default.

‎examples/mapboxgl/01_chartService.html‎

Lines changed: 158 additions & 136 deletions
Large diffs are not rendered by default.

‎examples/maplibregl/01_chartService.html‎

Lines changed: 158 additions & 136 deletions
Large diffs are not rendered by default.

‎examples/openlayers/01_chartService.html‎

Lines changed: 151 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
}
2525

2626
.setting-title {
27-
padding-bottom: 4px;
27+
padding: 4px;
2828
text-align: left;
2929
}
3030

@@ -216,6 +216,16 @@
216216
#datetimepicker {
217217
width: 160px;
218218
}
219+
220+
#settings .chartseting-panel-heading {
221+
margin: 10px 0;
222+
font-weight: bold;
223+
cursor: pointer;
224+
}
225+
.chartseting-panel-heading:not(.collapsed) .collapse-icon {
226+
display: inline-block;
227+
rotate: 90deg;
228+
}
219229
</style>
220230
</head>
221231

@@ -257,98 +267,6 @@
257267
<div class="tab-content">
258268
<!-- 海图设置面板 -->
259269
<div class='panel-body content tab-pane active' id="settings">
260-
<div class='input-group'>
261-
<span class='input-group-addon'>FourShades</span>
262-
<select id='fourShades' class='form-control'>
263-
<option value="true">Four Shades</option>
264-
<option value="false" selected>Two Shades</option>
265-
</select>
266-
</div>
267-
<div class='input-group'>
268-
<span class='input-group-addon'>ShallowWaterDangers</span>
269-
<select id='shallowWaterDangers' class='form-control'>
270-
<option value="true" data-i18n="resources.text_true" selected>TRUE</option>
271-
<option value="false" data-i18n="resources.text_false">FALSE</option>
272-
</select>
273-
</div>
274-
<div class='input-group'>
275-
<span class='input-group-addon'>PlainBoundaries</span>
276-
<select id='plainBoundaries' class='form-control'>
277-
<option value="true" data-i18n="resources.text_true" selected>TRUE</option>
278-
<option value="false" data-i18n="resources.text_false">FALSE</option>
279-
</select>
280-
</div>
281-
<div class='input-group'>
282-
<span class='input-group-addon'>SimplifiedSymbols</span>
283-
<select id='simplifiedSymbols' class='form-control'>
284-
<option value="true" data-i18n="resources.text_true">TRUE</option>
285-
<option value="false" data-i18n="resources.text_false" selected>FALSE</option>
286-
</select>
287-
</div>
288-
<div class='input-group'>
289-
<span class='input-group-addon'>FullLightLines</span>
290-
<select id='fullLightLines' class='form-control'>
291-
<option value="true" data-i18n="resources.text_true">TRUE</option>
292-
<option value="false" data-i18n="resources.text_false" selected>FALSE</option>
293-
</select>
294-
</div>
295-
<div class='input-group'>
296-
<span class='input-group-addon'>RadarOverlay</span>
297-
<select id='radarOverlay' class='form-control'>
298-
<option value="true" data-i18n="resources.text_true">TRUE</option>
299-
<option value="false" data-i18n="resources.text_false" selected>FALSE</option>
300-
</select>
301-
</div>
302-
<div class='input-group'>
303-
<span class='input-group-addon'>IgnoreMinScale</span>
304-
<select id='ignoreScamin' class='form-control'>
305-
<option value="true" data-i18n="resources.text_true">TRUE</option>
306-
<option value="false" data-i18n="resources.text_false" selected>FALSE</option>
307-
</select>
308-
</div>
309-
<div class='input-group'>
310-
<span class='input-group-addon'>ColorScheme</span>
311-
<select id='colorScheme' class='form-control'>
312-
<option value="DAY" selected>DAY</option>
313-
<option value="DUSK">DUSK</option>
314-
<option value="NIGHT">NIGHT</option>
315-
</select>
316-
</div>
317-
<div class='input-group'>
318-
<span class='input-group-addon'>SafetyContour</span>
319-
<input type='number' class='form-control' id='safetyContour' value='15' />
320-
</div>
321-
<div class='input-group'>
322-
<span class='input-group-addon' data-i18n="resources.text_shallowContour">ShallowContour</span>
323-
<input type='number' class='form-control' id='shallowContour' value='2' />
324-
</div>
325-
<div class='input-group'>
326-
<span class='input-group-addon' data-i18n="resources.text_deepContour">DeepContour</span>
327-
<input type='number' class='form-control' id='deepContour' value='30' />
328-
</div>
329-
<div class='input-group'>
330-
<span class='input-group-addon' data-i18n="resources.text_safetyDepth">SafetyDepth</span>
331-
<input type='number' class='form-control' id='safetyDepth' value='30' />
332-
</div>
333-
<div class='panel'>
334-
<div data-i18n="resources.text_filterSetting" class="setting-title">互操作设置</div>
335-
<div class='input-group'>
336-
<span class='input-group-addon'>互操作</span>
337-
<select id='s98InteroperableEnable' class='form-control'>
338-
<option value="true" data-i18n="resources.text_true">是</option>
339-
<option value="false" data-i18n="resources.text_false" selected>否</option>
340-
</select>
341-
</div>
342-
<div class='input-group'>
343-
<span class='input-group-addon'>互操作等级</span>
344-
<select id='interoperabilityLevel' class='form-control'>
345-
<option value="0" data-i18n="resources.text_true" selected>L0</option>
346-
<option value="1" data-i18n="resources.text_false">L1</option>
347-
</select>
348-
</div>
349-
</div>
350-
<input type="button" class="btn btn-default" data-i18n="[value]resources.text_createChart" onclick="updateChartSetting()"
351-
value="应用" />
352270
</div>
353271
<!-- 点选查询面板 -->
354272
<div class="panel-body tab-pane" id="attrs">
@@ -566,18 +484,18 @@ <h5 class='panel-title text-center'>
566484
// S104水位查询，某个站点的全部时间要素
567485
var stationFeatures = [];
568486
var displayableAcronymClassify = {};
569-
var chartSetting = getChartSetting();
487+
// var chartSetting = getChartSetting();
570488
var source = new ol.source.TileSuperMapRest({
571489
url: url,
572-
chartSetting: chartSetting
490+
// chartSetting: chartSetting
573491
});
574492
var layer = new ol.layer.Tile({
575493
source: source,
576494
projection: 'EPSG:4326'
577495
});
578496
map.addLayer(layer);
579497

580-
changeDisplayModeChart();
498+
// changeDisplayModeChart();
581499

582500
function changeDisplayModeChart() {
583501
// 当将显示模式设置为OTHER时,是否显示水深点、是否显示元物标、是否显示其他等深线标注 才有效
@@ -587,36 +505,139 @@ <h5 class='panel-title text-center'>
587505
document.getElementById("displayOtherContourLabel").disabled = displayModeChart !== 'OTHER';
588506
}
589507

508+
function createChartSettingPanel(defaultChartSetting, maritimePcInfo) {
509+
const container = document.getElementById('settings');
510+
let htmlContent = '';
511+
const chartTypes = Object.keys(defaultChartSetting && defaultChartSetting.contextParameters || {});
512+
chartTypes.forEach((type, index) => {
513+
const collapseId = `collapse-${type}-${index}`; // 为每个类型生成唯一 ID
514+
htmlContent += `
515+
<div data-toggle='collapse'
516+
data-target='#${collapseId}'
517+
aria-expanded='true'
518+
class='chartseting-panel-heading'>
519+
<i class="collapse-icon"> > </i> Maritime${type}
520+
</div>
521+
<div id='${collapseId}' class='collapse in'> `;
522+
const PCVersion = defaultChartSetting.contextParameters[type].PCVersion;
523+
const S100Parameter = maritimePcInfo[PCVersion];
524+
S100Parameter.sort((a, b) => a.type.localeCompare(b.type));
525+
S100Parameter.forEach(item => {
526+
const domId = type + item.id;
527+
528+
// 1. 开始构建 input-group 容器
529+
htmlContent += `<div class='input-group'>`;
530+
htmlContent += `<span class='input-group-addon'>${item.name}</span>`;
531+
532+
// 2. 判断渲染逻辑
533+
// 情况 A: 有枚举值 或者 类型是布尔值 -> 渲染 Select
534+
if (item.contextParameterEnums || item.type === 'Boolean') {
535+
htmlContent += `<select id='${domId}' class='form-control'>`;
536+
537+
let options = [];
538+
if (item.contextParameterEnums) {
539+
// 使用提供的枚举值
540+
options = item.contextParameterEnums.map(opt => ({
541+
value: opt.id,
542+
text: opt.description
543+
}));
544+
} else if (item.type === 'Boolean') {
545+
// 基础布尔值，没有提供枚举时默认 TRUE/FALSE
546+
options = [
547+
{ value: "TRUE", text: "TRUE" },
548+
{ value: "FALSE", text: "FALSE" }
549+
];
550+
}
551+
552+
// 循环生成 Option
553+
options.forEach(opt => {
554+
const isSelected = item.defaultValue.toUpperCase() === opt.value.toUpperCase() ? 'selected' : '';
555+
htmlContent += `<option value="${opt.value}" ${isSelected}>${opt.text}</option>`;
556+
});
557+
558+
htmlContent += `</select>`;
559+
}
560+
// 情况 B: 类型是数值 (Double) -> 渲染 Input Number
561+
else if (item.type === 'Double') {
562+
htmlContent += `<input type='number' class='form-control' id='${domId}' value='${item.defaultValue}' />`;
563+
}
564+
565+
htmlContent += `</div>`;
566+
});
567+
htmlContent += `</div>`; // 闭合 collapse 容器
568+
});
569+
htmlContent += `
570+
<div class='panel'>
571+
<div data-i18n="resources.text_filterSetting" class="setting-title">互操作设置</div>
572+
<div class='input-group'>
573+
<span class='input-group-addon'>互操作</span>
574+
<select id='s98InteroperableEnable' class='form-control'>
575+
<option value="true" >是</option>
576+
<option value="false" selected>否</option>
577+
</select>
578+
</div>
579+
<div class='input-group'>
580+
<span class='input-group-addon'>互操作等级</span>
581+
<select id='interoperabilityLevel' class='form-control'>
582+
<option value="0" selected>L0</option>
583+
<option value="1">L1</option>
584+
</select>
585+
</div>
586+
</div>
587+
<input type="button" class="btn btn-default" onclick="updateChartSetting()" value="应用" />
588+
`;
589+
container.innerHTML = htmlContent;
590+
}
591+
592+
// 获取地图默认chartSetting
593+
function getMapDefaultChartSetting() {
594+
return new ol.supermap.MapService(url).getMapInfo().then(function(res) {
595+
return res.result && res.result.chartSetting;
596+
});
597+
}
598+
599+
600+
function getChartMaritimePcInfo() {
601+
getMapDefaultChartSetting().then(defaultChartSetting => {
602+
DefaultChartSetting = defaultChartSetting;
603+
chartService.getChartMaritimePcInfo().then(function(maritimePcInfo) {
604+
MaritimePcInfo = maritimePcInfo.result;
605+
createChartSettingPanel(defaultChartSetting, maritimePcInfo.result);
606+
updateChartSetting();
607+
});
608+
})
609+
}
610+
getChartMaritimePcInfo()
611+
590612
function getChartSetting() {
591-
var safetyContour = parseFloat(document.getElementById("safetyContour").value);
592-
var shallowContour = parseFloat(document.getElementById("shallowContour").value);
593-
var deepContour = parseFloat(document.getElementById("deepContour").value);
594-
var safetyDepth = parseFloat(document.getElementById("safetyDepth").value);
595-
var fourShades = document.getElementById("fourShades").value === "true";
596-
var shallowWaterDangers = document.getElementById("shallowWaterDangers").value === "true";
597-
var plainBoundaries = document.getElementById("plainBoundaries").value === "true";
598-
var simplifiedSymbols = document.getElementById("simplifiedSymbols").value === "true";
599-
var fullLightLines = document.getElementById("fullLightLines").value === "true";
600-
var radarOverlay = document.getElementById("radarOverlay").value === "true";
601-
var ignoreScamin = document.getElementById("ignoreScamin").value === "true";
602-
var colorScheme = document.getElementById("colorScheme").value;
603-
var s98InteroperableEnable = document.getElementById("s98InteroperableEnable").value === "true";
613+
const getValue = (id, type) => {
614+
const el = document.getElementById(id);
615+
if (!el) return undefined;
616+
const val = el.value;
617+
618+
switch (type) {
619+
case 'Double': return parseFloat(val);
620+
case 'Boolean': return val.toUpperCase() === "TRUE";
621+
default: return val;
622+
}
623+
};
624+
625+
const chartTypes = Object.keys(DefaultChartSetting.contextParameters || {});
626+
const contextParameters = {};
627+
chartTypes.forEach(type => {
628+
const PCVersion = DefaultChartSetting.contextParameters[type].PCVersion;
629+
const S100Parameter = MaritimePcInfo[PCVersion];
630+
contextParameters[type] = {};
631+
S100Parameter.forEach(item => {
632+
contextParameters[type][item.id] = getValue(type + item.id, item.type);
633+
});
634+
})
635+
// 其余属性
636+
var s98InteroperableEnable = document.getElementById("s98InteroperableEnable").value.toUpperCase() === "TRUE";
604637
var interoperabilityLevel = parseFloat(document.getElementById("interoperabilityLevel").value);
605638

606-
var chartSetting = new ol.supermap.ChartSettingS101({
607-
// chartType: 'S100',
608-
safetyDepth: safetyDepth,
609-
safetyContour: safetyContour,
610-
shallowContour: shallowContour,
611-
deepContour: deepContour,
612-
fourShades: fourShades,
613-
shallowWaterDangers: shallowWaterDangers,
614-
plainBoundaries: plainBoundaries,
615-
simplifiedSymbols: simplifiedSymbols,
616-
fullLightLines: fullLightLines,
617-
radarOverlay: radarOverlay,
618-
ignoreScamin: ignoreScamin,
619-
colorScheme: colorScheme,
639+
var chartSetting = new ol.supermap.ChartSettingS100({
640+
contextParameters: contextParameters,
620641
s98InteroperableEnable: s98InteroperableEnable,
621642
// edit 新增互操作等级
622643
interoperabilityLevel: interoperabilityLevel
@@ -798,7 +819,6 @@ <h5 class='panel-title text-center'>
798819
var tbody = document.createElement('tbody');
799820
table.append(tbody);
800821
_createTreeTable(featureProp, tbody);
801-
$('.tree').treegrid();
802822
}
803823

804824
// 创建点选后的UI
@@ -874,6 +894,7 @@ <h5 class='panel-title text-center'>
874894
})
875895
})
876896
})
897+
$('.tree').treegrid();
877898
document.querySelector('#groups li').classList.add('active');
878899
document.querySelector('#tablePanel .tab-pane').classList.add('active');
879900
}
@@ -952,10 +973,10 @@ <h5 class='panel-title text-center'>
952973
attributeFilter,
953974
featureCode,
954975
// 以下为S57参数
955-
chartFeatureInfoSpecCode: featureCode,
956-
isQueryPoint,
957-
isQueryLine,
958-
isQueryRegion
976+
// chartFeatureInfoSpecCode: featureCode,
977+
// isQueryPoint,
978+
// isQueryLine,
979+
// isQueryRegion
959980
});
960981
var chartQueryParameters = new ol.supermap.ChartQueryParameters({
961982
queryMode: "ChartAttributeQuery",
@@ -987,7 +1008,8 @@ <h5 class='panel-title text-center'>
9871008
X: X,
9881009
Y: Y
9891010
})
990-
chartService.getChartWaterDepth(chartWaterDepthParameter).then(function (topDatasetQuery) {
1011+
chartService.getChartWaterDepth(chartWaterDepthParameter).then(function (res) {
1012+
const topDatasetQuery = res.depth;
9911013
if (topDatasetQuery) {
9921014
var content = topDatasetQuery.result;
9931015
var datasetName = topDatasetQuery.options.scope.datasetName;

0 commit comments

Comments
 (0)