您的位置：首页 > 其它

supermap学习系列（六）——上一篇的另一种版本（鼠标单击或者移动，高亮显示并弹出对话框）

2014-03-03 11:26 483 查看

学习笔记，方便以后查阅。参考超图技术资源中心--代码库：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: "#ff0000",
strokeWidth: 2,
pointerEvents: "visiblePainted",
fillColor: "#FFFFFF",
fillOpacity: 0.8
};
var map, layer, vectorLayer, selectFeature, vectorLayer2, 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");
//将初始化查询结果的透明度设置为0
vectorLayer.setOpacity(0);
vectorLayer2 = new SuperMap.Layer.Vector("Vector2");
QueryBySQL();
}
// 加载图层
function AddLayer() {
// 向Map添加图层
map.addLayers([layer, vectorLayer,vectorLayer2]);
map.setCenter(new SuperMap.LonLat(116.409749, 39.912344), 1);
//这里添加两种事件方式点击事件和mouseover事件，都可以实现，这里屏蔽掉mouseover事件。(这里我还存一个问题，在这两种情况下双击地图不能放大，只能用滚轮)
// （双击除了要高亮显示的其他区域，还是可以的）
////给vectorLayer添加单击事件
//selectFeature = new SuperMap.Control.SelectFeature(vectorLayer,
//        {
//            onSelect: OnFeatureSelect,
//            onUnselect: OnFeatureUnselect
//        });
//selectFeature.repeat = true;
//selectFeature.toggle = true;
//map.addControl(selectFeature);
//selectFeature.activate();
//给vectorLayer添加鼠标mouseover事件
selectFeature = new SuperMap.Control.SelectFeature(vectorLayer,
{
onSelect: OnFeatureSelect,
onUnselect: OnFeatureUnselect,
hover:true
});
map.addControl(selectFeature);
selectFeature.activate();
}
//查询函数
function QueryBySQL() {
var queryParam, queryBySQLParams, queryBySQLService;
//SuperMap.REST.FilterParameter 查询过滤条件参数类。 该类用于设置查询数据集的查询过滤参数。
queryParam = new SuperMap.REST.FilterParameter({
name: "Provinces_R@China400"   //ChinaTest地图中的图层名称
});
//SuperMap.REST.QueryBySQLParameters SQL 查询参数类。 该类用于设置 SQL 查询的相关参数。
queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({
queryParams: [queryParam]
});
//SuperMap.REST.QueryBySQLService SQL 查询服务类。 在一个或多个指定的图层上查询符合 SQL 条件的空间地物信息。
queryBySQLService = new SuperMap.REST.QueryBySQLService(url, {
eventListeners: { "processCompleted": ProcessCompleted, "processFailed": ProcessFailed }
});
queryBySQLService.processAsync(queryBySQLParams);
}
//查询成功
function ProcessCompleted(queryEventArgs) {
var i, j, feature,
result = queryEventArgs.result;
if (result && result.recordsets) {
for (i = 0; i < result.recordsets.length; i++) {
if (result.recordsets[i].features) {
for (j = 0; j < result.recordsets[i].features.length; j++) {
feature = result.recordsets[i].features[j];
feature.style = style;
vectorLayer.addFeatures(feature);
}
}
}
}
}
function ProcessFailed(e) {
alert(e.error.errorMsg);
}
function OnFeatureUnselect(feature) {
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
vectorLayer2.removeAllFeatures();
}
function OnFeatureSelect(feature) {
var f = new SuperMap.Feature.Vector;
f.geometry = feature.geometry.clone();
f.style = style;
vectorLayer2.addFeatures(f);
vectorLayer2.setOpacity(0.5);
// 获取点击点的经纬度
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 onload="GetMap()">
<div id="map" style="height: 640px; width: 720px; border: 1px solid red; margin-left: auto; margin-right: auto;"></div>
</body>
</html>

初始效果图：

鼠标移动到某一省份，效果图如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航