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)