使用Dojo的dijit/Menu方法来创建右键菜单

API中有个Edit，它的作用就是对图形进行编辑、移动、旋转、移动、缩放等操作，如果把Edit与Dojo的Menu结合起来，就会方便用户进行操作

效果呈上：

最终的效果：

先来观察一下Edit

思路是右键图形获得图形的graphic以及对应的tool，便可开启编辑功能

再来看一下dijit/Menu官网的例子

require([
    "dijit/Menu",
    "dijit/MenuItem",
    "dojo/domReady!"
], function(Menu, MenuItem){
    var pMenu;
    pMenu = new Menu({
        targetNodeIds: ["progmenu"]
    });
    pMenu.addChild(new MenuItem({
        label: "Simple menu item"
    }));
    pMenu.addChild(new MenuItem({
        label: "Disabled menu item",
        disabled: true
    }));
    pMenu.startup();
});

<span id="progmenu">Right click me to get a menu</span>

效果图：

可以看出它是通过addChild()、startup()来添加右键菜单项以及激活右键菜单功能的

在实际应用中，我们需要以下几步：

一、加入相关js与css(其中的claro也很重要，因为它是针对dijit设计的，不使用的话，菜单样式就会乱七八糟)

<link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.25/dijit/themes/claro/claro.css">
<script src="https://js.arcgis.com/3.25/"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

二、加入相关模块

["esri/map",
"esri/toolbars/draw",
"esri/toolbars/edit",
"esri/graphic",
"esri/symbols/SimpleFillSymbol",
"esri/InfoTemplate",
"esri/layers/GraphicsLayer",
"dijit/Menu", "dijit/MenuItem", "dijit/MenuSeparator",
"dojo/domReady!"], 
function (Map,  Draw, Edit, Graphic, SimpleFillSymbol, InfoTemplate, GraphicsLayer,
Menu, MenuItem, MenuSeparator)

三、添加绘图功能

var toolbar = new Draw(map);
//画图开启
$("#drawbtn").click(function () {
    toolbar.activate(Draw.POLYGON);
});
//画图关闭
$("#stopbtn").click(function () {
    toolbar.deactivate();
})
//关闭后调用的方法
toolbar.on("draw-complete", drawGeo);
var edit = new Edit(map);
var fill = new SimpleFillSymbol();
function drawGeo(evt) {
    geo = evt.geometry;
    var attr = {};
    var infotemplate = new InfoTemplate(attr);
    //添加graphic
    map.graphics.add(new Graphic(geo, fill));
    //激活右键菜单功能
    createGraphicsMenu();
}

四、核心菜单部分

function createGraphicsMenu() {
    var selectedgra;
    var menu = new Menu({});
    menu.addChild(new MenuItem({
        label: "编辑",
        onClick: function () {
        edit.activate(Edit.EDIT_VERTICES, selectedgra)
        }
    }));
    menu.addChild(new MenuItem({
        label: "旋转",
        onClick: function () {
        edit.activate(Edit.ROTATE, selectedgra)
        }
    }))
    //记住必须开启
    menu.startup();
    map.graphics.on("mouse-over", function (evt) {
        //获取右键点击的graphic属性，传递给Edit
        selectedgra = evt.graphic;
        //将菜单绑定到右键点击的graphic上
        menu.bindDomNode(evt.graphic.getDojoShape().getNode());
    });
    //点击地图任意区域关闭编辑功能
    map.on("click", function (evt) {
    edit.deactivate();
    });
}

注意：为什么用mouse-over呢？是为了获取evt.graphic.getDojoShape().getNode()，然后把menu绑定到这个Node上（即用户右键点击的图形），其实火狐的event.explicitOriginalTarget也可以达到这个效果，但是为了更好的兼容性，还是就用getNode()吧

其实观察GraphicAPI的方法

返回了一个Shape类型，接着点进这个Shape链接，进入dojo对应的Shape的API，找到getNode()就会一目了然（额。。可能不那么一目了然），最后一句话：Returns the underlying graphics Node

完整代码贴出！

<!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" href="https://js.arcgis.com/3.25/esri/css/esri.css">
    <!--此css极其重要，因为它是针对dijit设计的-->
    <link rel="stylesheet" href="https://js.arcgis.com/3.25/dijit/themes/claro/claro.css">
    <script src="https://js.arcgis.com/3.25/"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        input.mydraw {
            position: absolute;
            top: 20px;
            z-index: 999;
            height: 30px;
            width: 80px;
            cursor: pointer;
        }

        #drawbtn {
            left: 60px;
        }

        #stopbtn {
            left: 150px;
        }
    </style>

</head>

<body>
    <div id="map">
        <input class="mydraw" id="drawbtn" type="button" value="画图" />
        <input class="mydraw" id="stopbtn" type="button" value="停止" />
    </div>
    <script>
        var map;
        var geo;

        require(["esri/map",
            "esri/toolbars/draw",
            "esri/toolbars/edit",
            "esri/graphic",
            "esri/symbols/SimpleFillSymbol",
            "esri/InfoTemplate",
            "esri/layers/GraphicsLayer",
            "dijit/Menu", "dijit/MenuItem", "dijit/MenuSeparator",
            "dojo/domReady!"], function (Map,  Draw, Edit, Graphic, SimpleFillSymbol, InfoTemplate, GraphicsLayer,
                Menu, MenuItem, MenuSeparator
                ) {
                map = new Map("map", {
                    basemap: "osm",
                    center: [118.8, 32],
                    zoom: 8
                });

                var toolbar = new Draw(map);
                //画图开启
                $("#drawbtn").click(function () {
                    toolbar.activate(Draw.POLYGON);
                });

                //画图关闭
                $("#stopbtn").click(function () {
                    toolbar.deactivate();
                })
                //关闭后调用的方法
                toolbar.on("draw-complete", drawGeo);

                var edit = new Edit(map);
                var fill = new SimpleFillSymbol();

                function drawGeo(evt) {
                    geo = evt.geometry;
                    var attr = {};
                    var infotemplate = new InfoTemplate(attr);
                    //添加graphic
                    map.graphics.add(new Graphic(geo, fill));
                    //激活右键菜单功能
                    createGraphicsMenu();

                }


                function createGraphicsMenu() {
                    var selectedgra;
                    var menu = new Menu({});
                    menu.addChild(new MenuItem({
                        label: "编辑",
                        onClick: function () {
                            edit.activate(Edit.EDIT_VERTICES, selectedgra)
                        }
                    }));
                    menu.addChild(new MenuItem({
                        label: "旋转",
                        onClick: function () {
                            edit.activate(Edit.ROTATE, selectedgra)
                        }
                    }))
                    //记住必须开启
                    menu.startup();
                    //explicitOriginalTarget
                    map.graphics.on("mouse-over", function (evt) {
                        selectedgra = evt.graphic;
                        console.log(evt.graphic.getDojoShape().getNode())
                        menu.bindDomNode(evt.graphic.getDojoShape().getNode());
                    });
                    //点击地图关闭编辑功能
                    map.on("click", function (evt) {
                        edit.deactivate();
                    });
                }
            });
    </script>
</body>
</html>

使用Dojo的dijit/Menu方法来创建右键菜单

猜你喜欢