SuperMap iClient for JavaScript初入
- 作者: 五速梦信息网
- 时间: 2026年04月04日 13:25
SuperMap iClient for JavaScript初入
介绍SuperMap for Js的简单使用.
推荐先看下这篇文档:SuperMap iClient for JavaScript 新手入门 , 个人感觉是要好于官方的新手入门文档的.
使用SuperMap js 的核心流程如下:
- 创建地图Map
- 创建Layer /控件
- 创建要素 / Marker /..
- 将 要素 / Marker /.. 添加入图层 Layer
- 将图层添加入 Map
1.SuperMap下载
2.SuperMap简单地图加载
在仅使用Js 文件的情况下, 只需引入 SuperMap.Include.js 即可.
2.1 SuperMap云地图
<script type=“text/javascript”>
var map;<br/>
var layer, vectors, markers, imgMarker;<br/>
var vectorInfoWin, markerInfoWin;<br/>
onload = function init() {<br/>
//初始化地图对象。<br/>
//创建map 对象, 并且必须指定map 所在的div;<br/>
map = new SuperMap.Map("map");<br/>
//通过向SuperMap云服务器发送请求得到SuperMap云服务发布的图层。<br/>
//在Map中显示, 所有的元素都必须置于图层上, 必须创建图层;同时可以有多个图层;<br/>
layer = new SuperMap.Layer.CloudLayer();<br/>
//创建图层后必须将图层添加至对应的map中才可以显示出来;<br/>
map.addLayer(layer);<br/>
//设置中心点<br/>
//经纬度并非常规经纬度, 不是很明白是哪种;<br/>
map.setCenter(new SuperMap.LonLat(11339634.286396, 4588716.5813769), 4);<br/>
</script><br/>
<body><br/>
<div id="map"<br/>
style="position: absolute; left: 0px;<br/>
right: 0px; width: auto; height: 90%;"><br/>
</div><br/>
</body><br/>
通过这种方式就建立了一个最简单的云地图.
2.2 构建多种服务地图
构建多种服务地图仅需要将 layer = new SuperMap.Layer.CloudLayer(); 替换即可.
<script type=“text/javascript”>
//百度地图, 同样是沿用 CloudLayer() 的经纬度;<br/>
//layer = new SuperMap.Layer.Baidu();<br/>
//天地图, 经纬度好像还有区别, 不是很理解<br/>
//layer = new SuperMap.Layer.Tianditu();<br/>
//这一种方式也是我最后选取的方式, 使用常规经纬度即可<br/>
//初始化地图，所有图层都被当做叠加图层来使用。<br/>
map = new SuperMap.Map("map", { allOverlays: true });<br/>
//全球矢量底图服务。<br/>
layerBase = new SuperMap.Layer.WMTS({<br/>
name: "vec",//WMTS服务名称。<br/>
url: "http://t0.tianditu.com/vec_c/wmts",//WMTS图层的服务地址，必设属性。<br/>
layer: "vec", //图层名称。<br/>
style: "default", //发布的图层样式，默认为”default”。<br/>
matrixSet: "c", //发布的标识符矩阵集，必设属性。<br/>
format: "tiles", //图像的MIME类型，默认为 “image/png”。<br/>
requestEncoding: "KVP" //请求编码。可以是“REST”或者“KVP”，默认为”KVP”。<br/>
});<br/>
//全球矢量中文注记服务。<br/>
layerMarker = new SuperMap.Layer.WMTS({<br/>
name: "cva",<br/>
url: "http://t0.tianditu.com/cva_c/wmts",<br/>
layer: "cva",<br/>
style: "default",<br/>
matrixSet: "c",<br/>
format: "tiles",<br/>
requestEncoding: "KVP"<br/>
});<br/>
//添加图层，设置中心点，指定放缩级别。<br/>
//将创建的添加 入 map中<br/>
map.addLayers([layerBase, layerMarker]);<br/>
//在这种模式下, 可以使用常规的经纬度;<br/>
map.setCenter(new SuperMap.LonLat(108.9398165260,34.3412614674), 12);<br/>
</script><br/>
我使用的经纬度查询方式一般为: 在线地图经纬度查询
2.3 地图控件的添加
在介绍以下部分前, 给出几个链接 :
SuperMap 文档 OnLine 将这个文档与下载包内的官方API SuperMap iClient for JavaScript Help.chm 结合阅读理解更快.
SuperMap 基本概念介绍
SuperMap.Control 定义Control 地图控件.
默认添加的控件 :SuperMap.Control.Navigation 控件处理伴随鼠标事件（拖拽，双击、鼠标滚轮缩放）的地图浏览.
<script type=“text/javascript”>
var map;<br/>
onload = function init() {<br/>
//在创建 map 的时候直接添加, 一般只针对必要控件, 以及辅助型控件;<br/>
map = new SuperMap.Map("map", {<br/>
allOverlays: true,<br/>
controls:[<br/>
new SuperMap.Control.Navigation(),//鼠标处理事件<br/>
new SuperMap.Control.Zoom(),//缩放类控件<br/>
new SuperMap.Control.LayerSwitcher(), //图层选择控件类。 用于控制地图中的图层可见性。<br/>
new SuperMap.Control.MousePosition() //该控件显示鼠标移动时，所在点的地理坐标<br/>
]<br/>
});<br/>
//另一种方式:
//GEO定位控件<br/>
geolocate = new SuperMap.Control.Geolocate({<br/>
bind: false,<br/>
geolocationOptions: {<br/>
enableHighAccuracy: false,<br/>
maximumAge: 0<br/>
},<br/>
eventListeners: {<br/>
"locationupdated": getGeolocationCompleted,<br/>
"locationfailed": getGeolocationFailed<br/>
}<br/>
});<br/>
//添加单个控件<br/>
map.addControl(geolocate);<br/>
//添加多个控件<br/>
//map.addControls([control1, control2],[null]);<br/>
//map.addControls([control1, control2]);//通过options的第二个数组通过像素对象控制控件的位置 两个数组应该匹配,如果为 null, 则在默认位置;<br/>
//对于一部分控件需要激活才能使用,<br/>
geolocate.activate();<br/>
//注销控件<br/>
//geolocate.deactivate();<br/>
function getGeolocationCompleted(event) {<br/>
console.log(event.position);<br/>
}
function getGeolocationFailed(event) {
console.log("123");<br/>
}
//第三种添加方式:<br/>
//定义控件图层<br/>
var vector = new SuperMap.Layer.Vector("vector layer");<br/>
map.addLayer(vector);<br/>
//定义容器<br/>
var panel = new SuperMap.Control.Panel();<br/>
//定义两个控件<br/>
var modifyFeature = new SuperMap.Control.ModifyFeature(vector);<br/>
var drawFeature = new SuperMap.Control.DrawFeature(vector, SuperMap.Handler.Polygon);<br/>
//在容器中添加多个控件<br/>
toolbar.addControls(modifyFeature, drawFeature);<br/>
//将容器添加入map;<br/>
map.addControl(toolbar);<br/>
</script><br/>
2.4 添加地图覆盖物
地图覆盖物一般是指叠加或覆盖到地图上的内容，如标注、矢量要素(如线、多边形、圆、椭圆等)、信息窗口等。
覆盖物会固定在地图的某个位置，跟随地图的平移或缩放而移动，但其本身不会缩放。
地图上最常见、最简单的覆盖物是Marker，也就是地图上的点标注。
点标注一般有默认的图标和样式，当然我们也可以根据需要自定义图标。除了Marker，信息框和矢量要素也是常用的覆盖物。
<script type=“text/javascript”>
//marker有专用的 marker 图层;<br/>
var markerLayer = new SuperMap.Layer.Markers("markers");<br/>
map.addLayer(markerLayer);<br/>
//标记图层上添加标记 并设置相应的 属性种种;<br/>
var size = new SuperMap.Size(21,25);<br/>
var offset = new SuperMap.Pixel(-(size.w/2), -size.h);<br/>
var icon = new SuperMap.Icon('../img/marker.png',size,offset);<br/>
markers.addMarker(new SuperMap.Marker(new SuperMap.LonLat(0,0),icon));
//添加矢量要素<br/>
//创建矢量要素, 创建 Geometry对象<br/>
var vectorLayer = new SuperMap.Layer.Vector("vectorLayer");<br/>
//点对象<br/>
var point= new SuperMap.Geometry.Point(0,0);<br/>
var pointVector = new SuperMap.Feature.Vector(point);<br/>
pointVector.style={<br/>
fillColor:"red",<br/>
strokeColor:"yellow",<br/>
pointRadius:6<br/>
};<br/>
//添加多个点<br/>
//var multiPoint = new SuperMap.Geometry.MultiPoint([point1,point2]);
//线对象<br/>
var points2=[<br/>
new SuperMap.Geometry.Point(0,29.4),<br/>
new SuperMap.Geometry.Point(-50,39.4),<br/>
new SuperMap.Geometry.Point(-30,19.4),<br/>
new SuperMap.Geometry.Point(100,49.4)<br/>
];<br/>
//对待封闭图形, 需要创建 LinearRing 放入 构造器中;<br/>
var line1 = new SuperMap.Geometry.LineString(points2);<br/>
var lineVector = new SuperMap.Feature.Vector(line1);<br/>
lineVector.style={<br/>
strokeColor:"#7B68EE",<br/>
strokeWidth:2<br/>
} ;<br/>
//六边形<br/>
var points2=[<br/>
new SuperMap.Geometry.Point(-120,54.142),<br/>
new SuperMap.Geometry.Point(-110,40),<br/>
new SuperMap.Geometry.Point(-120,25.857),<br/>
new SuperMap.Geometry.Point(-140,25.857),<br/>
new SuperMap.Geometry.Point(-150,40),<br/>
new SuperMap.Geometry.Point(-140,54.142)
],<br/>
linearRings = new SuperMap.Geometry.LinearRing(points2),<br/>
region = new SuperMap.Geometry.Polygon([linearRings]);<br/>
var polygonVector = new SuperMap.Feature.Vector(region);<br/>
// 矩形<br/>
var x = -70;<br/>
var y = -30;<br/>
var w = 40;<br/>
var h = 30;<br/>
var rectangle = new SuperMap.Geometry.Rectangle(x, y, w, h);<br/>
var rectangleVector = new SuperMap.Feature.Vector(rectangle);<br/>
</script><br/>
2.5 地图区域选择
<script type=“text/javascript”>
//创建时, 需要注意对象的创建次序, 否则容易出现层级覆盖的情况,导致无法添加<br/>
var map, layerBase, layerMarker;<br/>
function init() {<br/>
var vectorLayer = new SuperMap.Layer.Vector("标绘图层");<br/>
vectorLayer.events.on({"afterfeaturemodified": editFeatureCompleted});<br/>
var snap01 = new SuperMap.Snap([vectorLayer], 10, 10, {<br/>
actived: true<br/>
});<br/>
var drawPolygon = new SuperMap.Control.DrawFeature(vectorLayer, SuperMap.Handler.Polygon);<br/>
//如果不添加对应事件, 在激活控件的时候会报错;<br/>
drawPolygon.events.on({<br/>
"featureadded": drawCompleted<br/>
});<br/>
var modifyFeature = new SuperMap.Control.ModifyFeature(vectorLayer);<br/>
modifyFeature.snap = snap01;<br/>
map = new SuperMap.Map("map", {<br/>
allOverlays: true,<br/>
controls: [<br/>
new SuperMap.Control.Navigation(),<br/>
new SuperMap.Control.Zoom(),<br/>
new SuperMap.Control.LayerSwitcher(),<br/>
new SuperMap.Control.MousePosition()<br/>
]<br/>
});<br/>
layerBase = new SuperMap.Layer.WMTS({<br/>
name: "vec",<br/>
url: "http://t0.tianditu.com/vec_c/wmts",<br/>
layer: "vec",<br/>
style: "default",<br/>
matrixSet: "c",<br/>
format: "tiles",<br/>
requestEncoding: "KVP"<br/>
});<br/>
layerMarker = new SuperMap.Layer.WMTS({<br/>
name: "cva",<br/>
url: "http://t0.tianditu.com/cva_c/wmts",<br/>
layer: "cva",<br/>
style: "default",<br/>
matrixSet: "c",<br/>
format: "tiles",<br/>
requestEncoding: "KVP"<br/>
});
map.addControl(drawPolygon);<br/>
map.addControl(modifyFeature);<br/>
map.addLayers([layerBase, layerMarker,vectorLayer]);<br/>
drawPolygon.activate();<br/>
modifyFeature.activate();<br/>
map.setCenter(new SuperMap.LonLat(108.9398165260, 34.3412614674), 12);<br/>
function drawCompleted(eventArgs) {<br/>
//TODO<br/>
}<br/>
function editFeatureCompleted(event) {<br/>
//TODO<br/>
}<br/>
}<br/>
</script><br/>
2.6 注意事项:
图层之间的层级覆盖关系需要多注意, 效果显示不出来的原因可能是层级覆盖;所以最好打开 LayerSwitcher 控制器.- 上一篇： sup游戏机真假辨别
- 下一篇： Super Jumping! Jumping! Jumping!
相关文章
-
sup游戏机真假辨别
sup游戏机真假辨别
- 互联网
- 2026年04月04日
-
sva如何添加到验证环境
sva如何添加到验证环境
- 互联网
- 2026年04月04日
-
svg 文字水印 阮一峰
svg 文字水印 阮一峰
- 互联网
- 2026年04月04日
-
Super Jumping! Jumping! Jumping!
Super Jumping! Jumping! Jumping!
- 互联网
- 2026年04月04日
-
Summary of Critical and Exploitable iOS Vulnerabilities in 2016
Summary of Critical and Exploitable iOS Vulnerabilities in 2016
- 互联网
- 2026年04月04日
-
SUID, SGID, SBIT
SUID, SGID, SBIT
- 互联网
- 2026年04月04日
