Skip to content

Commit 78f3716

Browse files
chenxianhuiichenxianhuii
committed
[fix] drawFeatures例子误修改
1 parent 09acbc6 commit 78f3716

File tree

1 file changed

+68
-140
lines changed

1 file changed

+68
-140
lines changed

‎examples/openlayers/drawFeatures.html

Lines changed: 68 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -3,167 +3,95 @@
33
*********************************************************************-->
44
<!DOCTYPE html>
55
<html>
6-
<head>
7-
<meta charset="UTF-8" />
6+
<head>
7+
<meta charset="UTF-8">
88
<title data-i18n="resources.title_drawFeatures"></title>
99
<script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
1010
<style>
11-
.ol-popup {
12-
position: absolute;
13-
top: 50px;
14-
right: 20px;
15-
}
11+
.ol-popup {
12+
position: absolute;
13+
top: 50px;
14+
right: 20px;
15+
}
1616
</style>
17-
</head>
18-
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
19-
<div id="map" style="width: 100%; height: 100%"></div>
20-
<div id="popup" class="ol-popup">
21-
<div class="btn-group" role="group" aria-label="...">
22-
<button
23-
id="drawPoint"
24-
value="Point"
25-
type="button"
26-
class="btn btn-default"
27-
data-i18n="resources.text_input_value_drawPoint"
28-
></button>
29-
<button
30-
id="drawLine"
31-
value="LineString"
32-
type="button"
33-
class="btn btn-default"
34-
data-i18n="resources.text_input_value_drawLine"
35-
></button>
36-
<button
37-
id="drawPolygon"
38-
value="Polygon"
39-
type="button"
40-
class="btn btn-default"
41-
data-i18n="resources.text_input_value_drawPolygon"
42-
></button>
43-
<button
44-
id="drawCircle"
45-
value="Circle"
46-
type="button"
47-
class="btn btn-default"
48-
data-i18n="resources.btn_drawCircle"
49-
></button>
50-
<button id="none" value="None" type="button" class="btn btn-default" data-i18n="resources.btn_notDraw"></button>
51-
<button
52-
id="clear"
53-
value="Clear"
54-
type="button"
55-
class="btn btn-default"
56-
data-i18n="resources.text_input_value_clear"
57-
></button>
58-
</div>
17+
</head>
18+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
19+
<div id="map" style="width: 100%;height:100%"></div>
20+
<div id="popup" class="ol-popup">
21+
<div class="btn-group" role="group" aria-label="...">
22+
<button id="drawPoint" value='Point' type="button" class="btn btn-default" data-i18n="resources.text_input_value_drawPoint"></button>
23+
<button id="drawLine" value='LineString' type="button" class="btn btn-default" data-i18n="resources.text_input_value_drawLine"></button>
24+
<button id="drawPolygon" value='Polygon' type="button" class="btn btn-default" data-i18n="resources.text_input_value_drawPolygon"></button>
25+
<button id="drawCircle" value='Circle' type="button" class="btn btn-default" data-i18n="resources.btn_drawCircle"></button>
26+
<button id="none" value='None' type="button" class="btn btn-default" data-i18n="resources.btn_notDraw"></button>
27+
<button id="clear" value='Clear' type="button" class="btn btn-default" data-i18n="resources.text_input_value_clear"></button>
5928
</div>
60-
<script type="text/javascript" include="jquery,bootstrap" src="../js/include-web.js"></script>
61-
<script type="text/javascript">
62-
var map,
63-
draw,
64-
url =
65-
(window.isLocal ? window.server : 'http://172.16.14.44:8090') +
66-
'/iserver/services/map-china400/rest/maps/China';
67-
map = new ol.Map({
29+
</div>
30+
<script type="text/javascript" include="jquery,bootstrap" src="../js/include-web.js"></script>
31+
<script type="text/javascript">
32+
var map, draw,
33+
url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-china400/rest/maps/China";
34+
map = new ol.Map({
6835
target: 'map',
69-
wrapX: true,
70-
controls: ol.control
71-
.defaults({ attributionOptions: { collapsed: false } })
72-
.extend([new ol.supermap.control.Logo({ link: 'https://iclient.supermap.io' })]),
36+
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
37+
.extend([new ol.supermap.control.Logo({ link: "https://iclient.supermap.io" })]),
7338
view: new ol.View({
74-
center: [12957388, 4853991],
75-
zoom: 1,
76-
projection: 'EPSG:3857',
77-
multiWorld: true
39+
center: [12957388, 4853991],
40+
zoom: 4,
41+
projection: 'EPSG:3857',
42+
multiWorld: true
7843
})
79-
});
80-
var layer = new ol.layer.Tile({
44+
});
45+
var layer = new ol.layer.Tile({
8146
source: new ol.source.TileSuperMapRest({
82-
url: url,
83-
wrapX: true
47+
url: url,
48+
wrapX: true
8449
}),
8550
projection: 'EPSG:3857'
86-
});
87-
var source = new ol.source.Vector({ wrapX: true, useSpatialIndex: false });
88-
var vector = new ol.layer.Vector({
89-
renderBuffer: 100000,
51+
});
52+
var source = new ol.source.Vector({wrapX: false});
53+
var vector = new ol.layer.Vector({
9054
source: source
91-
});
92-
map.addLayer(layer);
93-
map.addLayer(vector);
94-
var info = new ol.control.Control({ element: document.getElementById('popup') });
95-
info.setMap(map);
96-
map.addControl(info);
55+
});
56+
map.addLayer(layer);
57+
map.addLayer(vector);
58+
var info = new ol.control.Control({element: document.getElementById('popup')});
59+
info.setMap(map);
60+
map.addControl(info);
9761

98-
var buttons = $('.btn-group').children();
99-
buttons.map(function (key) {
62+
var buttons = $('.btn-group').children();
63+
buttons.map(function (key) {
10064
var value = buttons[key].value;
10165
if (value === 'None') {
102-
$(buttons[key]).on('click', function () {
103-
clearInteraction();
104-
});
105-
return;
66+
$(buttons[key]).on('click', function () {
67+
clearInteraction();
68+
});
69+
return;
10670
}
10771
if (value === 'Clear') {
108-
$(buttons[key]).on('click', function () {
109-
clearInteraction();
110-
source.clear();
111-
});
112-
return;
72+
$(buttons[key]).on('click', function () {
73+
clearInteraction();
74+
source.clear();
75+
});
76+
return;
11377
}
11478
$(buttons[key]).on('click', function () {
115-
clearInteraction();
116-
draw = new ol.interaction.Draw({
117-
source: source,
118-
type: buttons[key].value,
119-
snapTolerance: 20,
120-
geometryFunction: function(coord, geometry, projection) {
121-
let newGeometry = coord.map((coordinate) => {
122-
return wrapX(coordinate, projection)
123-
});
124-
if (geometry) {
125-
geometry.setCoordinates(newGeometry, this.geometryLayout_);
126-
} else {
127-
geometry = new ol.geom.LineString(newGeometry, 'XY');
128-
}
129-
return geometry;
130-
},
131-
wrapX: true
132-
});
133-
map.addInteraction(draw);
79+
clearInteraction();
80+
draw = new ol.interaction.Draw({
81+
source: source,
82+
type: buttons[key].value,
83+
snapTolerance: 20
84+
});
85+
map.addInteraction(draw);
13486
});
135-
});
87+
});
13688

137-
function clearInteraction() {
89+
function clearInteraction() {
13890
if (draw) {
139-
map.removeInteraction(draw);
140-
}
141-
}
142-
143-
function wrapX(coordinate, projection) {
144-
if (projection.canWrapX()) {
145-
const worldWidth = getWidth(projection.getExtent());
146-
const worldsAway = getWorldsAway(coordinate, projection, worldWidth);
147-
if (worldsAway) {
148-
coordinate[0] -= worldsAway * worldWidth;
149-
}
150-
}
151-
return coordinate;
152-
}
153-
154-
function getWorldsAway(coordinate, projection, sourceExtentWidth) {
155-
const projectionExtent = projection.getExtent();
156-
let worldsAway = 0;
157-
if (projection.canWrapX() && (coordinate[0] < projectionExtent[0] || coordinate[0] > projectionExtent[2])) {
158-
sourceExtentWidth = sourceExtentWidth || getWidth(projectionExtent);
159-
worldsAway = Math.floor((coordinate[0] - projectionExtent[0]) / sourceExtentWidth);
91+
map.removeInteraction(draw);
16092
}
161-
return worldsAway;
162-
}
93+
}
16394

164-
function getWidth(extent) {
165-
return extent[2] - extent[0];
166-
}
167-
</script>
168-
</body>
169-
</html>
95+
</script>
96+
</body>
97+
</html>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy