一、演示效果
右键效果
二、Speak little, show code. :)
- Html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Get map coordinates</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.14/"></script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
- Style
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
- JavaScript
require(["esri/Map", "esri/views/MapView"], function (Map, MapView) {
var map = new Map({
basemap: "dark-gray-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [104.07, 30.67],
zoom: 13
});
var rightMenu = document.createElement("div");
rightMenu.id = "menu";
rightMenu.className = "esri-widget esri-component";
rightMenu.style.padding = "5px 10px 5px";
rightMenu.style.cursor = "pointer";
rightMenu.style.display = "none";
rightMenu.innerHTML = "<div id='ok'>确定</div><div id='cancel'>取消</div>";
view.ui.add(rightMenu);
function changePosition(x, y) {
var div = document.getElementById("menu");
if (rightMenu.style.display === "none") {
div.style.left = x + "px";
div.style.top = y + "px";
}
}
function toggleMenu() {
var div = document.getElementById("menu");
if (rightMenu.style.display === "none") {
rightMenu.style.display = "block";
} else {
rightMenu.style.display = "none";
}
}
view.on(["pointer-down", "pointer-move"], function (evt) {
// 向右移五个像素，以防无法取消菜单
changePosition(evt.x + 5, evt.y);
});
view.on("pointer-down", function (event) {
view.hitTest(event).then(function (response) {
if (response.results[0]) {
var graphic = response.results[0].graphic;
// 可通过graphic 的属性判断点击的类型
// 右键
if (event.button === 2) {
toggleMenu();
}
// 鼠标左键
else if (event.button === 0) {
}
}
});
});
});
三、在线编辑地址
https://codepen.io/liutianba/pen/jOPXNez
