超图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 基本开发 - 加载基本图层（以天地图示例）和基本地图控件相关推荐

树的懒加载怎么用ajax调接口,ElementUI tree树形控件的懒加载使用
先看效果: image 1.界面中: :data="treeData" :props="defaultProps" :load="loadNode&q ...
Three.js - MapControls 地图控件
THREE.MapControls()地图控件,如果查看类似地图模型或者不希望用户对模型进行反转的时候可以使用这个控件,这个控件是three.jsr94版本徐新添加的. 1.示例 https://it ...
html文件显示不了box,Workbox.js registerNavigationRoute找不到/加载html文件
我几乎完全设置为具有应用程序shell体系结构的pwa,使用像前端(但使用mithril作为渲染引擎)的反应,并使用express node.js后端和ssr,但努力在最后一个问题上过去.Workbo ...
Windows下使用apache模块实现合并多个js、css提高网页加载速度
这篇文章主要介绍了Windows下使用apache模块实现合并多个js.css提高网页加载速度,本文使用的模块是基于mod_concat自己修改的,需要的朋友可以参考下现在的网站表现力越来越丰富,页 ...
JS实现刷新_重新加载页面
问题解决: 在JS代码中加入下面语句 location.reload(); //实现页面重新加载 1 之前遇到的问题:浏览器清缓存 http://blog.csdn.net/icecoola_/art ...
如何使用echo.js实现图片的懒加载（整理）
如何使用echo.js实现图片的懒加载(整理) 一.总结一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...
【Android 安全】DEX 加密 ( 代理 Application 开发 | 加载 dex 文件 | 将系统的 dexElements 与应用的 dexElements 合并 | 替换操作 )
文章目录一.将系统的 dexElements 与应用的 dexElements 合并二.Element[] dexElements 替换操作三.完整 dex 加载源码参考博客 : [Andr ...
【Android 安全】DEX 加密 ( 代理 Application 开发 | 加载 dex 文件 | 使用反射获取方法创建本应用的 dexElements | 各版本创建 dex 数组源码对比 )
文章目录一.不同 Android 系统创建 dex 数组源码对比二.不同 Android 系统创建 dex 数组源码对比三. Android 5.1 及以下系统反射方法并创建 Element[] ...
ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler
ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler, 使用<link type="text/css" rel="Stylesheet" ...

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

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

最新文章

热门文章