顺德区地理信息公共服务平台

控件类API 高亮显示图层
鼠标在图层上移动时,高亮显示所指的要素
高亮显示图层
以下是高亮显示图层的示例代码。
                                                        <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                                                        <html xmlns="http://www.w3.org/1999/xhtml">
                                                        <head>
                                                        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                                                        <title>高亮显示图层Demo </title>
                                                        <script src="https://tianditu.shunde.gov.cn/portalsys/DCIMapMiddleware.initapi" type="text/javascript"></script>

                                                        <style type="text/css">
                                                            .content {
                                                                height: 380px;
                                                                width: 741px;
                                                                text-align: left;
                                                                border: 1px solid #000000;
                                                            }

                                                            #map_div {
                                                                position: absolute;
                                                            }

                                                            .Button {
                                                                position: absolute;
                                                                bottom: 10px;
                                                                left: 20px;
                                                                z-index: 2;
                                                                margin-left: 5px;
                                                                float: left;
                                                            }
</style>
                                                            </head>
                                                        <body>
                                                        <div id="map_div" class="content">
                                                        <div class="Button" style="background-color: white;">鼠标在图层上移动时,高亮显示所指的要素</div>
                                                                </div>
                                                                <!-- Visual Studio Browser Link -->
                                                        <script type="application/json" id="__browserLink_initializationData">
                                                                    {"appName":"Chrome","requestId":"aadb5a58b17f44b1bcace013c7b43398"}
                                                                </script>
                                                        <script type="text/javascript" src="http://localhost:2421/f03c009c0ac84c25bc381e30c1ef2a6c/browserLink" async="async"></script>
                                                                <!-- End Browser Link -->
                                                            </body>
                                                        </html>
                                                        <script type="text/javascript">
                                                            var map = null;
                                                            var data = '{"shptype":"wkbPolygon","shpname":"Polygon","fields":[{"name":"FID","type":"esriFieldTypeOID","alias":"FID"},{"name":"OBJECTID","type":"esriFieldTypeInteger","alias":"OBJECTID"}],"data":[{"geom":"POLYGON ((486750.75653076172 2589568.4726867676,486750.75653076172 2576535.7244873047,469944.69241333008 2576541.4206848145,469944.69241333008 2589577.0169143756,486750.75653076172 2589568.4726867676))","attr":{"FID":"0","OBJECTID":"0"}},{"geom":"POLYGON ((486750.75653076172 2589568.4726867676,469944.69241333008 2589577.0169143756,469944.69241333008 2602612.6131896973,486750.75653076172 2602601.2208862305,486750.75653076172 2589568.4726867676))","attr":{"FID":"1","OBJECTID":"1"}},{"geom":"POLYGON ((469944.69241333008 2589577.0169143756,469944.69241333008 2576541.4206848145,453138.62829589844 2576547.1168823242,453138.62829589844 2589585.5611419831,469944.69241333008 2589577.0169143756))","attr":{"FID":"2","OBJECTID":"2"}},{"geom":"POLYGON ((469944.69241333008 2602612.6131896973,469944.69241333008 2589577.0169143756,453138.62829589844 2589585.5611419831,453138.62829589844 2602624.0054931641,469944.69241333008 2602612.6131896973))","attr":{"FID":"3","OBJECTID":"3"}},{"geom":"POLYGON ((486750.75653076172 2563502.9762878418,486750.75653076172 2550470.2280883789,469944.69241333008 2550470.2280883789,469944.69241333008 2563505.8243637113,486750.75653076172 2563502.9762878418))","attr":{"FID":"4","OBJECTID":"4"}},{"geom":"POLYGON ((486750.75653076172 2563502.9762878418,469944.69241333008 2563505.8243637113,469944.69241333008 2576541.4206848145,486750.75653076172 2576535.7244873047,486750.75653076172 2563502.9762878418))","attr":{"FID":"5","OBJECTID":"5"}},{"geom":"POLYGON ((469944.69241333008 2563505.8243637113,469944.69241333008 2550470.2280883789,453138.62829589844 2550470.2280883789,453138.62829589844 2563508.6724395803,469944.69241333008 2563505.8243637113))","attr":{"FID":"6","OBJECTID":"6"}},{"geom":"POLYGON ((469944.69241333008 2576541.4206848145,469944.69241333008 2563505.8243637113,453138.62829589844 2563508.6724395803,453138.62829589844 2576547.1168823242,469944.69241333008 2576541.4206848145))","attr":{"FID":"7","OBJECTID":"7"}},{"geom":"POLYGON ((453138.62829589844 2589585.5611419831,453138.62829589844 2576547.1168823242,436332.56420898437 2576552.8129882812,436332.56420898437 2589594.1053695758,453138.62829589844 2589585.5611419831))","attr":{"FID":"8","OBJECTID":"8"}},{"geom":"POLYGON ((453138.62829589844 2589585.5611419831,436332.56420898437 2589594.1053695758,436332.56420898437 2602635.3977966309,453138.62829589844 2602624.0054931641,453138.62829589844 2589585.5611419831))","attr":{"FID":"9","OBJECTID":"9"}},{"geom":"POLYGON ((436332.56420898437 2589594.1053695758,436332.56420898437 2576552.8129882812,419526.50012207031 2576558.5090942383,419526.50012207031 2589602.649597168,436332.56420898437 2589594.1053695758))","attr":{"FID":"10","OBJECTID":"10"}},{"geom":"POLYGON ((436332.56420898437 2602635.3977966309,436332.56420898437 2589594.1053695758,419526.50012207031 2589602.649597168,419526.50012207031 2602646.7901000977,436332.56420898437 2602635.3977966309))","attr":{"FID":"11","OBJECTID":"11"}},{"geom":"POLYGON ((453138.62829589844 2563508.6724395803,453138.62829589844 2550470.2280883789,436332.56420898437 2550470.2280883789,436332.56420898437 2563511.5205154447,453138.62829589844 2563508.6724395803))","attr":{"FID":"12","OBJECTID":"12"}},{"geom":"POLYGON ((453138.62829589844 2563508.6724395803,436332.56420898437 2563511.5205154447,436332.56420898437 2576552.8129882812,453138.62829589844 2576547.1168823242,453138.62829589844 2563508.6724395803))","attr":{"FID":"13","OBJECTID":"13"}},{"geom":"POLYGON ((436332.56420898437 2563511.5205154447,436332.56420898437 2550470.2280883789,419526.50012207031 2550470.2280883789,419526.50012207031 2563514.3685913086,436332.56420898437 2563511.5205154447))","attr":{"FID":"14","OBJECTID":"14"}},{"geom":"POLYGON ((436332.56420898437 2576552.8129882812,436332.56420898437 2563511.5205154447,419526.50012207031 2563514.3685913086,419526.50012207031 2576558.5090942383,436332.56420898437 2576552.8129882812))","attr":{"FID":"15","OBJECTID":"15"}}]}';
                                                            var graphicArray = [];
                                                            var featurelayer = null;
                                                            function WKTToGeometry(type, wkt) {
                                                                var geometry = null;
                                                                switch (type) {
                                                                    case "multilinestring":
                                                                    case "multiline":
                                                                        var json = "{\"paths\":";
                                                                        var lineJson = wkt.replace(/\(/g, "[").replace(/\)/g, "]");
                                                                        //re = /([\d\.]+)\s([\d\.]+)/g;
                                                                        re = /(\-?[\d\.]+)\s(\-?[\d\.]+)/g;
                                                                        lineJson = lineJson.replace(re, "[$1,$2]");
                                                                        json += lineJson + "}"
                                                                        json = JSON.parse(json);
                                                                        geometry = new esri.geometry.Polyline(json);
                                                                        geometry.spatialReference = map.spatialReference;
                                                                        break;
                                                                    case "line":
                                                                    case "linestring":
                                                                    case "polyline":
                                                                        var json = "{\"paths\":[";
                                                                        var lineJson = wkt.replace(/\(/g, "[").replace(/\)/g, "]");
                                                                        re = /(\-?[\d\.]+)\s(\-?[\d\.]+)/g;
                                                                        lineJson = lineJson.replace(re, "[$1,$2]");
                                                                        json += lineJson + "]}";
                                                                        json = JSON.parse(json);
                                                                        geometry = new esri.geometry.Polyline(json);
                                                                        geometry.spatialReference = map.spatialReference;
                                                                        break;
                                                                    case "point":
                                                                        var pointJson = wkt.replace(/\(/g, "[").replace(/\)/g, "]");
                                                                        re = /(\-?[\d\.]+)\s(\-?[\d\.]+)/g;
                                                                        pointJson = pointJson.replace(re, "[$1,$2]");
                                                                        pointJson = JSON.parse(pointJson);
                                                                        geometry = new esri.geometry.Point(pointJson[0][0], pointJson[0][1], map.spatialReference);
                                                                        break;
                                                                    case "polygon":
                                                                        var json = "{\"rings\":";
                                                                        var lineJson = wkt.replace(/\(/g, "[").replace(/\)/g, "]");
                                                                        re = /(\-?[\d\.]+)\s(\-?[\d\.]+)/g;
                                                                        lineJson = lineJson.replace(re, "[$1,$2]");
                                                                        json += lineJson + "}";
                                                                        json = JSON.parse(json);
                                                                        geometry = new esri.geometry.Polygon(json);
                                                                        geometry.spatialReference = map.spatialReference;
                                                                        break;
                                                                    case "multipolygon":
                                                                        var json = "{\"rings\":[";
                                                                        wkt = wkt.substring(wkt.indexOf("(") + 1, wkt.lastIndexOf(")"));
                                                                        var lineJson = wkt.replace(/(\({2})/g, "(");
                                                                        lineJson = lineJson.replace(/(\){2})/g, ")");
                                                                        var lineJson = lineJson.replace(/\(/g, "[").replace(/\)/g, "]");
                                                                        re = /(\-?[\d\.]+)\s(\-?[\d\.]+)/g;
                                                                        lineJson = lineJson.replace(re, "[$1,$2]");
                                                                        json += lineJson + "]}"
                                                                        json = JSON.parse(json);
                                                                        geometry = new esri.geometry.Polygon(json);
                                                                        geometry.spatialReference = map.spatialReference;
                                                                        break;
                                                                    default:
                                                                        geometry = null;
                                                                }
                                                                return geometry;
                                                            }
                                                            function showMap() {
                                                                map = new DCIMap("map_div", DCIMapConfig.mapInitParams);
                                                                switch (DCIMapConfig.vecMap.type) {
                                                                    case 0://WMTS
                                                                        var layers = new DCIWMTSLayer(DCIMapConfig.vecMap.Url);
                                                                        map.addLayer(layers, 0);
                                                                        map.showSlider(map.initExtent, DCIMapConfig.sliderConfig);
                                                                        addGraphicLayer();
                                                                        break;
                                                                    case 1://1为mapserver切片
                                                                        var layers = new esri.layers.ArcGISTiledMapServiceLayer(DCIMapConfig.vecMap.Url);
                                                                        map.addLayer(layers, 0);
                                                                        dojo.connect(layers, "onLoad", function () {
                                                                            map.showSlider(map.initExtent, DCIMapConfig.sliderConfig);
                                                                            addGraphicLayer();
                                                                        })
                                                                        break;
                                                                }
                                                            }
                                                            function addGraphicLayer() {
                                                                data = JSON.parse(data);
                                                                for (var i = 0; i < data.data.length; i++) {
                                                                    var geometryInfo = data.data[i].geom;
                                                                    var wkttype = geometryInfo.substring(0, geometryInfo.indexOf("(") - 1);
                                                                    var geo = WKTToGeometry(wkttype.toLowerCase(), geometryInfo.substring(7));
                                                                    var symbol = map.fillSymbol;
                                                                    var attr = data.data[i].attr;
                                                                    var graphic = new esri.Graphic(geo, symbol, attr);
                                                                    graphicArray.push(graphic);
                                                                }
                                                                featurelayer = new esri.layers.FeatureLayer({
                                                                    "layerDefinition": {
                                                                        "geometryType": "esriGeometryPolygon",
                                                                        "objectIdField": "FID",
                                                                        "fields": []
                                                                    },
                                                                    "featureSet": {
                                                                        "geometryType": "esriGeometryPolygon",
                                                                        "features": graphicArray
                                                                    }
                                                                }, {
                                                                        id: "featurelayer"
                                                                    });
                                                                featurelayer.name = data.shpname;
                                                                var renderer = new esri.renderer.SimpleRenderer(map.fillSymbol);
                                                                featurelayer.setRenderer(renderer);
                                                                map.addLayer(featurelayer);
                                                                dojo.connect(featurelayer, "onMouseMove", function (evt) {
                                                                    var graphic = evt.graphic;
                                                                    if (graphic) {
                                                                        var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                                                                            new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                                                                                new dojo.Color([128, 128, 128]), 0.1), new dojo.Color([224, 91, 255, 0.5]));
                                                                        graphic.setSymbol(symbol);
                                                                    }
                                                                });
                                                                dojo.connect(featurelayer, "onMouseOut", function (evt) {
                                                                    var graphic = evt.graphic;
                                                                    if (graphic) {
                                                                        graphic.setSymbol(map.fillSymbol);
                                                                    }
                                                                });
                                                            }
                                                            dojo.addOnLoad(showMap);
</script>
下面我们分步向您介绍：
加载地图浏览API

将下载的地图浏览API包解压后拷入网页所在的工程文件夹，将如下列代码所示的相对路径加入网页head节内引用。
1.	< !--引入地图框架-->
2.	< script src="http://服务器IP/地图API名称/" type="text/javascript" />< /script>
创建地图容器元素

创建地图浏览应用程序需要在页面中创建一块区域用于显示地图内容，这个区域我们叫做地图容器，即在body中加入的一个div容器，其页面代码为：
1.	<div id="map_div" class="content"> </div>
参数初始化设置

地图实例通过下列代码创建，其中，DCIMapConfig.mapInitParams是地图初始化参数。
1.	var map = new DCIMap("map_div", DCIMapConfig.mapInitParams);
加载图层到地图

根据底图类型，创建底图，添加到地图中。
1.	switch (DCIMapConfig.vecMap.type) {
2.	case 0://WMTS
3.	var layers = new DCIWMTSLayer(DCIMapConfig.vecMap.Url);
4.	map.addLayer(layers, 0);
5.	map.showSlider(map.initExtent, DCIMapConfig.sliderConfig);
6.	break;
7.	case 1://1为mapserver切片
8.	var layers = new esri.layers.ArcGISTiledMapServiceLayer(DCIMapConfig.vecMap.Url);
9.	map.addLayer(layers, 0);
10.	dojo.connect(layers, "onLoad", function () {
11.	map.showSlider(map.initExtent, DCIMapConfig.sliderConfig);
12.	})
13.	break;
14.	}
15.	}
高亮显示

高亮显示通过绑定图层的onMouseMove事件实现。
1.	dojo.connect(featurelayer, "onMouseMove", function (evt) {
2.	var graphic = evt.graphic;
3.	if (graphic) {
4.	var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([128, 128, 128]), 0.1), new dojo.Color([224, 91, 255, 0.5]));
5.	graphic.setSymbol(symbol);
6.	}
7.	})
恢复正常显示

恢复正常显示通过绑定图层的onMouseOut事件实现。
1.	dojo.connect(featurelayer, "onMouseOut", function (evt) {
2.	var graphic = evt.graphic;
3.	if (graphic) {
4.	graphic.setSymbol(map.fillSymbol);
5.	}
6.	})