利用超图插件实现gis地图总结最近有个实现2D地图和3D地图的需求，我们是利用超图提供的相关插件来实现。官方地址：ht

最近有个实现2D地图和3D地图的需求，我们是利用超图提供的相关插件来实现。

官方地址：iclient.supermap.io/web/introdu…

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查询、缓冲区查询、范围查询等等，更详细的可以参考：iclient.supermap.io/examples/le…

具体使用方式：

<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。

文档地址：support.supermap.com.cn:8090/webgl/web/i…，support.supermap.com.cn:8090/webgl/docs/…

首先利用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;

具体可以参考官网这个例子：support.supermap.com.cn:8090/webgl/examp… 本人是刚开始接触gis，如果不当之处，勿喷，欢迎一起讨论学习。