我有一个JavaSrcipt代码，我曾经用它来插针或指向Esri地图。放下图钉或点后，我也可以获取该图钉/点的坐标。现在，我想更改图钉/点的颜色。我已经使用了这段代码，但是颜色仍然是白色的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>DEA GIS APPLICATION</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.12/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/widgets/Sketch",
"esri/Map",
"esri/layers/GraphicsLayer",
"esri/views/MapView"
], function(Sketch, Map, GraphicsLayer, MapView) {
const layer = new GraphicsLayer();
const map = new Map({
basemap: "streets",
layers: [layer]
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 5,
center: [90, 45]
});
var symbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "circle",
color: "blue",
size: "8px", // pixels
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 0],
width: 1 // points
}
};
const sketch = new Sketch({
layer: layer,
view: view,
symbol: symbol,
availableCreateTools: ["point"]
});
view.ui.add(sketch, "top-right");
sketch.on('create', function(evt) {
console.log("X = ", evt.graphic.geometry.x);
console.log("Y = ", evt.graphic.geometry.y);
});
});
</script>
</head>在此代码上，您会注意到我已经添加了符号及其属性。我已将符号添加到草图常量中。但是颜色id仍然相同。请帮助。
Sketch没有带有“符号”名称的属性。但是你可以
您可以在create事件中执行此操作。
sketch.on('create', function(evt) {
evt.graphic.symbol.color = "blue";
console.log("X = ", evt.graphic.geometry.x);
console.log("Y = ", evt.graphic.geometry.y);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>DEA GIS APPLICATION</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.12/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/widgets/Sketch",
"esri/Map",
"esri/layers/GraphicsLayer",
"esri/views/MapView"
], function(Sketch, Map, GraphicsLayer, MapView) {
const layer = new GraphicsLayer();
const map = new Map({
basemap: "streets",
layers: [layer]
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 5,
center: [90, 45]
});
var symbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "circle",
color: "blue",
size: "8px", // pixels
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 0],
width: 1 // points
}
};
const sketch = new Sketch({
layer: layer,
view: view,
symbol: symbol,
availableCreateTools: ["point"]
});
view.ui.add(sketch, "top-right");
sketch.on('create', function(evt) {
evt.graphic.symbol.color = "blue";
console.log("X = ", evt.graphic.geometry.x);
console.log("Y = ", evt.graphic.geometry.y);
});
});
</script>
</head>
<body>
<div id="viewDiv" />
</body>