英文:
Disable drag/move of a graphic picture marker using arcgis javascript 4.x
问题
使用ArcGIS JavaScript API 4.x。我有以下图片标记：
// 图形图层
graphicsLayer = new GraphicsLayer();
theMap.add(graphicsLayer);
// 点符号
const pointSymbol = {
type: "picture-marker",
url: "pictures/mymarker.png",
width: "32px",
height: "32px"
};
// 图形对象以容纳图片标记
const pointGraphic = new Graphic({
geometry: myPoint,
symbol: pointSymbol
});
graphicsLayer.add(pointGraphic);
我的问题是如何禁用标记的选择以及如何禁用标记的拖动？
我希望有一种设置，比如 draggable: false，但实际上这种设置不存在：
const pointGraphic = new Graphic({
geometry: myPoint,
symbol: pointSymbol,
draggable: false // 这个设置不存在
});
解决方案
多亏了Cabesuon的下面示例，我弄清楚了为什么点会变得可拖动的问题。实际上，默认情况下点不应该是可拖动的。但是，如果您在相同的图形图层中创建一个绘图对象，那么一切都会变得可拖动。解决方案很简单：只需使用不同的名称创建绘图对象。在上面的示例中，我有：
sketch = new Sketch({
view: view,
layer: graphicsLayer,
...
我只是将它更改为：
sketch = new Sketch({
view: view,
layer: createDifferentLayerNameHereJustForSketch,
...
问题就解决了。点不再可拖动。
英文:
Using ArcGIS Javascript API 4.x. I have the following picture marker:
// graphics layer
graphicsLayer = new GraphicsLayer();
theMap.add(graphicsLayer);
// point symbol
const pointSymbol = {
type: "picture-marker",
url: "pictures/mymarker.png",
width: "32px",
height: "32px"
};
// graphic object to hold picture marker
const pointGraphic = new Graphic({
geometry: myPoint,
symbol: pointSymbol
});
graphicsLayer.add(pointGraphic);
My question is how do I disable selection of the marker and how do I disable drag of the marker?
I was hoping there is a setting such as draggable: false but this does not exist:
const pointGraphic = new Graphic({
geometry: myPoint,
symbol: pointSymbol,
draggable: false // THIS DOES NOT EXIST
});
Solution
Thanks to Cabesuon's example below, I figured out the issue why the point was becoming draggable. By default actually the point should not be draggable. But if you create a sketch object in the same graphicslayer, everything becomes draggable. The solution was simple: just create the sketch object using a different name. In the above example, I had:
sketch = new Sketch({
view: view,
layer: graphicsLayer,
...
I just changed it to:
sketch = new Sketch({
view: view,
layer: createDifferentLayerNameHereJustForSketch,
...
And the problem was resolved. The point is no longer draggable.
答案1
得分: 1
以下是您要翻译的内容：
默认情况下，左鼠标“拖动”（点击、按住并移动）按钮的操作是平移视图，右鼠标“拖动”按钮的操作是旋转视图。您不应该能够仅通过添加到问题中的代码来移动图形或要素。
这是一个简单的代码片段，用于说明我的意思。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Picture Marker Symbol</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.26/"></script>
<script src="https://developers.arcgis.com/javascript/latest/sample-code/satellites-3d/live/satellite.js"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"esri/request"
], (Map, MapView, GraphicsLayer, Graphic, esriRequest) => {
const map = new Map({
basemap: "satellite"
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 5,
center: [-101.94981250000075, 41.20977753557709],
});
const graphicsLayer = new GraphicsLayer();
const graphic = new Graphic({
geometry: {
type: "point",
x: -101.94981250000075,
y: 41.20977753557709
},
symbol: {
type: "picture-marker",
url: "https://developers.arcgis.com/javascript/latest/sample-code/satellites-3d/live/satellite.png",
width: 64,
height: 64
}
});
graphicsLayer.add(graphic);
map.add(graphicsLayer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
请注意，我已经将您提供的HTML代码翻译成中文。
英文:
By default the left mouse "drag" (click, hold and move) button action is to pan the view and the right mouse "drag" button action is to rotate the view. You should NOT be able to move a graphic or feature just with the code you add to the question.
This is a simple snippet to show what I am saying.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>
Picture Marker Symbol
</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.26/"></script>
<script src="https://developers.arcgis.com/javascript/latest/sample-code/satellites-3d/live/satellite.js"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/GraphicsLayer",
"esri/Graphic",
"esri/request"
], (Map, MapView, GraphicsLayer, Graphic, esriRequest) => {
const map = new Map({
basemap: "satellite"
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 5,
center: [-101.94981250000075, 41.20977753557709],
});
const graphicsLayer = new GraphicsLayer();
const graphic = new Graphic({
geometry: {
type: "point", // autocasts as new Point()
x: -101.94981250000075,
y: 41.20977753557709
},
symbol: {
type: "picture-marker", // autocasts as new PictureMarkerSymbol()
url: "https://developers.arcgis.com/javascript/latest/sample-code/satellites-3d/live/satellite.png",
width: 64,
height: 64
}
});
graphicsLayer.add(graphic);
map.add(graphicsLayer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论