目录
前言
一、所需数据及发布服务
1、数据准备
2、地图展示
二、Cesium.SuperMapImageryProvider 接口
三、相关代码
前言
实现地图下钻功能可以提供更详细的地理信息、支持交互式探索、展示层级关联的数据和提供数据分析决策支持等优势。通过点击地图上的区域或点，用户可以获取更详细的地理数据，并可以根据自己的需求和兴趣，在地图上逐层深入查看和分析不同地理区域的数据。这种交互式的探索体验可以帮助用户更好地了解、比较和对比不同地区的数据，从而支持更深入的分析和决策。在地理信息系统、数据可视化和空间分析等领域中，地图下钻功能具有广泛的用途和需求。
一、所需数据及发布服务
1、数据准备
需要准备好地图数据，包括各个层级的地理数据和相应的标识码（ADCODE）方便进行查询：ADCODE（本层级代码）、PARENT（上一层级代码）
2、地图展示
使用iDesktop制作相应的地图，并在iserver中发布需要进行数据查询的数据服务，和省级、市级、县级地图服务
二、Cesium.SuperMapImageryProvider 接口
Cesium.SuperMapImageryProvider 是 CesiumJS 中用于集成 SuperMap 地图服务的接口，可以在 Cesium 地球上加载 SuperMap 发布的影像地图服务。该接口可以通过指定 SuperMap 服务的 URL、访问令牌、影像图层名称等参数来创建一个影像地图图层，这样就能够在 Cesium 地球上显示 SuperMap 提供的影像地图服务。
以下是 Cesium.SuperMapImageryProvider 的一些常见属性和方法：
layerStatusParameters： 是一个包含图层状态参数的对象。这些参数可能包括图层名称、可见性、透明度等信息，用于配置加载的影像地图图层的状态。
通过使用 Cesium.SuperMapImageryProvider，可以方便地在 Cesium 中集成 SuperMap 的影像地图服务，并进行地图显示和交互操作。
三、相关代码
首先定义了一个 urlConfig 对象，包含了不同类型地图服务的 URL 地址。接着定义了一些变量，包括 levelCode、tempAdcode、codeList，用于控制加载地图的级别和区域编码。然后调用 loadMap 函数加载地图。这个函数接受两个参数：type 是地图类型，根据 codeList[levelCode] 的值来确定；layerStatus 是图层状态参数，用于配置加载的影像地图图层的状态。
let urlConfig = {
queryUrl: 'http://localhost:8090/iserver/services/data-china/rest/data/featureResults.rjson?returnContent=true',
Province: 'http://localhost:8090/iserver/services/map-china/rest/maps/Province%40china',
City: 'http://localhost:8090/iserver/services/map-china/rest/maps/City%40china',
County: 'http://localhost:8090/iserver/services/map-china/rest/maps/County%40china'
};
let levelCode = 0,
tempAdcode = ['100000'],
codeList = ['Province', 'City', 'County', 'County'];
let currentLayer = loadMap(codeList[levelCode]);
console.log(currentLayer)
let labels = [];
let supportCodeList = ['320000', '340000', '320200', '320500', '340100', '341100', '320505', '320506', '320507', '320508', '320509', '320581', '320582', '320583', '320585', '320205', '320206', '320211', '320213', '320214', '320281', '320282'];
initEvent();
function loadMap(type, layerStatus) {
//添加图层
let imageProvider = new Cesium.SuperMapImageryProvider({
url: urlConfig[type],
layerStatusParameters: layerStatus
});
let layer = new Cesium.ImageryLayer(imageProvider);
viewer.imageryLayers.add(layer);
return layer;
}该段代码发送一个 POST 请求到指定的 URL（urlConfig['queryUrl']），请求参数为 queryObj 对象的 JSON 字符串。请求的数据类型为 JSON，异步请求。当请求成功时，根据返回的结果进行处理。如果 res.features 存在并且 levelCode 小于 2，则从响应结果中获取第一个 feature，提取其 ADCODE 并判断是否在 supportCodeList 中。如果存在，则增加 levelCode 值，移除当前图层，加载对应的地图，并根据获取的 ADCODE 显示地图区域。如果 levelCode 等于 2，则直接加载对应的地图，不需要根据 ADCODE 进行筛选显示。如果不满足以上条件，则给出警告提示。文章来源：https://www.toymoban.com/news/detail-774272.html
function initEvent() {
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(movement => {
if (levelCode === 3) {
return;
}
let positions = viewer.scene.pickPosition(movement.position);
if (!positions) {
return;
}
let position = new Cesium.Cartesian3(positions.x, positions.y, positions.z);
let cartographic = Cesium.Cartographic.fromCartesian(positions);
let lon = Number(Cesium.Math.toDegrees(cartographic.longitude).toFixed(6)); // 经度
let lat = Number(Cesium.Math.toDegrees(cartographic.latitude).toFixed(6)); // 纬度
let height = cartographic.height; // 高度
position = [lon, lat, height];
var queryObj = {
getFeatureMode: 'SPATIAL',
spatialQueryMode: 'INTERSECT',
datasetNames: ["china:" + codeList[levelCode]],
geometry: createPointGeometry(position),
hasGeometry: true,
queryParameter: {},
fields: ['ADCODE', 'NAME']
};
$.ajax({
url: urlConfig['queryUrl'],
type: 'POST',
data: JSON.stringify(queryObj),
dataType: 'json',
async: true,
success: res => {
if (res && res.features) {
if (levelCode < 2) {
let feature = res.features[0];
let adcode = feature.fieldValues[feature.fieldNames.indexOf('ADCODE')];
if (supportCodeList.indexOf(adcode) !== -1) {
levelCode++;
currentLayer && viewer.imageryLayers.remove(currentLayer, true);
tempAdcode.push(adcode);
currentLayer = loadMap(codeList[levelCode], [
{
layerName: codeList[levelCode] + '@china',
isVisible: true,
displayFilter: "PARENT='" + adcode + "'"
}
]);
} else {
console.warn('因数据量原因，暂不支持此行政区划，目前仅支持江苏苏州、江苏无锡、安徽合肥、安徽滁州区域!');
}
} else if (levelCode == 2) {
let feature = res.features[0];
let adcode = feature.fieldValues[feature.fieldNames.indexOf('ADCODE')];
if (supportCodeList.indexOf(adcode) !== -1) {
levelCode++;
currentLayer && viewer.imageryLayers.remove(currentLayer, true);
tempAdcode.push(adcode);
currentLayer = loadMap(codeList[levelCode], [
{
layerName: codeList[levelCode] + '@china',
isVisible: true,
displayFilter: 'ADCODE=' + adcode
}
]);
} else {
console.warn('因数据量原因，暂不支持此行政区划');
}
}
}
}
});
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
当点击返回按钮时，会执行back()函数，返回上一层级。首先，它会检查levelCode的值是否为1，如果是，则会移除当前图层，并加载上一层级的地图。然后，它会通过tempAdcode.pop()方法将数组tempAdcode中的最后一个元素移除。如果levelCode不为1，那么它会继续判断tempAdcode数组的长度是否大于0，如果是，则使用tempAdcode.pop()方法将数组tempAdcode中的最后一个元素移除。使用tempAdcode.splice(levelCode, 1)方法将tempAdcode数组中索引为levelCode的元素移除。如果levelCode大于1，levelCode减1，并移除当前图层，加载上一层级的地图。文章来源地址https://www.toymoban.com/news/detail-774272.html
$('.back').on('click', () => {
back();
});
// 返回上一层级
function back() {
if (levelCode === 1) {
currentLayer && viewer.imageryLayers.remove(currentLayer, true);
currentLayer = loadMap(codeList[levelCode - 1]);
levelCode = 0;
tempAdcode.pop();
return;
}
if (tempAdcode.length > 0) {
tempAdcode.pop();
}
tempAdcode.splice(levelCode, 1);
if (levelCode > 1) {
levelCode--;
currentLayer && viewer.imageryLayers.remove(currentLayer, true);
currentLayer = loadMap(codeList[levelCode], [
{
layerName: codeList[levelCode] + '@china',
isVisible: true,
displayFilter: 'PARENT=' + tempAdcode[levelCode]
}
]);
};
}到了这里，关于SuperMap iClient3D for Cesium 实现图层下钻功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
