學習筆記，友善以後查閱。參考超圖技術資源中心--代碼庫：http://support.supermap.com.cn/ProductCenter/ResourceCenter/CodeLibrary.aspx
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="libs/SuperMap.Include.js"></script>
<script type="text/javascript">
var style = {
strokeColor: "#304DBE",
strokeOpacity: 0,
fillColor: "#00ff00",
fillOpacity: 0,
};
var selectStyle = {
fillColor: "#FFFFFF", //填充顔色
strokeColor: "#ff0000", //邊框顔色
strokeWidth: 3,
graphZIndex: 1
};
var map, layer, vectorLayer, selectFeature, popup;
// 設定通路的GIS服務位址
var url = "http://localhost:8090/iserver/services/map-ChinaTestWorkPlace/rest/maps/ChinaTest";
function GetMap() {
// 建立地圖對象
map = new SuperMap.Map("map");
//control = new SuperMap.Control.MousePosition(); //該控件顯示滑鼠移動時，所在點的地理坐标。
//map.addControl(control); //添加控件
// 建立圖層對象
layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, { transparent: true, cacheEnabled: true }, { maxResolution: "auto" });
layer.events.on({ "layerInitialized": addLayer });
vectorLayer = new SuperMap.Layer.Vector("Vector Layer");
//這裡添加兩種事件方式點選事件和mouseover事件，都可以實作，這裡屏蔽掉mouseover事件。(這裡我還存一個問題，在這兩種情況下輕按兩下地圖不能放大，隻能用滾輪)
// （輕按兩下除了要高亮顯示的其他區域，還是可以的）
//給vectorLayer添加單擊事件
selectFeature = new SuperMap.Control.SelectFeature(vectorLayer, {
onSelect: onFeatureSelect,
onUnselect: onUnFeatureSelect
});
selectFeature.repeat = true;
selectFeature.toggle = true;
給vectorLayer添加滑鼠mouseover事件
//selectFeature = new SuperMap.Control.SelectFeature(vectorLayer, {
// onSelect: onFeatureSelect,
// onUnselect: onUnFeatureSelect,
// hover: true
//});
map.addControl(selectFeature);
selectFeature.activate();
}
// 加載圖層
function addLayer() {
// 向Map添加圖層
map.addLayers([layer, vectorLayer]);
map.setCenter(new SuperMap.LonLat(116.409749, 39.912344), 1);
QueryBySQL();
}
function QueryBySQL() {
var filterParameter, queryBySQLService, queryBySQLParameters;
//SuperMap.REST.FilterParameter 查詢過濾條件參數類。 該類用于設定查詢資料集的查詢過濾參數。
filterParameter = new SuperMap.REST.FilterParameter({
name: "[email protected]"
});
//SuperMap.REST.QueryBySQLParameters SQL 查詢參數類。 該類用于設定 SQL 查詢的相關參數。
queryBySQLParameters = new SuperMap.REST.QueryBySQLParameters({
queryParams: [filterParameter]
});
//SuperMap.REST.QueryBySQLService SQL 查詢服務類。 在一個或多個指定的圖層上查詢符合 SQL 條件的空間地物資訊。
queryBySQLService = new SuperMap.REST.QueryBySQLService(url, {
eventListeners: {
"processCompleted": queryCompleted,
"processFailed": queryError
}
});
queryBySQLService.processAsync(queryBySQLParameters);
}
//查詢成功
function queryCompleted(queryEventArgs) {
var result = queryEventArgs.result;
if (result && result.recordsets[0].features) {
features = result.recordsets[0].features;
for (var i = 0; i < features.length; i++) {
features[i].style = style;
}
vectorLayer.addFeatures(features);
}
}
function queryError(e) {
alert(e.error.errorMsg);
}
function onUnFeatureSelect(feature) {
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
feature.style = style;
vectorLayer.redraw();
}
function onFeatureSelect(feature) {
feature.style = selectStyle;
vectorLayer.redraw();
vectorLayer.setOpacity(0.6);
// 擷取點選點的經緯度
var x = feature.geometry.getBounds().getCenterLonLat().lon;
var y = feature.geometry.getBounds().getCenterLonLat().lat;
var contentHTML = "<div style='font-size:.8em; opacity: 0.8; width:150px; height:50px;'>" +
"<span style='font-weight: bold; font-size: 18px;'>詳細資訊</span><br>";
contentHTML += "<div>所屬：" + feature.attributes.NAME + "</div>";
contentHTML += "<div>1994年GDP：" + parseInt(feature.attributes.GDP_1994) + "</div>";
contentHTML += "<div>1997年GDP：" + parseInt(feature.attributes.GDP_1997) + "</div>";
contentHTML += "<div>1998年GDP：" + parseInt(feature.attributes.GDP_1998) + "</div>";
contentHTML += "<div>1999年GDP：" + parseInt(feature.attributes.GDP_1999) + "</div>";
contentHTML += "<div>2000年GDP：" + parseInt(feature.attributes.GDP_2000) + "</div>";
contentHTML += "</div>"
popup = new SuperMap.Popup.FramedCloud("chicken",
new SuperMap.LonLat(x, y),
null,
contentHTML,
null,
true);
feature.popup = popup;
popup.panMapIfOutOfView = true;
map.addPopup(popup);
}
</script>
</head>
<body οnlοad="GetMap()">
<div id="map" style="height: 640px; width: 720px; border: 1px solid red; margin-left: auto; margin-right: auto;"></div>
</body>
</html>
初始效果圖:
滑鼠單擊其中的一個省份：
滑鼠移動也是可以的，上面的代碼中有說明。