SuperMap iClient for Leaflet入门学习

淡淡的烟草味﹌ 2022-12-29 01:52 157阅读 0赞

Leaflet是一个开源的地图Javascript库；

SuperMap iClient for Leaflet 在线示例；  
https://iclient.supermap.io/examples/leaflet/editor.html\#03\_themeGraduatedSymbol

下面来看一个入门例子；  
显示一幅中国地图；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70_pic_center]  
代码；

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
    </head>
    <body>
    <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
    <script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
    <script type="text/javascript">
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        var map, 
            url = host + "/iserver/services/map-china400/rest/maps/China";
        map = L.map('map', { 
            center: [39, 100],
            maxZoom: 18,
            zoom: 4
        });
        L.supermap.tiledMapLayer(url).addTo(map);
    
    </script>
    </body>
    </html>

看上去语法和iClient for javascript不同；  
创建地图控件使用 map = L.map(‘map’, …);  
中心点，center: \[39, 100\],  
缩放级别；  
maxZoom: 18,  
zoom: 4  
添加一个基本图层使用L.supermap.tiledMapLayer类的addTo()方法；url是发布出来的服务网址；  
L.supermap.tiledMapLayer(url).addTo(map);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/48a9f70165674d21be7613697a87b60e.png