arcgis for js 开发系列之地图实现右键点击事件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Simple Map</title>
    <link rel="stylesheet" type="text/css"
          href="http://127.0.0.1/arcgis_js_api/library/3.16/3.16/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css"
          href="http://127.0.0.1/arcgis_js_api/library/3.16/3.16/esri/css/esri.css"/>
    <script type="text/javascript" src="http://127.0.0.1/arcgis_js_api/library/3.16/3.16/init.js"></script>
    <script type="text/javascript">
        document.oncontextmenu = function (e) {
            e.preventDefault();
        };
        require([
            "esri/map", "esri/geometry/Point", "esri/SpatialReference","esri/toolbars/edit",
            "esri/symbols/SimpleMarkerSymbol", "esri/graphic", "esri/InfoTemplate","dijit/Menu",
            "dijit/MenuItem",
            "dijit/MenuSeparator",
        ], function (Map, Point, SpatialReference, SimpleMarkerSymbol, Graphic, InfoTemplate,Edit, Menu, MenuItem, MenuSeparator) {
            map = new Map("mapDiv", {
                basemap:"osm",
                center: [117.12277857421876, 36.632967052981364],
                zoom: 10,
                logo: false
            });
           /* var parcelsURL = "http://127.0.0.1:6080/arcgis/rest/services/China/MapServer";
            map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer(parcelsURL));*/
            map.on("load", doh);

            function doh() {

                var point = new Point(117.12277857421876, 36.632967052981364, new SpatialReference({wkid: 4326}));
                var symbol = new esri.symbol.PictureMarkerSymbol("http://lbsyun.baidu.com/jsdemo/img/fox.gif", 80, 80);
                var graphic = new esri.Graphic(point, symbol/*,attr,infoTemplate*/);
                map.graphics.add(graphic);
                dojo.connect(map.graphics,"onMouseDown",function (e) {
                    if(e.button == 2){
                        ctxMenuForGraphics = new Menu({});
                        createGraphicsMenu(e);
                        //添加主菜单栏
                        ctxMenuForGraphics.bindDomNode(e.graphic.getDojoShape().getNode());
                    }

                })

                function createGraphicsMenu(e) {
                    ctxMenuForGraphics.addChild(new MenuItem({
                        label: "<a><img src=\"http://lbsyun.baidu.com/jsdemo/img/fox.gif\" style='width: 30px; height: 30px; vertical-align: middle;'>查看轨迹</a>",
                        onClick: function () {

                        }
                    }));

                    ctxMenuForGraphics.addChild(new MenuItem({
                        label: "<a><img src=\"http://lbsyun.baidu.com/jsdemo/img/fox.gif\" style='width: 30px; height: 30px; vertical-align: middle;'>管控记录</a>",
                        onClick: function () {

                        }
                    }));

                    ctxMenuForGraphics.addChild(new MenuItem({
                        label: "<a><img src=\"http://lbsyun.baidu.com/jsdemo/img/fox.gif\" style='width: 30px; height: 30px; vertical-align: middle;'>云端布控</a>",
                        onClick: function () {
                            alert("Not implemented");
                        }
                    }));
                    ctxMenuForGraphics.startup();
                }
            }
        });


    </script>
</head>
<body class="tundra">
<div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
</body>
</html>
arcgis for js 开发系列之地图实现右键点击事件

猜你喜欢
