超图js版 iclient 基本开发 - 加载基本图层（以天地图示例）和基本地图控件

青旅半醒 2022-12-27 14:24 143阅读 0赞

以超图的在线示例来学习；运行之后如下；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 1][]

原网址代码比较长一些；先把多的去掉；看一下基本的加载图层和地图控件的概念；

首先包含超图的相关库；

map，地图变量；tiandituLayer，图层变量，代表一个图层；

先new一个map对象，类名是SuperMap.Map；controls:\[ \]，这里面是map上的控件；代码new了三个地图控件；

第一个导航控件；如无此控件，则不能使用鼠标拖动地图；

第二个是缩放控件；左上角，加号减号的这个；点加号放大地图，点减号缩小地图；

第三个是图层切换控件；右上角这个；鼠标移上去会显示所有图层名称；当前只有一个图层；点击每个图层名前面的checkbox，可隐藏或显示该图层；

还有其他几个map控件，自己根据需要添加；

allOverlays，为true允许图层层叠；

下面，new一个图层对象；天地图是超图外部的；其图层类别为SuperMap.Layer.WMTS；图层类别有多种，自己根据需要选择；

第一个参数，图层名，自定义；

第二个参数，图层的url，可以是自己发布出来的地图服务，这里是天地图的url；

后面是一些属性定义；

map.addControl，添加其他控件到map上；SuperMap.Control.MousePosition()这个控件，功能是随着鼠标在地图上移动，在地图右下角显示当前鼠标位置的经纬度；我以前初做市，不知道有此控件，还自己写了段代码，随着鼠标移动来显示当前点的经纬度；用这个控件就可以了；

map.addLayers，添加图层到map； \[...\]里面，可以放多个图层变量；以逗号分割；

map.setCenter，设置地图中心点的经纬度；10 是缩放级别；

第一个图是缩放级别10，第二个图是缩放级别15；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70]: /images/20221120/17c15567672d4b2492db20b99ad5c316.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9ibzIxY24_size_16_color_FFFFFF_t_70 1]: /images/20221120/9ce547fa799643779e16f12ee62b3998.png