运行第一个SuperMap iClient for OpenLayers示例程序-展示4326地图

待我称王封你为后i 2021-09-30 12:52 303阅读 0赞

一，官网下载开发包

下载地址 [http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/web/download/download.html][http_support.supermap.com.cn_8090_iserver_iClient_forJavaScript_web_download_download.html]

SuperMap iClient for OpenLayers官网：[http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/web/introduction/openlayersDevelop.html][http_support.supermap.com.cn_8090_iserver_iClient_forJavaScript_web_introduction_openlayersDevelop.html]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]![20190805092908370.png][]

二，运行

找到“01\_tiledMapLayer4326.html”，双击打开即可

![20190803104755185.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

01\_tiledMapLayer4326.html源码：此源码是刚刚下载的开发包里面的代码，未经任何修改

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title data-i18n="resources.title_tiledMapLayer4326"></title>
        <script type="text/javascript" src="../js/include-web.js"></script>
        <script type="text/javascript" src="../../dist/openlayers/include-openlayers.js"></script>
    </head>
    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
    <div id="map" style="width: 100%;height:100%"></div>
    <script type="text/javascript"> var map, url = (window.isLocal ? window.server : "http://support.supermap.com.cn:8090")+"/iserver/services/map-world/rest/maps/World"; map = new ol.Map({ target: 'map', controls: ol.control.defaults({ attributionOptions: { collapsed: false}}) .extend([new ol.supermap.control.Logo()]), view: new ol.View({ center: [0, 0], zoom: 2, projection: 'EPSG:4326' }) }); var layer = new ol.layer.Tile({ source: new ol.source.TileSuperMapRest({ url: url, wrapX: true }), projection: 'EPSG:4326' }); map.addLayer(layer); map.addControl(new ol.supermap.control.ScaleLine()); </script>
    </body>
    </html>

经过测试，我发现除了使用上面这种方式引入js文件，还有几种引入.js文件的方式，如下：

1，使用**本地地址**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

2，使用**站点地址**

**但是注意，无论使用哪种地址（本地/站点），html文件都需要放在下面这个文件夹里面！！！运行时才会显示出地图：D:\\supermap\_iclient\_912\\examples\\openlayers**

![20190805094528729.png][]![wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==][wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw]

[http_support.supermap.com.cn_8090_iserver_iClient_forJavaScript_web_download_download.html]: http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/web/download/download.html
[http_support.supermap.com.cn_8090_iserver_iClient_forJavaScript_web_introduction_openlayersDevelop.html]: http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/web/introduction/openlayersDevelop.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190803104658972.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20190805092908370.png]: /images/20210724/c6381adbf9754fd991ead42834926a04.png
[20190803104755185.png]: /images/20210724/2340dcf1b9ff412c856cd5c8b6bfa06f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210724/7c037ce7638f4836bf65a11353590a29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190805092753919.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: /images/20210724/b7ccfb8e3b644b36ba87283ead9fc4d4.png
[20190805094528729.png]: https://img-blog.csdnimg.cn/20190805094528729.png
[wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw]: