代码拉取完成，页面将自动刷新
<!--********************************************************************
* Copyright© 2000 - 2026 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入
* Leaflet.draw (https://github.com/Leaflet/Leaflet.draw/)
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_singleObjectQueryJobService"></title>
<script type="text/javascript" include="jquery,bootstrap,widgets" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript" include="leaflet.draw" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
var layer, processingService,
processingUrl = host + "/iserver/services/distributedanalyst/rest/v1/jobs",
mapURL = host + "/iserver/services/map-world/rest/maps/World",
map = L.map('map', {
crs: L.CRS.EPSG4326,
center: [40.75, -73.95],
maxZoom: 18,
zoom: 12
}),
info = L.control({
position: 'topright'
});
new L.supermap.TiledMapLayer(mapURL).addTo(map);
processingService = new L.supermap.ProcessingService(processingUrl, {
withCredentials: window.isLocal
});
L.supermap.SecurityManager.registerToken(processingUrl, window.exampleToken);
var drawLayer = new L.FeatureGroup();
map.addLayer(drawLayer);
var options = {
position: 'topleft',
draw: {
polygon: true,
circle: false,
rectangle: false,
marker: false,
polyline: false,
circlemarker: false,
remove: true
},
edit: {
featureGroup: drawLayer,
remove: true
}
};
var drawControl = new L.Control.Draw(options);
handleMapEvent(drawControl._container, map);
map.on(L.Draw.Event.CREATED, function (e) {
drawLayer.addLayer(e.layer);
});
initForm();
bindClick();
function initForm() {
info = L.control({
position: 'topright'
});
info.onAdd = function () {
var popup = L.DomUtil.create('div');
popup.style.width = '350px';
popup.innerHTML = "<div class='panel panel-default'>" +
"<div class='panel-heading'>" +
"<h3 class='panel-title'>" + resources.title_singleObjectQueryJobService + "</h3>" +
"</div>" +
"<div class='panel-body'>" +
"<div class='input-group'>" +
"<span class='input-group-addon'>" + resources.text_sourceDataset + "<span title='" + resources
.text_requiredField + "' style='color: red;'> * </span> </span>" +
"<input id='datasetName' type='text' class='form-control' " +
"value='samples_processing_newyorkZone_R'/>" +
"</div><p></p>" +
"<div class='input-group'>" +
"<span class='input-group-addon'>" + resources.text_queryObjectMode + "<span title='" +
resources.text_requiredField + "' style='color: red;'> * </span></span>" +
"<select class='form-control' id='queryMode' name='queryMode'>" +
"<option value='DATASET' selected>" + resources.text_dataset + "</option>" +
"<option value='GEOJSON'>Geojson</option>" +
"</select>" +
"</div><p></p>" +
"<div class='input-group' id='datasetDiv'>" +
"<span class='input-group-addon'>" + resources.text_queryObjectDataset + "<span title='" +
resources.text_requiredField + "' style='color: red;'> * </span></span>" +
"<input id='datasetQuery' type='text' class='form-control' " +
"value='samples_processing_singleRegion_R'/>" +
"</div><p></p>" +
"<div class='input-group'>" +
"<span class='input-group-addon'>" + resources.text_boundsQueryMode + "<span title='" +
resources.text_requiredField + "' style='color: red;'> * </span></span>" +
"<select class='form-control' id='mode' name='mode'>" +
"<option value='CONTAIN'>" + resources.text_contain + "</option>" +
"<option value='CROSS'>" + resources.text_cross + "</option>" +
"<option value='DISJOINT'>" + resources.text_disjoint + "</option>" +
"<option value='IDENTITY'>" + resources.text_Identity + "</option>" +
"<option value='INTERSECT' selected>" + resources.text_intersect + "</option>" +
"<option value='OVERLAP'>" + resources.text_overlap + "</option>" +
"<option value='TOUCH'>" + resources.text_touch + "</option>" +
"<option value='WITHIN'>" + resources.text_within + "</option>" +
"</select>" +
"</div><p></p>" +
"<div align='right'>" +
"<input type='button' id='btn' class='btn btn-primary' value='" + resources.btn_query + "'/>" +
"</div></div></div>";
handleMapEvent(popup, this._map);
return popup;
};
info.addTo(map);
$("#queryMode").change(function () {
var queryMode = $(this).val();
if (queryMode === "DATASET") {
map.removeControl(drawControl);
$('#datasetDiv').show();
}
if (queryMode === "GEOJSON") {
map.addControl(drawControl);
$('#datasetDiv').hide();
}
});
}
function bindClick() {
$('#btn').on('click', function () {
widgets.alert.clearAlert();
widgets.loader.showLoader();
if (map && layer) {
map.removeLayer(layer);
}
queryJobs();
});
}
function queryJobs() {
var points, queryParam;
if ($("#queryMode").val() === "DATASET") {
queryParam = $('#datasetQuery').val();
points = [];
}
if ($("#queryMode").val() === "GEOJSON") {
var result = drawLayer.toGeoJSON();
if (result.features.length > 1) {
widgets.loader.removeLoader();
widgets.alert.showAlert(resources.msg_createFailed + "<br>" + resources.msg_singleSideQuery, false);
return;
} else {
if (result.features.length < 1) {
widgets.loader.removeLoader();
widgets.alert.showAlert(resources.msg_createFailed + "<br>" + resources.msg_drawQueryBounds,
false);
return;
} else {
points = result.features[0].geometry.coordinates[0];
queryParam = "";
}
}
}
var singleObjectQueryJobsParameter = new L.supermap.SingleObjectQueryJobsParameter({
datasetName: $('#datasetName').val(),
datasetQuery: queryParam,
geometryQuery: points,
mode: $('#mode option:selected').attr('value')
});
processingService.addQueryJob(singleObjectQueryJobsParameter, function (serviceResult) {
if (serviceResult.error) {
widgets.loader.removeLoader();
var errorMsg = serviceResult.error.errorMsg || "code: " + serviceResult.error.code;
widgets.alert.showAlert(resources.msg_createFailed + "<br>" + errorMsg, false);
return;
}
serviceResult.result.setting.serviceInfo.targetServiceInfos.map(function (info) {
if (info.serviceType === 'RESTMAP') {
L.supermap.FetchRequest.get(info.serviceAddress + '/maps').then(function (
response) {
return response.json();
}).then(function (result) {
var mapUrl = result[0].path;
layer = new L.supermap.TiledMapLayer(mapUrl, {
noWrap: true,
transparent: true
});
layer.addTo(map);
widgets.loader.removeLoader();
});
}
});
});
}
function handleMapEvent(div, map) {
if (!div || !map) {
return;
}
div.addEventListener('mouseover', function () {
map.dragging.disable();
map.scrollWheelZoom.disable();
map.doubleClickZoom.disable();
});
div.addEventListener('mouseout', function () {
map.dragging.enable();
map.scrollWheelZoom.enable();
map.doubleClickZoom.enable();
});
$("#model").on('shown.bs.modal', function () {
map.dragging.disable();
map.scrollWheelZoom.disable();
map.doubleClickZoom.disable();
});
$("#model").on('hidden.bs.modal', function () {
map.dragging.enable();
map.scrollWheelZoom.enable();
map.doubleClickZoom.enable();
})
}
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手