以超图的在线示例来学习;运行之后如下;
原网址代码比较长一些;先把多的去掉;看一下基本的加载图层和地图控件的概念;
<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;