devbox
运维做开发
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ArcGIS API For JS 实现右键菜单栏的功能

作者：运维做开发 | 2024-07-16 15:21:15

赞

踩

arcgis api for js 实现右键菜单栏的功能

最近一直被一个问题所困扰，像百度地图、高德地图、这些地图api，都有一些借口供我们调用，最近做了还好几个关于这几个地图api和OL结合，遇到一个问题就是偏移的问题，一时间无法解决。好了不扯了进入正题，这个demo是arcgis api管网给出的demo,感觉写的挺好的，在这里加点注解分享一下。

先来张图：

一完整demo

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  6.     <title>右键菜单栏</title>
  7.     <link rel="stylesheet" href="https://js.arcgis.com/3.25/dijit/themes/claro/claro.css">
  8.     <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
  9.     <style>
  10.         html, body {
  11.             height: 100%;
  12.             margin: 0;
  13.             padding: 0;
  14.             width: 100%;
  15.             overflow: hidden;
  16.         }
  17.         div.insetType {
  18.             color: #97F900;
  19.             font-size: 24px;
  20.             font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
  21.             padding-left: 25px;
  22.         }
  23.     </style>
  24.     <script src="https://js.arcgis.com/3.25/"></script>
  25.     <script>
  26.         var map, editToolbar, ctxMenuForGraphics, ctxMenuForMap;
  27.         var selected, currentLocation;
  28.         require([
  29.             "esri/map",
  30.             "esri/geometry/Point",
  31.             "esri/geometry/Polygon",
  32.             "esri/toolbars/draw",
  33.             "esri/toolbars/edit",
  34.             "esri/symbols/SimpleMarkerSymbol",
  35.             "esri/symbols/SimpleLineSymbol",
  36.             "esri/symbols/SimpleFillSymbol",
  37.             "esri/graphic",
  38.             "esri/geometry/jsonUtils",
  39.             "esri/Color",
  40.             "dojo/parser",
  41.             "dijit/Menu",
  42.             "dijit/MenuItem",
  43.             "dijit/MenuSeparator",
  44.  
  45.             "dijit/form/Button",
  46.             "dijit/layout/BorderContainer",
  47.             "dijit/layout/ContentPane",
  48.             "dojo/domReady!"
  49.         ], function (
  50.             Map, Point, Polygon,
  51.             Draw, Edit,
  52.             SimpleMarkerSymbol, SimpleLineSymbol,
  53.             SimpleFillSymbol,
  54.             Graphic, geometryJsonUtils,
  55.             Color, parser,
  56.             Menu, MenuItem, MenuSeparator
  57.         ) {
  58.                 parser.parse();
  59.  
  60.                 map = new Map("map", {
  61.                     basemap: "satellite",
  62.                     center: [20.039, 62.739],
  63.                     zoom: 3
  64.             });
  65.                 //地图加载事件
  66.                 map.on("load", createToolbarAndContextMenu);
  67.  
  68.                 function createToolbarAndContextMenu() {
  69.                     // 添加图层
  70.                     addGraphics();
  71.                     // 创建一个编辑工具
  72.                     editToolbar = new Edit(map);
  73.                     //地图点击事件
  74.                     map.on("click", function (evt) {
  75.                         editToolbar.deactivate();
  76.                     });
  77.                     //添加点按钮
  78.                     createMapMenu();
  79.                     //添加主菜单栏
  80.                     createGraphicsMenu();
  81.                 }
  82.                 //创建点主菜单栏
  83.                 function createMapMenu() {                   
  84.                     ctxMenuForMap = new Menu({
  85.                         onOpen: function (box) {
  86.                             //当前点的位置
  87.                             currentLocation = getMapPointFromMenuPosition(box);
  88.                             editToolbar.deactivate();
  89.                         }
  90.                     });
  91.                     //添加子菜单栏
  92.                     ctxMenuForMap.addChild(new MenuItem({
  93.                         label: "添加点",
  94.                         onClick: function (evt) {
  95.                             var symbol = new SimpleMarkerSymbol(
  96.                                 SimpleMarkerSymbol.STYLE_SQUARE,
  97.                                 30,
  98.                                 new SimpleLineSymbol(
  99.                                     SimpleLineSymbol.STYLE_SOLID,
  100.                                     new Color([200, 235, 254, 0.9]),
  101.                                     2
  102.                                 ), new Color([200, 235, 254, 0.5]));
  103.                             var graphic = new Graphic(geometryJsonUtils.fromJson(currentLocation.toJson()), symbol);
  104.                             map.graphics.add(graphic);
  105.                         }
  106.                     }));
  107.                     //小部件启动
  108.                     ctxMenuForMap.startup();
  109.                     //绑定父容器
  110.                     ctxMenuForMap.bindDomNode(map.container);
  111.                 }
  112.                 //编辑等右键菜单栏函数封装
  113.                 function createGraphicsMenu() {
  114.                     // Creates right-click context menu for GRAPHICS
  115.                     ctxMenuForGraphics = new Menu({});
  116.                     ctxMenuForGraphics.addChild(new MenuItem({
  117.                         label: "编辑",
  118.                         onClick: function () {
  119.                             if (selected.geometry.type !== "point") {
  120.                                 editToolbar.activate(Edit.EDIT_VERTICES, selected);
  121.                             } else {
  122.                                 alert("Not implemented");
  123.                             }
  124.                         }
  125.                     }));
  126.  
  127.                     ctxMenuForGraphics.addChild(new MenuItem({
  128.                         label: "移动",
  129.                         onClick: function () {
  130.                             editToolbar.activate(Edit.MOVE, selected);
  131.                         }
  132.                     }));
  133.  
  134.                     ctxMenuForGraphics.addChild(new MenuItem({
  135.                         label: "旋转",
  136.                         onClick: function () {
  137.                             if (selected.geometry.type !== "point") {
  138.                                 editToolbar.activate(Edit.ROTATE | Edit.SCALE, selected);
  139.                             } else {
  140.                                 alert("Not implemented");
  141.                             }
  142.                         }
  143.                     }));
  144.  
  145.                     ctxMenuForGraphics.addChild(new MenuItem({
  146.                         label: "样式",
  147.                         onClick: function () {
  148.                             alert("Not implemented");
  149.                         }
  150.                     }));
  151.  
  152.                     ctxMenuForGraphics.addChild(new MenuSeparator());
  153.                     ctxMenuForGraphics.addChild(new MenuItem({
  154.                         label: "删除",
  155.                         onClick: function () {
  156.                             map.graphics.remove(selected);
  157.                         }
  158.                     }));
  159.  
  160.                     ctxMenuForGraphics.startup();
  161.                     //给每个graphics添加鼠标移入事件
  162.                     map.graphics.on("mouse-over", function (evt) {
  163.                         //获取当前鼠标悬浮的graphic
  164.                         selected = evt.graphic;
  165.  
  166.                         // Let's bind to the graphic underneath the mouse cursor
  167.                         ctxMenuForGraphics.bindDomNode(evt.graphic.getDojoShape().getNode());
  168.                         console.log(evt.graphic.getDojoShape().getNode());
  169.                     });
  170.                     //给每个graphics添加鼠标移出事件
  171.                     map.graphics.on("mouse-out", function (evt) {
  172.                         ctxMenuForGraphics.unBindDomNode(evt.graphic.getDojoShape().getNode());
  173.                     });
  174.                 }
  175.                 // 确定弹窗的位置
  176.                 function getMapPointFromMenuPosition(box) {
  177.                     var x = box.x, y = box.y;
  178.                     switch (box.corner) {
  179.                         case "TR":
  180.                             x += box.w;
  181.                             break;
  182.                         case "BL":
  183.                             y += box.h;
  184.                             break;
  185.                         case "BR":
  186.                             x += box.w;
  187.                             y += box.h;
  188.                             break;
  189.                     }
  190.                     var screenPoint = new Point(x - map.position.x, y - map.position.y);
  191.                     return map.toMap(screenPoint);
  192.                 }
  193.                 //添加图形函数
  194.                 function addGraphics() {                
  195.                     var polygonSymbol = new SimpleFillSymbol(
  196.                         SimpleFillSymbol.STYLE_SOLID,
  197.                         new SimpleLineSymbol(
  198.                             SimpleLineSymbol.STYLE_DOT,
  199.                             new Color([151, 249, 0, 0.8]),
  200.                             3
  201.                         ),
  202.                         new Color([151, 249, 0, 0.45])
  203.                     );
  204.  
  205.                     var polygon = new Polygon({
  206.                         "rings": [
  207.                             [
  208.                                 [-4226661.916056009, 8496372.808143634],
  209.                                 [-3835304.3312360067, 8731187.359035634],
  210.                                 [-2269873.991956003, 9005137.668409634],
  211.                                 [-1213208.5129420012, 8613780.083589634],
  212.                                 [-1017529.7205320001, 8065879.464841632],
  213.                                 [-1213208.5129420012, 7478843.087611631],
  214.                                 [-2230738.233474003, 6891806.710381631],
  215.                                 [-2935181.8861500043, 6735263.6764536295],
  216.                                 [-3522218.263380006, 6891806.710381631],
  217.                                 [-3952711.606682008, 7165757.01975563],
  218.                                 [-4265797.674538009, 7283164.295201631],
  219.                                 [-4304933.433020009, 7635386.121539632],
  220.                                 [-4304933.433020009, 7674521.880021632],
  221.                                 [-4226661.916056009, 8496372.808143634]
  222.                             ]
  223.                         ],
  224.                         "spatialReference": {
  225.                             "wkid": 102100
  226.                         }
  227.                     });
  228.                     var arrow = new Polygon({
  229.                         "rings": [
  230.                             [
  231.                                 [9862211.137464028, 6617856.40100763],
  232.                                 [8922952.933896024, 5522055.163511626],
  233.                                 [8922952.933896024, 5991684.265295628],
  234.                                 [6105178.323192019, 5991684.265295628],
  235.                                 [6105178.323192019, 7087485.50279163],
  236.                                 [8922952.933896024, 7087485.50279163],
  237.                                 [8922952.933896024, 7557114.604575632],
  238.                                 [9862211.137464028, 6617856.40100763]
  239.                             ]
  240.                         ],
  241.                         "spatialReference": {
  242.                             "wkid": 102100
  243.                         }
  244.                     });
  245.  
  246.                     var triangle = new Polygon({
  247.                         "rings": [
  248.                             [
  249.                                 [2426417.02588401, 8535508.566625634],
  250.                                 [4304933.433020014, 12292541.380897645],
  251.                                 [6183449.840156019, 8535508.566625634],
  252.                                 [2426417.02588401, 8535508.566625634]
  253.                             ]
  254.                         ],
  255.                         "spatialReference": {
  256.                             "wkid": 102100
  257.                         }
  258.                     });
  259.  
  260.                     map.graphics.add(new Graphic(polygon, polygonSymbol));
  261.                     map.graphics.add(new Graphic(arrow, polygonSymbol));
  262.                     map.graphics.add(new Graphic(triangle, polygonSymbol));
  263.                 }
  264.             });
  265.     </script>
  266. </head>
  267. <body class="claro" style="font-size: 0.75em;">
  268.     <div data-dojo-type="dijit/layout/BorderContainer"
  269.          data-dojo-props="design:'headline', gutters:false"
  270.          style="width:100%;height:100%;">
  271.         <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  272.     </div>
  273. </body>
  274. </html>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/834915
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号