标签：map dojo WEBGIS ARCGIS new var 基本操作 evt esri
转载来自：https://blog.csdn.net/kangkang_style/article/details/75601974
<!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>Landuse</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow:hidden;
position: absolute;
}
#map {
padding:1px;
border:solid 2px #444;
-moz-border-radius: 4px;
border-radius: 4px;
float: left;
height: 100%;
width: 80%;
}
#templatePicker {
border: solid 2px #444;
float: right;
height: 100%;
width: auto;
}
</style>
<script src="https://js.arcgis.com/3.21/"></script>
<script>
var map;
var dynamicUrl="http://localhost:6080/arcgis/rest/services/MyMapService/MapServer";
var pointUrl="http://localhost:6080/arcgis/rest/services/MyMapService/FeatureServer/0";
var lineUrl="http://localhost:6080/arcgis/rest/services/MyMapService/FeatureServer/1";
var polygonUrl="http://localhost:6080/arcgis/rest/services/MyMapService/FeatureServer/2";
var graValues=[];
var geoValues=[];
var graphicResult=[];
var attrbu;
var lineSymbol;
require([
"esri/map",
"esri/toolbars/draw",
"esri/toolbars/edit",
"esri/graphic",
"esri/layers/FeatureLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/renderers/SimpleRenderer",
"esri/Color",
"esri/layers/TableDataSource",
"esri/layers/LayerDataSource",
"esri/dijit/editing/TemplatePicker",
"dojo/_base/array",
"dojo/_base/event",
"dojo/_base/lang",
"dojo/parser",
"dojo/on",
"dojo/dom",
"dojo/query",
"dojo/domReady!"
], function(
Map,
Draw,
Edit,
Graphic,
FeatureLayer,
ArcGISDynamicMapServiceLayer,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
SimpleRenderer,
Color,
TableDataSource,
LayerDataSource,
TemplatePicker,
arrayUtils,
event,
lang,
parser,
on,
dom,
query
){
parser.parse();
//加载地图
map = new Map("map");
var dynamicLayer=new ArcGISDynamicMapServiceLayer(dynamicUrl);
//清缓存
dynamicLayer.setDisableClientCaching(true);
map.addLayer(dynamicLayer);
//图层加载，绑定监听
map.on("layers-add-result", initEditing);
var pointLayer = new FeatureLayer(pointUrl ,{
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
var lineLayer = new FeatureLayer(lineUrl, {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
var polygonLayer = new FeatureLayer(polygonUrl, {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
map.addLayers([pointLayer,lineLayer,polygonLayer]);
function initEditing(evt) {
//当前图层
var currentLayer = null;
//dojo/array.map();获取当前添加图层--此处为图层数组
var layers = arrayUtils.map(evt.layers, function(result) {
return result.layer;
});
//编辑工具
var editToolbar = new Edit(map,{
showToolTips:true
});
//编辑监听编辑结束事件
editToolbar.on("deactivate", function(evt) {
currentLayer.applyEdits(null, [evt.graphic], null);
});
//dojo/array.forEach()遍历数组中每个图层
arrayUtils.forEach(layers, function(dynamicLayer) {
//第一部分
//可编辑状态--默认值为false
var editingEnabled = false;
//底图添加双击监听
dynamicLayer.on("dbl-click", function(evt) {
//双击事件拦截--防止放大事件触发
event.stop(evt);
//第一次双击进入可编辑状态，第二次双击关闭编辑状态
if (editingEnabled === false) {
editingEnabled = true;
editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic);
} else {
currentLayer = this;
editToolbar.deactivate();
editingEnabled = false;
}
});
//第二部分
//底图监听单击事件
dynamicLayer.on("click", function(evt) {
//拦截单击事件，判断是否为删除操作
event.stop(evt);
//ctrl or cmd 配合单击事件完成删除操作
if (evt.ctrlKey === true || evt.metaKey === true) {
dynamicLayer.applyEdits(null,null,[evt.graphic]);
currentLayer = this;
editToolbar.deactivate();
editingEnabled=false;
}
});
});
//模板选择器
var templatePicker = new TemplatePicker({
//属性设置
featureLayers: layers,
rows: "auto",
columns: 2,
grouping: true,
style: "height: auto; overflow: auto;"
}, "templatePickerDiv");
//开启模板
templatePicker.startup();
//画图工具
var drawToolbar = new Draw(map,{
showToolTips:true
});
//从模板选择器获取选择模板
var selectedTemplate;
templatePicker.on("selection-change", function() {
//监听模板选择改变
if( templatePicker.getSelected() ) {
selectedTemplate = templatePicker.getSelected();
}
//判断模板操作类型
switch (selectedTemplate.featureLayer.geometryType) {
case "esriGeometryPoint":
drawToolbar.activate(Draw.POINT);
break;
case "esriGeometryPolyline":
drawToolbar.activate(Draw.POLYLINE);
break;
case "esriGeometryPolygon":
drawToolbar.activate(Draw.POLYGON);
break;
}
});
//监听作图完成事件
drawToolbar.on("draw-end", function(evt) {
drawToolbar.deactivate();
editToolbar.deactivate();
var newAttributes = lang.mixin({}, selectedTemplate.template.prototype.attributes);
attrbu=newAttributes;
var newGraphic = new Graphic(evt.geometry, null, newAttributes);
selectedTemplate.featureLayer.applyEdits([newGraphic],null,null);
});
}
//添加shape--featureLayer
on(dom.byId("added"),"click",function(e){
//定义一个数据源
var dataSource = new TableDataSource();
//此处为我们设置的命名空间
dataSource.workspaceId = "test";
//命名空间下面的shp
dataSource.dataSourceName = "经纬网.shp";
//定义一个图层数据源
var layerSource = new LayerDataSource();
//给图层数据源赋值
layerSource.dataSource = dataSource;
//定义一个要素图层:注意链接为动态图层的地址
var layer2 = new FeatureLayer("http://localhost:6080/arcgis/rest/services/MyMapService/MapServer/dynamicLayer", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
source: layerSource
});
//定义线符号
lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
//定义渲染器
var renderer = new esri.renderer.SimpleRenderer(lineSymbol);
//定义渲染器
layer2.setRenderer(renderer);
layer2.refresh();
layer2.id="layer2";
map.addLayer(layer2);
alert(graValues.length);
graValues=map.getLayer("layer2").graphics;
alert(graValues.length);
});
on(dom.byId("sub"),"click",function(){
if(graValues.length>0){
for(var i=0;i<graValues.length;i++){
var gra=new Graphic(graValues[i].geometry,lineSymbol,attrbu);
graphicResult.push(gra);
}
lineLayer.applyEdits(graphicResult,null,null);
}else{
alert("sorry,graValues is null")
}
});
});
</script>
</head>
<body class="claro">
<input id="added" type="button" value="add_shape" />
<input id="sub" type="button" value="submit" />
<div id="map"></div>
<div id="templatePickerDiv"></div>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「kangkang_style」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/kangkang_style/article/details/75601974
标签：map,dojo,WEBGIS,ARCGIS,new,var,基本操作,evt,esri 来源： https://www.cnblogs.com/baimy/p/14690222.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。