我希望每个用户都能够绘制自己的区域,并且他们下次登录时可以自动加载该区域。如何使用ArcGIS JavaScript API和ArcGIS Server实现此功能?如何使用ArcGIS JavaScript API在地图上绘制自定义图形?
1
A
回答
1
那么,很显然,要在地图上绘制一些功能,并存储该somwhere所以当使用访问,他/她可以在地图上看到最后绘制的功能,下一次。
首先,您需要在arcgis服务器中发布可编辑的要素图层,以便保存所有的功能。
下面是公司招聘
var map;
require([
"esri/map",
"esri/toolbars/draw",
"esri/toolbars/edit",
"esri/graphic",
"esri/config",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/dijit/editing/TemplatePicker",
"dojo/_base/array",
"dojo/_base/event",
"dojo/_base/lang",
"dojo/parser",
"dijit/registry",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/form/Button", "dojo/domReady!"
], function(
Map, Draw, Edit, Graphic, esriConfig,
FeatureLayer,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
TemplatePicker,
arrayUtils, event, lang, parser, registry
) {
parser.parse();
// refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
esriConfig.defaults.io.proxyUrl = "/proxy/";
// This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
esriConfig.defaults.geometryService = new esri.tasks.GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map = new Map("map", {
basemap: "streets",
center: [-83.244, 42.581],
zoom: 15
});
map.on("layers-add-result", initEditing);
var landusePointLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/6", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
var landuseLineLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/8", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
var landusePolygonLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/9", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
map.addLayers([landusePointLayer, landuseLineLayer, landusePolygonLayer]);
function initEditing(evt) {
console.log("initEditing", evt);
// var map = this;
var currentLayer = null;
var layers = arrayUtils.map(evt.layers, function(result) {
return result.layer;
});
console.log("layers", layers);
var editToolbar = new Edit(map);
editToolbar.on("deactivate", function(evt) {
currentLayer.applyEdits(null, [evt.graphic], null);
});
arrayUtils.forEach(layers, function(layer) {
var editingEnabled = false;
layer.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;
}
});
layer.on("click", function(evt) {
event.stop(evt);
if (evt.ctrlKey === true || evt.metaKey === true) { //delete feature if ctrl key is depressed
layer.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);
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);
var newGraphic = new Graphic(evt.geometry, null, newAttributes);
selectedTemplate.featureLayer.applyEdits([newGraphic], null, null);
});
}
});
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
#header {
border:solid 2px #462d44;
background:#fff;
color:#444;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: sans-serif;
font-size: 1.1em
padding-left:20px;
}
#map {
padding:1px;
border:solid 2px #444;
-moz-border-radius: 4px;
border-radius: 4px;
}
#rightPane {
border:none;
padding: 0;
width:228px;
}
.templatePicker {
border: solid 2px #444;
}
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<script src="https://js.arcgis.com/3.20/"></script>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true, design:'headline'" style="width:100%;height:100%;">
<div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">Use ctrl or cmd + click on graphic to delete. Double click on graphic to edit vertices. </div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div id="templatePickerDiv"></div>
</div>
</div>
</body>
更新启动消费这个样品之前代理的工作样本。
实时运行的样本 -https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=ed_feature_creation
希望这将帮助你:)
相关问题
- 1. 使用MongoDB绘制自定义地图
- 2. 在iOS中绘制自定义图形
- 3. 如何使用谷歌地图API在谷歌地图上绘制矩形
- 4. 谷歌地图自定义绘图Android API v2(弧形折线)
- 5. 如何在Apple Watch上绘制自定义图形?
- 6. 在世界地图上绘制图形
- 7. 如何在视图上绘制自定义视图(例如圆形)?
- 8. 在iOS中绘制自定义条形图图(PowerPlot vs Core图)
- 9. 如何在没有OSMDroid API的情况下绘制自定义地图图块?
- 10. 使用java图形API绘制图层
- 11. 使用ArcGIS API for JavaScript在地图上显示KMZ图层的单个图层
- 12. 自定义图形控件[Google地图v3绘图库]
- 13. 如何在谷歌地图中绘制自定义航点v3
- 14. ArcGIS Javascript API - 如何使用jQuery获取地图URL ajax
- 15. 绘制定义一些固定节点的网络图,以在地图上绘制图形
- 16. 在iPhone上绘制自定义图形:CALayer与CGContext
- 17. 如何在旋转的自定义图像地图上绘制GPS标记
- 18. 如何使用Google map api在Google地图上绘制路线?
- 19. 使用ArcGIS服务器缓存Google地图API中的绘制图表
- 20. GeoTools:在地图上绘制多边形
- 21. javascript在图像上绘制矩形
- 22. 在Google地图上绘制矩形
- 23. 如何使用ArcGIS JavaScript API直接绘制点和文本
- 24. 在arcgis java script api中添加图形图层地图
- 25. osmdroid在地图上绘制多边形
- 26. 使用ggplot2在地图上绘制条形图?
- 27. 如何自定义限制ArcGIS底图的范围?
- 28. Android如何绘制自定义视图
- 29. 在地图上绘制矩形
- 30. 如何在Google地图中绘制自定义路线?
看起来你要我们写一些代码给你。尽管许多用户愿意为遇险的编码人员编写代码,但他们通常只在海报已尝试自行解决问题时才提供帮助。证明这一努力的一个好方法是包含迄今为止编写的代码,示例输入(如果有的话),期望的输出以及实际获得的输出(控制台输出,回溯等)。您提供的细节越多,您可能会收到的答案就越多。检查[常见问题]和[问] –
我的意思是我不知道解决的方向。我只是想,如果一些人做同样的事情可以给我一些建议。像书籍或其他东西 – merin