1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.format.EsriJSON');
|
4 | goog.require('ol.interaction');
|
5 | goog.require('ol.interaction.Draw');
|
6 | goog.require('ol.interaction.Modify');
|
7 | goog.require('ol.interaction.Select');
|
8 | goog.require('ol.layer.Tile');
|
9 | goog.require('ol.layer.Vector');
|
10 | goog.require('ol.loadingstrategy');
|
11 | goog.require('ol.proj');
|
12 | goog.require('ol.source.Vector');
|
13 | goog.require('ol.source.XYZ');
|
14 | goog.require('ol.tilegrid');
|
15 |
|
16 |
|
17 | var serviceUrl = 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/' +
|
18 | 'services/PDX_Pedestrian_Districts/FeatureServer/';
|
19 | var layer = '0';
|
20 |
|
21 | var esrijsonFormat = new ol.format.EsriJSON();
|
22 |
|
23 | var vectorSource = new ol.source.Vector({
|
24 | loader: function(extent, resolution, projection) {
|
25 | var url = serviceUrl + layer + '/query/?f=json&' +
|
26 | 'returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=' +
|
27 | encodeURIComponent('{"xmin":' + extent[0] + ',"ymin":' +
|
28 | extent[1] + ',"xmax":' + extent[2] + ',"ymax":' + extent[3] +
|
29 | ',"spatialReference":{"wkid":102100}}') +
|
30 | '&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*' +
|
31 | '&outSR=102100';
|
32 | $.ajax({url: url, dataType: 'jsonp', success: function(response) {
|
33 | if (response.error) {
|
34 | alert(response.error.message + '\n' +
|
35 | response.error.details.join('\n'));
|
36 | } else {
|
37 |
|
38 | var features = esrijsonFormat.readFeatures(response, {
|
39 | featureProjection: projection
|
40 | });
|
41 | if (features.length > 0) {
|
42 | vectorSource.addFeatures(features);
|
43 | }
|
44 | }
|
45 | }});
|
46 | },
|
47 | strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
|
48 | tileSize: 512
|
49 | }))
|
50 | });
|
51 |
|
52 | var vector = new ol.layer.Vector({
|
53 | source: vectorSource
|
54 | });
|
55 |
|
56 | var raster = new ol.layer.Tile({
|
57 | source: new ol.source.XYZ({
|
58 | attributions: 'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
|
59 | 'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
|
60 | url: 'https://server.arcgisonline.com/ArcGIS/rest/services/' +
|
61 | 'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
|
62 | })
|
63 | });
|
64 |
|
65 | var draw = new ol.interaction.Draw({
|
66 | source: vectorSource,
|
67 | type: 'Polygon'
|
68 | });
|
69 |
|
70 | var select = new ol.interaction.Select();
|
71 | select.setActive(false);
|
72 | var selected = select.getFeatures();
|
73 |
|
74 | var modify = new ol.interaction.Modify({
|
75 | features: selected
|
76 | });
|
77 | modify.setActive(false);
|
78 |
|
79 | var map = new ol.Map({
|
80 | interactions: ol.interaction.defaults().extend([draw, select, modify]),
|
81 | layers: [raster, vector],
|
82 | target: document.getElementById('map'),
|
83 | view: new ol.View({
|
84 | center: ol.proj.transform([-122.619, 45.512], 'EPSG:4326', 'EPSG:3857'),
|
85 | zoom: 12
|
86 | })
|
87 | });
|
88 |
|
89 | var typeSelect = document.getElementById('type');
|
90 |
|
91 |
|
92 |
|
93 |
|
94 |
|
95 | typeSelect.onchange = function() {
|
96 | draw.setActive(typeSelect.value === 'DRAW');
|
97 | select.setActive(typeSelect.value === 'MODIFY');
|
98 | modify.setActive(typeSelect.value === 'MODIFY');
|
99 | };
|
100 |
|
101 | var dirty = {};
|
102 |
|
103 | selected.on('add', function(evt) {
|
104 | var feature = evt.element;
|
105 | feature.on('change', function(evt) {
|
106 | dirty[evt.target.getId()] = true;
|
107 | });
|
108 | });
|
109 |
|
110 | selected.on('remove', function(evt) {
|
111 | var feature = evt.element;
|
112 | var fid = feature.getId();
|
113 | if (dirty[fid] === true) {
|
114 | var payload = '[' + esrijsonFormat.writeFeature(feature, {
|
115 | featureProjection: map.getView().getProjection()
|
116 | }) + ']';
|
117 | var url = serviceUrl + layer + '/updateFeatures';
|
118 | $.post(url, {f: 'json', features: payload}).done(function(data) {
|
119 | var result = JSON.parse(data);
|
120 | if (result.updateResults && result.updateResults.length > 0) {
|
121 | if (result.updateResults[0].success !== true) {
|
122 | var error = result.updateResults[0].error;
|
123 | alert(error.description + ' (' + error.code + ')');
|
124 | } else {
|
125 | delete dirty[fid];
|
126 | }
|
127 | }
|
128 | });
|
129 | }
|
130 | });
|
131 |
|
132 | draw.on('drawend', function(evt) {
|
133 | var feature = evt.feature;
|
134 | var payload = '[' + esrijsonFormat.writeFeature(feature, {
|
135 | featureProjection: map.getView().getProjection()
|
136 | }) + ']';
|
137 | var url = serviceUrl + layer + '/addFeatures';
|
138 | $.post(url, {f: 'json', features: payload}).done(function(data) {
|
139 | var result = JSON.parse(data);
|
140 | if (result.addResults && result.addResults.length > 0) {
|
141 | if (result.addResults[0].success === true) {
|
142 | feature.setId(result.addResults[0]['objectId']);
|
143 | vectorSource.clear();
|
144 | } else {
|
145 | var error = result.addResults[0].error;
|
146 | alert(error.description + ' (' + error.code + ')');
|
147 | }
|
148 | }
|
149 | });
|
150 | });
|