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 类；

 

要用哪个类自己看帮助；要有一定前端调试能力，否则效果出不来；具体看超图帮助和示例；