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

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

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

<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script> <script type="text/javascript" exclude="iclient-classic" include="tianditu" src="../../dist/classic/include-classic.js"></script> <script type="text/javascript">var map, tiandituLayer;map = new SuperMap.Map("map", {controls: [new SuperMap.Control.Navigation(),new SuperMap.Control.Zoom(),new SuperMap.Control.LayerSwitcher()], allOverlays: true});tiandituLayer = new SuperMap.Layer.WMTS({name: "myvec1",url: "https://t0.tianditu.gov.cn/vec_c/wmts?tk=1d109683f4d84198e37a38c442d68311",layer: "vec",style: "default",matrixSet: "c",format: "tiles",opacity: 1,requestEncoding: "KVP"});map.addControl(new SuperMap.Control.MousePosition());map.addLayers([tiandituLayer]);map.setCenter(new SuperMap.LonLat(113, 29), 10);</script>

首先包含超图的相关库；

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；

总结

以上是生活随笔为你收集整理的超图js版 iclient 基本开发 - 加载基本图层（以天地图示例）和基本地图控件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。