最近有个实现2D地图和3D地图的需求，我们是利用超图提供的相关插件来实现。
官方地址：https://iclient.supermap.io/web/introduction/leafletDevelop.html
2D利用的是 leaflet。
具体的步骤可以参考官网的示例。这里建议尽量使用本地化，可以避免以后内网不能访问外网或者cdn失效的情况。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="/static/leaflet/leaflet.js"></script>
<script type="text/javascript" src="/static/leaflet/iclient-leaflet.min.js"></script>
</head>
</html>
需求中主要涉及到使用地图服务和数据查询服务。
加载地图服务相对来说比较简单，直接使用api就可以，也可以利用该api加载影像服务。具体方式如下：
L.supermap
.tiledMapLayer(url, {
serverType: SuperMap.ServerType.IPORTAL,
})
.addTo(onlineMap)
// 这里的url是要加载的地图服务对应的地址
// onlineMap就是开始初始化的map实例
使用数据查询服务，数据查询服务里面有几何查询，SQL查询、缓冲区查询、范围查询等等，更详细的可以参考：https://iclient.supermap.io/examples/leaflet/examples.html#iServer-data
具体使用方式：
<script type="text/javascript">
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
var map, resultLayer,
baseUrl = host + "/iserver/services/map-world/rest/maps/World",
url = host + "/iserver/services/data-world/rest/data";
map = L.map('map', {
preferCanvas: true,
crs: L.CRS.EPSG4326,
center: {lon: 0, lat: 0},
maxZoom: 18,
zoom: 1
});
new L.supermap.TiledMapLayer(baseUrl).addTo(map);
query();
function query() {
var sqlParam = new L.supermap.GetFeaturesBySQLParameters({
queryParameter: {
name: "Countries@World",
attributeFilter: "SMID = 234"
},
datasetNames: ["World:Countries"]
});
new L.supermap
.FeatureService(url)
.getFeaturesBySQL(sqlParam, function (serviceResult) {
// 在L.geoJSON中可以利用style来改变样式
resultLayer = L.geoJSON(serviceResult.result.features, {
style: function (feature) {
return {color: '#fffe00', weight: 1.5};
}
}).addTo(map).bindPopup('SMID = 234');
});
}
</script>
这里用的是官网的例子代码。例子中的‘Countries’是数据集信息中name字段，World是对应的数据集信息中的dataSourceName字段。
3D利用的是 Cesium。
文档地址：http://support.supermap.com.cn:8090/webgl/web/index.html，http://support.supermap.com.cn:8090/webgl/docs/Documentation/index.html
首先利用Cesium.CredentialSuperMap验证地图服务。
Cesium.Credential.CREDENTIAL = new Cesium.Credential([
{
rooturl: serviceUrl, // 这是服务url
type: 'key',
value: 'xxxx', // 这里填写密钥，如果不需要的可以不用填
},
]);
3D里面主要是加载影像服务：
var imagery = viewer.imageryLayers.addImageryProvider(
new Cesium.SuperMapImageryProvider({
url: serviceUrl // 影像服务地址
})
);
imagery.alpha = 1;
具体可以参考官网这个例子：http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#SuperMapTileImagery。本人是刚开始接触gis，如果不当之处，勿喷，欢迎一起讨论学习。
标签：supermap,插件,gis,map,url,html,超图,Cesium,new From： https://www.cnblogs.com/brucefq/p/16707005.html