<\/HEAD>
Hallo allemaal,<\/P>
<\/P>
Ik zit vast bij dit,<\/P>
<\/P>
Ik wil een Offline kaart opnemen in mijn website die in PHP is en een Html-pagina heeft.
In de Html-pagina heb ik een Arcgis-kaart opgenomen en het biedt ook bewerkfunctionaliteit vanaf daar.
Maar ik wil ook offline bewerkfunctionaliteit opnemen, zodat wanneer de internetverbinding wegvalt, de gebruiker nog steeds functies kan bewerken en deze in de lokale opslag kan opslaan, en zodra de internetverbinding terugkomt, worden de gegevens naar de server bijgewerkt. <\/P>
Ik heb veel voorbeelden geprobeerd, maar geen van hen werkte voor mij.<\/P>
<\/P>
<\/P>
Hier is mijn html-code <\/P>
<\/P>
<\/SPAN>f<\/SPAN> <\/SPAN><<\/SPAN>html<\/SPAN>><\/SPAN><\/DIV>
<<\/SPAN>head<\/SPAN>><\/SPAN><\/DIV> <\/SPAN><<\/SPAN>meta<\/SPAN> <\/SPAN>charset<\/SPAN>=<\/SPAN>"utf-8"<\/SPAN> <\/SPAN>\/><\/SPAN><\/DIV> <\/SPAN><<\/SPAN>meta<\/SPAN> <\/SPAN>name<\/SPAN>=<\/SPAN>"viewport"<\/SPAN> <\/SPAN>content<\/SPAN>=<\/SPAN>"initial-scale=1,maximum-scale=1,user-scalable=no"<\/SPAN> <\/SPAN>\/><\/SPAN><\/DIV> <\/SPAN><!--<\/SPAN><\/DIV> ArcGIS API for JavaScript, https:\/\/js.arcgis.com<\/SPAN><\/DIV> Voor meer informatie over het editing-groupedfeatureform voorbeeld, lees de originele voorbeeldbeschrijving op developers.arcgis.com.<\/SPAN><\/DIV> https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/editing-groupedfeatureform\/index.html<\/SPAN><\/DIV> --><\/SPAN><\/DIV> <\/SPAN><<\/SPAN>title<\/SPAN>><\/SPAN>Update Feature Attributes - 4.12<\/SPAN><<\/>\/title></
style="color: #808080;">><\/SPAN><\/DIV>
<\/SPAN><!-- <script src="https:\/\/js.arcgis.com\/3.28\/"><\/script> --><\/SPAN><\/DIV> <\/SPAN><<\/SPAN>script<\/SPAN>><\/SPAN><\/DIV> <\/SPAN>require<\/SPAN>([<\/SPAN><\/DIV> <\/SPAN>"esri\/Map"<\/SPAN>,<\/SPAN><\/DIV> <\/SPAN>"esri\/views\/MapView"<\/SPAN>,<\/SPAN><\/DIV> <\/SPAN>"esri\/widgets\/FeatureForm"<\/SPAN>,<\/SPAN><\/DIV> <\/SPAN>"esri\/layers\/FeatureLayer"<\/SPAN>,<\/SPAN><\/DIV> <\/SPAN>"dojo\/domReady!"<\/SPAN>,<\/SPAN><\/DIV> <\/SPAN>"dojo\/_base\/json"<\/SPAN>,<\/SPAN><\/DIV> <\/SPAN>"esri\/symbols\/Symbol"<\/SPAN>,<\/SPAN><\/DIV> <\/SPAN>"esri\/symbols\/SimpleMarkerSymbol"<\/SPAN>,<\/SPAN><\/DIV> <\/SPAN>"esri\/symbols\/SimpleLineSymbol"<\/SPAN>,<\/SPAN><\/DIV> <\/SPAN>"dojo\/DeferredList"<\/SPAN><\/DIV> ], <\/SPAN>function<\/SPAN> (<\/SPAN>Map<\/SPAN>, <\/SPAN>MapView<\/SPAN>, <\/SPAN>FeatureForm<\/PAN... (truncated) ... <\/SPAN>"12px"<\/SPAN>,<\/SPAN><\/DIV> <\/SPAN>family:<\/SPAN> <\/SPAN>"Noto Sans"<\/SPAN>,<\/SPAN><\/DIV> <\/SPAN>style:<\/SPAN> <\/SPAN>"cursief"<\/SPAN>,<\/SPAN><\/DIV> <\/SPAN>weight:<\/SPAN> <\/SPAN>"normaal"<\/SPAN><\/DIV> }<\/SPAN><\/DIV> },<\/SPAN><\/DIV> <\/SPAN>labelPlacement:<\/SPAN> <\/SPAN>"boven-midden"<\/SPAN>,<\/SPAN><\/DIV> <\/SPAN>labelExpressionInfo:<\/SPAN> {<\/SPAN><\/DIV> <\/SPAN>expression:<\/SPAN> <\/SPAN>"$feature.TRL_NAME"<\/SPAN><\/DIV> }<\/SPAN><\/DIV> };<\/SPAN><\/DIV>
<\/SPAN>\/\/- Voeg parken toe met een class breaks renderer en unieke symbolen<\/SPAN><\/DIV> <\/SPAN>function<\/SPAN> <\/SPAN>createFillSymbol<\/SPAN>(<\/SPAN>value<\/SPAN>, <\/SPAN>color<\/SPAN>) {<\/SPAN><\/DIV> <\/Span> alert(value);
alert(kleur);
return {
"value": value,
"symbol": {
"kleur": kleur,
"type": "simple-marker",
"stijl": "circle",
"outline": {
"stijl": "none"
<\/SPAN>
const<\/SPAN> <\/SPAN>form<\/SPAN> = <\/SPAN>new<\/SPAN> <\/SPAN>FeatureForm<\/SPAN>({<\/SPAN><\/DIV> <\/SPAN>container:<\/SPAN> <\/SPAN>"form"<\/SPAN>,<\/SPAN><\/DIV> <\/SPAN>\/\/groupDisplay: "sequential", \/\/ alleen één groep tegelijk weergeven<\/SPAN><\/DIV> <\/SPAN>layer:<\/SPAN> <\/SPAN>featureLayer<\/SPAN>,<\/SPAN><\/DIV> <\/SPAN>fieldConfig:<\/SPAN> [<\/SPAN><\/DIV> {<\/SPAN><\/DIV> <\/SPAN>\/\/ automatisch te casten naar FieldGroupConfig<\/SPAN><\/DIV> <\/SPAN>label:<\/SPAN> <\/SPAN>"Inspector information"<\/SPAN>, <\/SPAN>\/\/ Inspector groep<\/SPAN><\/DIV> <\/SPAN>description:<\/SPAN> <\/SPAN>"Field inspector information"<\/SPAN>,<\/SPAN><\/DIV> <\/SPAN>\/\/ individuele veldconfiguraties binnen de groep<\/SPAN><\/DIV> <\/SPAN>fieldConfig:<\/SPAN> [<\/SPAN><\/DIV> {<\/SPAN><\/DIV>2f2f automatisch te casten als FieldConfig
\/\/ }<\/SPAN><\/DIV>
<\/SPAN>\/\/ functie initEditor(results) {<\/SPAN><\/DIV> <\/SPAN>\/\/ var featureLayerInfos = dojo.map(results, functie (resultaat) {<\/SPAN><\/DIV> <\/SPAN>\/\/ return {<\/SPAN><\/DIV> <\/SPAN>\/\/ 'featureLayer': resultaat.layer<\/SPAN><\/DIV> <\/SPAN>\/\/ };<\/SPAN><\/DIV> <\/SPAN>\/\/ });<\/SPAN><\/DIV> <\/SPAN>\/\/ featureLayer = results[0].layer;<\/SPAN><\/DIV> <\/SPAN>\/\/ var instellingen = {<\/SPAN><\/DIV> <\/SPAN>\/\/ map: map,<\/SPAN><\/DIV> <\/SPAN>\/\/ layerInfos: featureLayerInfos<\/SPAN><\/DIV> <\/SPAN>\/\/ };<\/SPAN><\/DIV>
<\/SPAN>\/\/ var params = {<\/SPAN><\/DIV> <\/SPAN>\/\/ instellingen: instellingen<\/SPAN><\/DIV> <\/SPAN>\/\/ };<\/SPAN><\/DIV> <\/SPAN>\/\/ var editorWidget = new esri.dijit.editing.Editor(params, 'editorDiv');<\/SPAN><\/DIV> <\/SPAN>\/\/ editorWidget.startup();<\/SPAN><\/DIV> <\/SPAN>\/\/ map.infoWindow.resize(290, 220);<\/SPAN><\/DIV> <\/SPAN>\/\/<\/- }<br \/>\/<\/- functie saveCollection() {<br \/>\/<\/- \/\/- sla de bewerkte features op in lokale opslag<br \/>\/<\/- console.log('Bewerkingen opgeslagen in opslag');<br \/>\/<\/- console.log(featureLayer.toJson());<br \/>\/<\/- window.localStorage.setItem("storedCollection", dojo.toJson(featureLayer.toJson()));<br \/>\/<\/- }<br \/>\/<\/- Functie om features te deselecteren<br \/>functie unselectFeature() {
debugger
if (highlight) {
highlight.remove();
}
}
\/<\/- Markeer het aangeklikte feature en toon<br \/>\/<\/- de attributen ervan in het featureform.<br \/>functie selectFeature(objectId) {
\/<\/- query feature van de server<br \/>featureLayer
.queryFeatures({
objectIds:[objectId],
outFields:["*"],
returnGeometry:true
})
.then(function (results) {
debugger
if (results.features.length > 0) {
editFeature = results.features[0];
}
\/<\/- toon de attributen van het geselecteerde feature in het formulier<br \/>form.feature = editFeature;
}
\/<\/- markeer het feature op de view<br \/>view.whenLayerView(editFeature.layer).then(function (layerView) {
highlight = layerView.highlight(editFeature);
});
}
if (
document.getElementById("update").classList.contains("esri-hidden")
) {
document.getElementById("info").classList.add("esri-hidden");
document
.getElementById("update") #d4d4d4;">.<\/SPAN>verwijderen<\/SPAN>(<\/SPAN>"esri-hidden"<\/SPAN>);<\/SPAN><\/DIV> }<\/SPAN><\/DIV> }<\/SPAN><\/DIV> });<\/SPAN><\/DIV> }<\/SPAN><\/DIV>
<\/SPAN>\/\/ Luister naar het submit-evenement van het featureformulier.<\/SPAN><\/DIV> <\/SPAN>form<\/SPAN>.<\/SPAN>on<\/SPAN>(<\/SPAN>"submit"<\/SPAN>, <\/SPAN>function<\/SPAN> () {<\/SPAN><\/DIV> <\/SPAN>debugger<\/SPAN><\/DIV> <\/SPAN>als<\/SPAN> (<\/SPAN>editFeature<\/SPAN>) {<\/SPAN><\/DIV> <\/SPAN>\/\/ Pak bijgewerkte attributen van het formulier.<\/SPAN><\/DIV> <\/SPAN>const<\/SPAN> <\/SPAN>updated<\/SPAN> = <\/SPAN>form<\/SPAN>.<\/SPAN>getValues<\/SPAN>();<\/DIV>
<\/SPAN>\/\/ Loop door bijgewerkte attributen en wijs ze toe<\/SPAN><\/DIV> <\/span> \/\/- de bijgewerkte waarden aan feature-attributen.<\ /span ><\ /div ><\ div ><\ span stijl=\"kleur:# 04ec9b0\" > Object <\ /span ><\ span stijl=\"kleur:# d 24 d 24 d 24 ;\" > . <\ /span ><\ span stijl=\"kleur:# d c d c a a ;\" > keys <\ /span ><\ span stijl=\"kleur:# d 24 d 24 d 24 ;\" > ( <\ /span ><\ span stijl=\"kleur:# 9 c d c f e ;\" > updated <\ /span ><\ span stijl=\"kleur:# d 24 d 24 d 24 ;\" > ) . <\ /span ><\ span stijl=\"kleur:# d c d c a a ;\" > forEach <\ /span ><\ span stijl=\"kleur:# d 24 d 24 d 24 ;\" > ( <\ /span ><\ span stijl=\"kleur:# 5 69 cd6 ; \ " > functie < \ /span >< \ span stijl = \ " kleur
d424 d424 ; \ " > ( < \ /span >< \ span stijl = \ " kleur :#9 cdc fe ; \ " > naam < \ /span >< \ span stijl = \ " kleur
d424 d424 ; \ " > ) { < \ /span >< \ /div >< \ div >< \ span stijl = \ " kleur
d424 d424 ; \ " > < \ /span >< \ span stijl = \ " kleur :#9 cdc fe ; \ " > editFeature < \ /span >< \ span stijl = \ " kleur
d424 d424 ; \ " > . < \ /span >< \ span stijl = \ " kleur :#9 cdc fe ; \ " > attributen < \ /span >< \ span stijl = \ " kleur
d424 d424 ; \ " > [ < \ /span >< \ span stijl = \ " kleur :#9 cdc fe ; \ " > naam < \ /span >< \ span stijl = \ " kleur
d424 d424 ; \ " > ] = < \ /span >< \ span stijl = \ " kleur :#9 cdc fe ; \ " > updated < \ /span >< \ span stijl = \ " kleur
d424 d424 ; \ " > [ < \ /span >< \ span stijl = \ " kleur :#9 cdc fe ; \ " > naam < \ /span >< \ span stijl = \ " kleur
d424 d424 ; \ " > ] ; < \ /span >< \/div> style="color: #d4d4d4;">.<\/SPAN>getElementById<\/SPAN>(<\/SPAN>"btnUpdate"<\/SPAN>).<\/SPAN>style<\/SPAN>.<\/SPAN>cursor<\/SPAN> = <\/SPAN>"pointer"<\/SPAN>;<\/SPAN><\/DIV> });<\/SPAN><\/DIV> }<\/SPAN><\/DIV>
<\/SPAN>document<\/SPAN>.<\/SPAN>getElementById<\/SPAN>(<\/SPAN>"btnUpdate"<\/SPAN>).<\/SPAN>onclick<\/SPAN> = <\/SPAN>function<\/SPAN> () {<\/SPAN><\/DIV> <\/SPAN>\/\/ Vuur het submit-evenement van het featureformulier af.<\/SPAN><\/DIV> <\/SPAN>form<\/SPAN>.<\/SPAN>submit<\/SPAN>();<\/SPAN><\/DIV> };<\/SPAN><\/DIV>
<\/SPAN>view<\/SPAN>.<\/SPAN>ui<\/SPAN>.<\/SPAN>add<\/SPAN>(<\/SPAN>"update"<\/SPAN>, <\/SPAN>"top-right"<\/SPAN>);<\/DIV> <\/Span>View.Add(<\span >\"Info\", {Position:\"Top-Left\",Index:1});});</script></head>
<body><div id=\"viewDiv\"></div> < div id = "info " class = "esri-widget "> < h3 >Selecteer een feature om te beginnen met bewerken </h3> </div>
< div id = "update " class = "esri-widget esri-hidden "> < div id = "form " class = "scroller esri-component "></div> < input type = "button " class = "esri-button " value = "Update assessment " id = "btnUpdate " /> </div> </body>
</html> Kunt iemand mij hiermee helpen als het mogelijk is? Ik wil het alleen met JavaScript doen.