supermap学习系列（五）——上一篇的续集（鼠标单击或者移动，高亮显示并弹出对话框）

最新推荐文章于 2022-06-15 13:38:40 发布

duyelang

最新推荐文章于 2022-06-15 13:38:40 发布

阅读量3.4k

点赞数

分类专栏：超图文章标签： supermap 地图高亮移动或者单击对话框

本文链接：https://blog.csdn.net/duyelang/article/details/20362205

版权

超图专栏收录该内容

9 篇文章 4 订阅

订阅专栏

学习笔记，方便以后查阅。参考超图技术资源中心--代码库：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: "Provinces_R@China400"
            });
            //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>

初始效果图:

鼠标单击其中的一个省份：

鼠标移动也是可以的，上面的代码中有说明。

duyelang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
supermap学习系列（五）——上一篇的续集（鼠标单击或者移动，高亮显示并弹出对话框）

学习笔记，方便以后查阅。参考超图技术资源中心--代码库：http://support.supermap.com.cn/ProductCenter/ResourceCenter/CodeLibrary.aspxhttp://www.w3.org/1999/xhtml"> var style = {
复制链接

扫一扫