ArcGIS API For JS 实现右键菜单栏的功能
最近一直被一个问题所困扰，像百度地图、高德地图、这些地图api，都有一些借口供我们调用，最近做了还好几个关于这几个地图api和OL结合，遇到一个问题就是偏移的问题，一时间无法解决。好了不扯了进入正题，这个demo是arcgis api管网给出的demo,感觉写的挺好的，在这里加点注解分享一下。
先来张图：
一完整demo
<!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>右键菜单栏</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.25/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
100%;
overflow: hidden;
}
div.insetType {
color: #97F900;
font-size: 24px;
font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
padding-left: 25px;
}
</style>
<script src="https://js.arcgis.com/3.25/"></script>
<script>
var map, editToolbar, ctxMenuForGraphics, ctxMenuForMap;
var selected, currentLocation;
require([
"esri/map",
"esri/geometry/Point",
"esri/geometry/Polygon",
"esri/toolbars/draw",
"esri/toolbars/edit",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/graphic",
"esri/geometry/jsonUtils",
"esri/Color",
"dojo/parser",
"dijit/Menu",
"dijit/MenuItem",
"dijit/MenuSeparator",
"dijit/form/Button",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function (
Map, Point, Polygon,
Draw, Edit,
SimpleMarkerSymbol, SimpleLineSymbol,
SimpleFillSymbol,
Graphic, geometryJsonUtils,
Color, parser,
Menu, MenuItem, MenuSeparator
) {
parser.parse();
map = new Map("map", {
basemap: "satellite",
center: [20.039, 62.739],
zoom: 3
});
//地图加载事件
map.on("load", createToolbarAndContextMenu);
function createToolbarAndContextMenu() {
// 添加图层
addGraphics();
// 创建一个编辑工具
editToolbar = new Edit(map);
//地图点击事件
map.on("click", function (evt) {
editToolbar.deactivate();
});
//添加点按钮
createMapMenu();
//添加主菜单栏
createGraphicsMenu();
}
//创建点主菜单栏
function createMapMenu() {
ctxMenuForMap = new Menu({
onOpen: function (box) {
//当前点的位置
currentLocation = getMapPointFromMenuPosition(box);
editToolbar.deactivate();
}
});
//添加子菜单栏
ctxMenuForMap.addChild(new MenuItem({
label: "添加点",
onClick: function (evt) {
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_SQUARE,
30,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([200, 235, 254, 0.9]),
2
), new Color([200, 235, 254, 0.5]));
var graphic = new Graphic(geometryJsonUtils.fromJson(currentLocation.toJson()), symbol);
map.graphics.add(graphic);
}
}));
//小部件启动
ctxMenuForMap.startup();
//绑定父容器
ctxMenuForMap.bindDomNode(map.container);
}
//编辑等右键菜单栏函数封装
function createGraphicsMenu() {
// Creates right-click context menu for GRAPHICS
ctxMenuForGraphics = new Menu({});
ctxMenuForGraphics.addChild(new MenuItem({
label: "编辑",
onClick: function () {
if (selected.geometry.type !== "point") {
editToolbar.activate(Edit.EDIT_VERTICES, selected);
} else {
alert("Not implemented");
}
}
}));
ctxMenuForGraphics.addChild(new MenuItem({
label: "移动",
onClick: function () {
editToolbar.activate(Edit.MOVE, selected);
}
}));
ctxMenuForGraphics.addChild(new MenuItem({
label: "旋转",
onClick: function () {
if (selected.geometry.type !== "point") {
editToolbar.activate(Edit.ROTATE | Edit.SCALE, selected);
} else {
alert("Not implemented");
}
}
}));
ctxMenuForGraphics.addChild(new MenuItem({
label: "样式",
onClick: function () {
alert("Not implemented");
}
}));
ctxMenuForGraphics.addChild(new MenuSeparator());
ctxMenuForGraphics.addChild(new MenuItem({
label: "删除",
onClick: function () {
map.graphics.remove(selected);
}
}));
ctxMenuForGraphics.startup();
//给每个graphics添加鼠标移入事件
map.graphics.on("mouse-over", function (evt) {
//获取当前鼠标悬浮的graphic
selected = evt.graphic;
// Let's bind to the graphic underneath the mouse cursor
ctxMenuForGraphics.bindDomNode(evt.graphic.getDojoShape().getNode());
console.log(evt.graphic.getDojoShape().getNode());
});
//给每个graphics添加鼠标移出事件
map.graphics.on("mouse-out", function (evt) {
ctxMenuForGraphics.unBindDomNode(evt.graphic.getDojoShape().getNode());
});
}
// 确定弹窗的位置
function getMapPointFromMenuPosition(box) {
var x = box.x, y = box.y;
switch (box.corner) {
case "TR":
x += box.w;
break;
case "BL":
y += box.h;
break;
case "BR":
x += box.w;
y += box.h;
break;
}
var screenPoint = new Point(x - map.position.x, y - map.position.y);
return map.toMap(screenPoint);
}
//添加图形函数
function addGraphics() {
var polygonSymbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_DOT,
new Color([151, 249, 0, 0.8]),
3
),
new Color([151, 249, 0, 0.45])
);
var polygon = new Polygon({
"rings": [
[
[-4226661.916056009, 8496372.808143634],
[-3835304.3312360067, 8731187.359035634],
[-2269873.991956003, 9005137.668409634],
[-1213208.5129420012, 8613780.083589634],
[-1017529.7205320001, 8065879.464841632],
[-1213208.5129420012, 7478843.087611631],
[-2230738.233474003, 6891806.710381631],
[-2935181.8861500043, 6735263.6764536295],
[-3522218.263380006, 6891806.710381631],
[-3952711.606682008, 7165757.01975563],
[-4265797.674538009, 7283164.295201631],
[-4304933.433020009, 7635386.121539632],
[-4304933.433020009, 7674521.880021632],
[-4226661.916056009, 8496372.808143634]
]
],
"spatialReference": {
"wkid": 102100
}
});
var arrow = new Polygon({
"rings": [
[
[9862211.137464028, 6617856.40100763],
[8922952.933896024, 5522055.163511626],
[8922952.933896024, 5991684.265295628],
[6105178.323192019, 5991684.265295628],
[6105178.323192019, 7087485.50279163],
[8922952.933896024, 7087485.50279163],
[8922952.933896024, 7557114.604575632],
[9862211.137464028, 6617856.40100763]
]
],
"spatialReference": {
"wkid": 102100
}
});
var triangle = new Polygon({
"rings": [
[
[2426417.02588401, 8535508.566625634],
[4304933.433020014, 12292541.380897645],
[6183449.840156019, 8535508.566625634],
[2426417.02588401, 8535508.566625634]
]
],
"spatialReference": {
"wkid": 102100
}
});
map.graphics.add(new Graphic(polygon, polygonSymbol));
map.graphics.add(new Graphic(arrow, polygonSymbol));
map.graphics.add(new Graphic(triangle, polygonSymbol));
}
});
</script>
</head>
<body class="claro" style="font-size: 0.75em;">
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="100%;height:100%;">
<div ></div>
</div>
</body>
</html>