SuperMap webGIS 簡易提示框示例

先看一下效果；服務要先啓動；

圖上兩個圖標是自己添加的marker；

marker是SuperMap.Marker類的對象；

彈出提示框；裏面可以帶圖片；

說明一下代碼；

<link href='./css/bootstrap.min.css' rel='stylesheet' />
<link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
<script src='../libs/SuperMap.Include.js'></script>
這段是包含超圖的庫，和看你要用哪個前端框架來實現頁面效果；

var host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host;
var map, layerWorld,marker,markers;
var url=host+"/iserver/services/map-world/rest/maps/World";
function init(){
map = new SuperMap.Map("map",{controls: [
new SuperMap.Control.ScaleLine(),
new SuperMap.Control.Zoom(),
new SuperMap.Control.LayerSwitcher(),
new SuperMap.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
})]
});
這段是加載地圖底圖和地圖控件；控件包含導航、縮放、圖層切換等控件；

var host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host;
var url=host+"/iserver/services/map-world/rest/maps/World";
這個是地圖服務地址；不用動態編碼，直接寫 url=地圖服務地址 也行；

layerWorld = new SuperMap.Layer.TiledDynamicRESTLayer("World", url);
layerWorld.events.on({"layerInitialized": addLayer});
markers = new SuperMap.Layer.Markers("Markers");
layerWorld.events.on({"layerInitialized": addMarker});
這段是加載圖層；

彈出提示框的代碼說明如下；
popup = new SuperMap.Popup(
"chicken",
marker.getLonLat(),
new SuperMap.Size(220,140),
'<img src="images/xila.jpg">',
true,
null
);
要new一個SuperMap.Popup類的對象，在此定義提示框的圖片；
定義大小使用SuperMap.Size類；
提示框的彈出位置是在一個Marker上，marker.getLonLat()獲取marker的經緯度；
然後
    map.addPopup(popup);
把提示框添加到地圖上；

添加一個marker的代碼說明如下；
首先要new一個Marker層；
markers = new SuperMap.Layer.Markers("Markers");
然後
    map.addLayers([layerWorld,markers]);
把Marker層添加到地圖，此語句添加了2個圖層，layerWorld和markers；

添加一個具體的marker；
size = new SuperMap.Size(21,25);
offset = new SuperMap.Pixel(-(size.w/2), -size.h);
icon = new SuperMap.Icon('images/markerbig_select.png', size, offset);
marker = new SuperMap.Marker(new SuperMap.LonLat(23.6530190,37.9439259),icon);
markers.addMarker(marker);
定義marker的大小、位置、圖標，然後new出marker對象，然後把marker對象添加到Marker層；

 

再看一個提示框示例；

提示框裏面可以是文字，或者一些html/css的東西；上圖是一個html表格；

提示框代碼如下；

var contentHTML2 = "<div>";
contentHTML2 += "<table border='1'>";
contentHTML2 += "<tr>";
contentHTML2 += "  <td>100</td>";
contentHTML2 += "  <td>200</td>";
contentHTML2 += "  <td>300</td>";
contentHTML2 += "</tr>";
contentHTML2 += "<tr>";
contentHTML2 += "  <td>400</td>";
contentHTML2 += "  <td>500</td>";
contentHTML2 += "  <td>600</td>";
contentHTML2 += "</tr>";
contentHTML2 += "</table>"; 
contentHTML2 += "</div>"; 

framedCloud2 = new SuperMap.Popup.FramedCloud(
"chicken", 
marker.getLonLat(),
null,
contentHTML2,
icon,
true,
null,
true
);

此提示框使用 SuperMap.Popup.FramedCloud 類；

 

要用哪個類自己看幫助；要有一定前端調試能力，否則效果出不來；具體看超圖幫助和示例；