ArcGIS API For JavaScript 实现鼠标移入graphic提醒功能

最新推荐文章于 2024-07-23 16:56:42 发布

idomyway

最新推荐文章于 2024-07-23 16:56:42 发布

阅读量5k

点赞数 4

分类专栏： ArcGIS JS 开发实例文章标签： javascript api arcgis 鼠标移入提醒

本文链接：https://blog.csdn.net/idomyway/article/details/79767454

版权

ArcGIS JS 开发实例专栏收录该内容

21 篇文章 4 订阅

订阅专栏

前言

实现鼠标移入graphic提醒功能，类似于Dom元素的title属性

实现代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js"></script>
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }
    </style>
    <script>
        var cityInfo = [
            {"id":0,"name":"北京","X":116.068276,"Y":39.892225},
            {"id":1,"name":"乌鲁木齐","X":87.575829,"Y":43.782212},
            {"id":2,"name":"拉萨","X":91.162998,"Y":29.71042},
            {"id":3,"name":"西宁","X":101.797303,"Y":36.593642},
            {"id":4,"name":"兰州","X":103.584297,"Y":36.119086},
            {"id":5,"name":"成都","X":104.035508,"Y":30.714179},
            {"id":6,"name":"重庆","X":106.519115,"Y":29.478925},
            {"id":7,"name":"贵阳","X":106.668071,"Y":26.457312},
            {"id":8,"name":"昆明","X":102.726775,"Y":24.969385},
            {"id":9,"name":"银川","X":106.167225,"Y":38.598524},
            {"id":10,"name":"西安","X":108.967128,"Y":34.276112},
            {"id":11,"name":"南宁","X":108.233931,"Y":22.748296},
            {"id":12,"name":"海口","X":110.346181,"Y":19.96992},
            {"id":13,"name":"广州","X":113.226683,"Y":23.18307},
            {"id":14,"name":"长沙","X":112.947928,"Y":28.169916},
            {"id":15,"name":"南昌","X":115.893715,"Y":28.652363},
            {"id":16,"name":"福州","X":119.246768,"Y":26.070765},
            {"id":17,"name":"台北","X":121.503567,"Y":25.008274},
            {"id":18,"name":"杭州","X":120.183046,"Y":30.330584},
            {"id":19,"name":"上海","X":121.449707,"Y":31.253361},
            {"id":20,"name":"武汉","X":114.216597,"Y":30.579253},
            {"id":21,"name":"合肥","X":117.262302,"Y":31.838353},
            {"id":22,"name":"南京","X":118.805692,"Y":32.085022},
            {"id":23,"name":"郑州","X":113.6511,"Y":34.746308},
            {"id":24,"name":"济南","X":117.048331,"Y":36.60841},
            {"id":25,"name":"石家","X":114.478215,"Y":38.033276},
            {"id":26,"name":"太原","X":112.483066,"Y":37.798404},
            {"id":27,"name":"呼和浩特","X":111.842806,"Y":40.895751},
            {"id":28,"name":"天津","X":117.351094,"Y":38.925719},
            {"id":29,"name":"沈阳","X":123.296299,"Y":41.801604},
            {"id":30,"name":"长春","X":125.26142,"Y":43.981984},
            {"id":31,"name":"哈尔","X":126.567138,"Y":45.69381},
            {"id":33,"name":"香港","X":114.093117,"Y":22.427852},
            {"id":34,"name":"澳门","X":113.552482,"Y":22.184495}];

        var map,sr;
        var index = 0,t=0;
        require([
                "esri/map",
                "esri/layers/ArcGISDynamicMapServiceLayer",
                "esri/layers/GraphicsLayer",
                "esri/symbols/PictureMarkerSymbol",
                "esri/symbols/SimpleLineSymbol", //简单线符号
                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleFillSymbol",
                "esri/geometry/Circle",
                "esri/geometry/Polyline",
                "esri/graphic",
                "dojo/_base/Color",
                "esri/geometry/Point",
                "dojo/on",
                "dojo/dom",
                "dojo/dom-construct",
                "dojo/dom-attr",
                "dojo/dom-style",
                "dojo/domReady!"],
            function(Map,
                     ArcGISDynamicMapServiceLayer,
                     GraphicsLayer,
                     PictureMarkerSymbol,
                     SimpleLineSymbol,
                     SimpleMarkerSymbol,
                     SimpleFillSymbol,
                     Circle,
                     Polyline,
                     Graphic,
                     Color,
                     Point,
                     on,
                     dom,
                     domConstruct,
                     domAttr,
                     domStyle
            ) {
                map = new Map("map",{logo:false});
                var tiled = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/firstTest/firstService/MapServer");
                map.addLayer(tiled, 0);
                sr = map.spatialReference;
                var mapCenter = new Point(103.847, 36.0473, sr);
                map.centerAndZoom(mapCenter);

                var popupLayer = new GraphicsLayer({"id":"popupLayer"});
                map.addLayer(popupLayer, 2);
                map.on("load",function(){
                    addReadPopup(cityInfo);
                });
                function addReadPopup(data){
                    for(var i= 0;i<data.length;i++){
                        var pms = new PictureMarkerSymbol('images/red.png', 14, 16);
                        var pt=new Point(data[i].X,data[i].Y,sr);
                        var graphic = new Graphic(pt, pms, data[i]);
                        popupLayer.add(graphic);
                    }
                }
                popupLayer.on("click",popupLayerClick);
                popupLayer.on("mouse-over",popupLayerOver);
                popupLayer.on("mouse-out",popupLayerOut);
                function popupLayerClick(evt){
                    var graphic = evt.graphic;
                    map.infoWindow.setTitle(graphic.attributes.name);
                    map.infoWindow.setContent(graphic.attributes.name);
                    map.infoWindow.show(graphic.geometry);
                }
                function popupLayerOver(e){
                    map.setMapCursor("pointer");
                    console.log(e.graphic.attributes);
                    var scrPt = map.toScreen(e.graphic.geometry);
                    var textDiv = domConstruct.create("div");
                    domAttr.set(textDiv,{
                        "id":"text"
                    });
                    domStyle.set(textDiv, {
                        "left": scrPt.x+10 + "px",
                        "top": scrPt.y+10 + "px",
                        "position": "absolute",
                        "z-index":99,
                        "background":"#fcffd1",
                        "font-size":"10px",
                        "border":"1px solid #0096ff",
                        "padding": "0.1em 0.3em 0.1em",
                        "border-radius": "3px",
                        "box-shadow": "0 0 0.75em #777777"
                    });
                    textDiv.innerHTML ="当前是："+e.graphic.attributes.name;
                    dom.byId("map").appendChild(textDiv);
                }
                function popupLayerOut(e){
                    map.setMapCursor("default");
                    dom.byId("map").removeChild(dom.byId("text"));
                }

            });
    </script>
</head>

<body>
    <div id="map">
    </div>
</body>
</html>