目录
2、调用SketchViewModel为图形添加Symbol
分布实现
1、添加控件按钮
<div id="topbar">
<button class="action-button esri-icon-blank-map-pin" id="pointButton" type="button" title="Draw point"></button>
<button class="action-button esri-icon-polyline" id="polylineButton" type="button" title="Draw polyline"></button>
<button class="action-button esri-icon-polygon" id="polygonButton" type="button" title="Draw polygon"></button>
<button class="action-button esri-icon-checkbox-unchecked" id="rectangleButton" type="button" title="Draw rectangle"></button>
<button class="action-button esri-icon-radio-unchecked" id="circleButton" type="button" title="Draw circle"></button>
<button class="action-button esri-icon-trash" id="resetButton" type="button" title="Clear graphics"></button>
<div>
2、调用SketchViewModel为图形添加Symbol
var sketchViewModel = new SketchViewModel({
view:view,
layer: tempGraphicsLayer,
pointSymbol:{
type:"simple-marker",
style:"square",
color:"#8A2BE2",
size:"16px",
outline:{
color:[255,255,255],
width:3
}
},
polylineSymbol:{
type:"simple-line",
color:"#8A2BE2",
width:"4",
style:"dash"
},
polygonSymbol:{
type:"simple-fill",
color:"rgba(138,43,226,0.8)",
style:"solid",
outline:{
color:"white",
width:1
}
}
})
3、添加激发事件
sketchViewModel.on("create-complete", function(event){
const graphic = new Graphic({
geometry:event.geometry,
symbol:sketchViewModel.graphic.symbol
});
tempGraphicsLayer.add(graphic);
});
4、功能实现
var drawPointButton = document.getElementById("pointButton");
drawPointButton.onclick = function(){
sketchViewModel.create("point");
setActiveButton(this);
};
var drawlineButton = document.getElementById("polylineButton");
drawlineButton.onclick = function(){
sketchViewModel.create("polyline");
setActiveButton(this);
};
var drawpolygonButton = document.getElementById("polygonButton");
drawpolygonButton.onclick = function(){
sketchViewModel.create("polygon");
setActiveButton(this);
};
var drawrectangleButton = document.getElementById("rectangleButton");
drawrectangleButton.onclick = function(){
sketchViewModel.create("rectangle");
setActiveButton(this);
};
var drawcircleButton = document.getElementById("circleButton");
drawcircleButton.onclick = function(){
sketchViewModel.create("circle");
setActiveButton(this);
};
5、添加清空页面的删除功能
sketchViewModel.on("create-complete", addGraphic);
function addGraphic(event){
const graphic = new Graphic({
geometry: event.geometry,
symbol:sketchViewModel.graphic.symbol
});
tempGraphicsLayer.add(graphic);
};
document.getElementById("resetButton").onclick=function(){
tempGraphicsLayer.removeAll();
sketchViewModel.reset();
}
整体代码参考:
<html>
<head>
<meta content="charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximun-scale=1 user-scalable=no" />
<title>geometry</title>
<style>
html,
body,
#viewDiv{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.23/"></script>
<script>7
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/widgets/Sketch/SketchViewModel"],
function (
Map,
MapView,
Graphic,
Graphicslayer,
SketchViewModel)
{
const tempGraphicsLayer = new Graphicslayer({
id:"tempGraphics"
});
const map= new Map({
basemap:"oceans",
layers:[tempGraphicsLayer]
});
const view =new MapView({
map: map,
zoom:3,
container:"viewDiv"
});
var sketchViewModel = new SketchViewModel({
view:view,
layer: tempGraphicsLayer,
pointSymbol:{
type:"simple-marker",
style:"square",
color:"#8A2BE2",
size:"16px",
outline:{
color:[255,255,255],
width:3
}
},
polylineSymbol:{
type:"simple-line",
color:"#8A2BE2",
width:"4",
style:"dash"
},
polygonSymbol:{
type:"simple-fill",
color:"rgba(138,43,226,0.8)",
style:"solid",
outline:{
color:"white",
width:1
}
}
})
sketchViewModel.on("create-complete", function(event){
const graphic = new Graphic({
geometry:event.geometry,
symbol:sketchViewModel.graphic.symbol
});
tempGraphicsLayer.add(graphic);
});
var drawPointButton = document.getElementById("pointButton");
drawPointButton.onclick = function(){
sketchViewModel.create("point");
setActiveButton(this);
};
var drawlineButton = document.getElementById("polylineButton");
drawlineButton.onclick = function(){
sketchViewModel.create("polyline");
setActiveButton(this);
};
var drawpolygonButton = document.getElementById("polygonButton");
drawpolygonButton.onclick = function(){
sketchViewModel.create("polygon");
setActiveButton(this);
};
var drawrectangleButton = document.getElementById("rectangleButton");
drawrectangleButton.onclick = function(){
sketchViewModel.create("rectangle");
setActiveButton(this);
};
var drawcircleButton = document.getElementById("circleButton");
drawcircleButton.onclick = function(){
sketchViewModel.create("circle");
setActiveButton(this);
};
sketchViewModel.on("create-complete", addGraphic);
function addGraphic(event){
const graphic = new Graphic({
geometry: event.geometry,
symbol:sketchViewModel.graphic.symbol
});
tempGraphicsLayer.add(graphic);
};
document.getElementById("resetButton").onclick=function(){
tempGraphicsLayer.removeAll();
sketchViewModel.reset();
}
});
</script>
</head>
<body>
<div id="viewDiv">
<div id="topbar">
<button class="action-button esri-icon-blank-map-pin" id="pointButton" type="button" title="Draw point"></button>
<button class="action-button esri-icon-polyline" id="polylineButton" type="button" title="Draw polyline"></button>
<button class="action-button esri-icon-polygon" id="polygonButton" type="button" title="Draw polygon"></button>
<button class="action-button esri-icon-checkbox-unchecked" id="rectangleButton" type="button" title="Draw rectangle"></button>
<button class="action-button esri-icon-radio-unchecked" id="circleButton" type="button" title="Draw circle"></button>
<button class="action-button esri-icon-trash" id="resetButton" type="button" title="Clear graphics"></button>
</div>
</div>
</body>
</html>