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; width: 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 控制器.