supermap 设置线的图层，鼠标经过线变颜色_supermap.layer图层改变颜色-CSDN博客

本文链接：https://blog.csdn.net/u014368040/article/details/79622626
Supermap 鼠标经过线变颜色

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ID 查询</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 510px;
            border:1px solid #3473b7;
        }
        #toolbar {
            position: relative;
            padding-top: 5px;
            padding-bottom: 10px;
        }
    </style>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script src='./libs/SuperMap.Include.js'></script>
    <script type="text/javascript">
        var host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host;
        var map, local, layer, vectorLayer,popup,
            style1 = {
                strokeColor: "#304DBE",
                strokeWidth: 5,
                fillColor: "#304DBE",
                fillOpacity: "0.8"
            },
            style2 = {
                strokeColor: "#93c713",
                strokeWidth: 5,
                fillColor: "#93c713",
                fillOpacity: "0.8"
            },
     //       url1=host+"/iserver/services/map-world/rest/maps/World",
      //      url2=host+"/iserver/services/data-world/rest/data";

        url1="http://xxxx:8090/iserver/services/map-qyh_map/rest/maps/map";
        url2 = "http://xxxxx:8090/iserver/services/data-qyh_map/rest/data";
        function init(){
            map = new SuperMap.Map("map",{controls: [
                new SuperMap.Control.LayerSwitcher(),
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                })]
            });
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url1, {transparent: true, cacheEnabled: true}, {maxResolution:"auto"});
            layer.events.on({"layerInitialized":addLayer});
            vectorLayer = new SuperMap.Layer.Vector("Vector Layer");
        }

        function addLayer() {
            map.addLayers([layer, vectorLayer]);
           // map.setCenter(new SuperMap.LonLat(0, 0), 0);
            map.setCenter(new SuperMap.LonLat(113.8100970645, 34.035447553904));
            map.zoomToScale(0.000009923542095493076, false);



//通过selectFeature控件为标签添加点击事件
            var callbacks = {
                click: function(feature){
                    closeInfoWin();
                   // alert("123");

                },
                over: changstyle,
                out: restorestyle
            };
//实例化 selectFeature 控件
            selectFeature = new SuperMap.Control.SelectFeature(vectorLayer,{callbacks:callbacks});
//map上添加控件
            map.addControl(selectFeature);
//激活控件
            selectFeature.activate();
        }
        function getFeaturesByIDs() {
            vectorLayer.removeAllFeatures();
//这儿是获取rest的data数据
      var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;
            getFeatureParam = new SuperMap.REST.FilterParameter({
                name: "zhuanhuan:河流",
                attributeFilter: "SMID >0 "
            });
            getFeatureBySQLParams = new SuperMap.REST.GetFeaturesBySQLParameters({
                queryParameter: getFeatureParam,
                datasetNames:["zhuanhuan:河流"]
            });
            getFeatureBySQLService = new SuperMap.REST.GetFeaturesBySQLService(url2, {
              eventListeners: {"processCompleted": processCompleted, "processFailed": processFailed}});

            getFeatureBySQLService.processAsync(getFeatureBySQLParams);
        }
        function processCompleted(getFeaturesEventArgs) {
            var i, len, features, feature, result = getFeaturesEventArgs.result;
            if (result && result.features) {
                features = result.features
                for (i=0, len=features.length; i<len; i++) {
                    feature = features[i];
                    feature.style = style1;
                    vectorLayer.addFeatures(feature);
                }
            }
        }
        function processFailed(e) {
            alert(e.error.errorMsg);
        }
        function clearFeatures() {
//先清除上次的显示结果
            vectorLayer.removeAllFeatures();
            vectorLayer.refresh();
        }
        //关闭弹窗
        function closeInfoWin() {
            if (popup) {
                try {
                    map.removePopup(popup);
                }
                catch (e) {
                }
            }
        }
        var colorlevels="";
        function changstyle(feature){
            //改变样式颜色
            feature.style = style2;
            vectorLayer.redraw();
            closeInfoWin();
            var contentHTML="<div style=\'font-size:.8em; opacity: 0.8; overflow-y:hidden;\'><div >"+feature.data.RVNM+"</div>";
            contentHTML+="<table >";
            contentHTML+="<tr><td>名字：</td><td >2222</td></tr>";
            contentHTML+="<tr><td>水质级别：</td><td >1111</td></tr>";
            contentHTML+="</table> </div>";
            popup = new SuperMap.Popup.FramedCloud("popwin",
                new SuperMap.LonLat(feature.attributes.SMSDRIE, feature.attributes.SMSDRIS)
                ,null,contentHTML,null,true,function(){
                    closeInfoWin();
                });
            map.addPopup(popup);

        }
        function restorestyle(feature){
            //鼠标离开事件
                feature.style = style1;
            vectorLayer.redraw();
        }
    </script>
</head>
<body οnlοad="init()">
<div id="toolbar">
    <input type="button" class="btn" value="查询" οnclick="getFeaturesByIDs()" />
    <input type="button" class="btn" value="清除" οnclick="clearFeatures()" />
</div>
<div id="map"></div>
</body>
</html>
鼠标经过前样式：