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