Skip to content

Commit fb90199

Browse files
songyumengsongyumeng
committed
优化ol mvt 沿线标注显示效果 by gongyaxi
1 parent 6dd5184 commit fb90199

File tree

3 files changed

+123
-53
lines changed

3 files changed

+123
-53
lines changed

‎dist/iclient9-openlayers.js‎

Lines changed: 52 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -29988,15 +29988,15 @@ var MapvLayer = exports.MapvLayer = function (_BaiduMapLayer) {
2998829988

2998929989
self._mapCenter = map.getView().getCenter();
2999029990
self._mapCenterPx = map.getPixelFromCoordinate(self._mapCenter);
29991-
self._reselutions = map.getView().getResolution() * self.pixelRatio;
29991+
self._reselutions = map.getView().getResolution();
2999229992
self._rotation = -map.getView().getRotation();
2999329993

2999429994
var dataGetOptions = {
2999529995
transferCoordinate: function transferCoordinate(coordinate) {
2999629996
var x = (coordinate[0] - self._mapCenter[0]) / self._reselutions,
2999729997
y = (self._mapCenter[1] - coordinate[1]) / self._reselutions;
2999829998
var scaledP = [x + self._mapCenterPx[0], y + self._mapCenterPx[1]];
29999-
scaledP = scale(scaledP, self._mapCenterPx, 1);
29999+
scaledP = scale(scaledP, self._mapCenterPx, self.pixelRatio);
3000030000
/*//有旋转量的时候处理旋转
3000130001
if (self._rotation !== 0) {
3000230002
var rotatedP = rotate(scaledP, self._rotation, self._mapCenterPx);
@@ -61955,6 +61955,7 @@ var olExtends = exports.olExtends = function olExtends(targetMap) {
6195561955

6195661956
window.targetMapCache = targetMap;
6195761957
_openlayers2.default.format.MVT.prototype.readProjection = function (source) {
61958+
// eslint-disable-line no-unused-vars
6195861959
return new _openlayers2.default.proj.Projection({
6195961960
code: '',
6196061961
units: _openlayers2.default.proj.Units.TILE_PIXELS
@@ -61966,6 +61967,7 @@ var olExtends = exports.olExtends = function olExtends(targetMap) {
6196661967
};
6196761968
}
6196861969
_openlayers2.default.render.canvas.Replay.prototype.applyFill = function (state, geometry) {
61970+
// eslint-disable-line no-unused-vars
6196961971
var fillStyle = state.fillStyle;
6197061972
var fillInstruction = [_openlayers2.default.render.canvas.Instruction.SET_FILL_STYLE, fillStyle];
6197161973
if (typeof fillStyle !== 'string') {
@@ -62034,9 +62036,8 @@ var olExtends = exports.olExtends = function olExtends(targetMap) {
6203462036
var result = [];
6203562037

6203662038
// Keep text upright
62037-
//const reverse = flatCoordinates[offset] > flatCoordinates[end - stride];
6203862039
var anglereverse = Math.atan2(flatCoordinates[end - stride + 1] - flatCoordinates[offset + 1], flatCoordinates[end - stride] - flatCoordinates[offset]);
62039-
var reverse = anglereverse < -0.785 || anglereverse > 2.356 ? true : false; //0.785//2.356
62040+
var reverse = anglereverse < -0.785 || anglereverse > 2.356; //0.785//2.356
6204062041
var isRotateUp = anglereverse < -0.785 && anglereverse > -2.356 || anglereverse > 0.785 && anglereverse < 2.356;
6204162042

6204262043
var numChars = text.length;
@@ -62049,31 +62050,64 @@ var olExtends = exports.olExtends = function olExtends(targetMap) {
6204962050
var segmentM = 0;
6205062051
var segmentLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
6205162052

62053+
while (offset < end - stride && segmentM + segmentLength < startM) {
62054+
x1 = x2;
62055+
y1 = y2;
62056+
offset += stride;
62057+
x2 = flatCoordinates[offset];
62058+
y2 = flatCoordinates[offset + 1];
62059+
segmentM += segmentLength;
62060+
segmentLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
62061+
}
62062+
var interpolate = (startM - segmentM) / segmentLength;
62063+
var x0 = _openlayers2.default.math.lerp(x1, x2, interpolate); //起始点
62064+
var y0 = _openlayers2.default.math.lerp(y1, y2, interpolate); //起始点
62065+
6205262066
var chunk = '';
6205362067
var chunkLength = 0;
62054-
var data = void 0,
62055-
index = void 0,
62056-
previousAngle = void 0,
62057-
previousLang = void 0;
62068+
var data, index, previousAngle, previousLang;
6205862069
for (var i = 0; i < numChars; ++i) {
6205962070
index = reverse ? numChars - i - 1 : i;
6206062071
var char = text.charAt(index);
62061-
var ischinese = char.charCodeAt(0) >= 19968 && char.charCodeAt(0) <= 40907 ? true : false;
62072+
var charcode = char.charCodeAt(0);
62073+
var ischinese = charcode >= 19968 && charcode <= 40907;
6206262074
chunk = reverse ? char + chunk : chunk + char;
6206362075
var charLength = measure(chunk) - chunkLength;
6206462076
chunkLength += charLength;
62065-
var charM = startM + charLength / 2;
62066-
while (offset < end - stride && segmentM + segmentLength < charM) {
62077+
//var charM = startM + charLength / 2;
62078+
while (offset < end - stride && Math.sqrt(Math.pow(x2 - x0, 2) + Math.pow(y2 - y0, 2)) < charLength / 2) {
6206762079
x1 = x2;
6206862080
y1 = y2;
6206962081
offset += stride;
6207062082
x2 = flatCoordinates[offset];
6207162083
y2 = flatCoordinates[offset + 1];
62072-
segmentM += segmentLength;
62073-
segmentLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
6207462084
}
62075-
var segmentPos = charM - segmentM;
62076-
var angle = Math.atan2(y2 - y1, x2 - x1);
62085+
var a = Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2);
62086+
var b = 2 * (x2 - x1) * (x1 - x0) + 2 * (y2 - y1) * (y1 - y0);
62087+
var c = Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2) - Math.pow(charLength / 2, 2);
62088+
var scale1 = (-b + Math.sqrt(b * b - 4 * a * c)) / (2 * a);
62089+
var scale2 = (-b - Math.sqrt(b * b - 4 * a * c)) / (2 * a);
62090+
interpolate = scale1 < 0 || scale1 > 1 ? scale2 : scale2 < 0 || scale2 > 1 ? scale1 : scale1 < scale2 ? scale2 : scale1;
62091+
var x = _openlayers2.default.math.lerp(x1, x2, interpolate);
62092+
var y = _openlayers2.default.math.lerp(y1, y2, interpolate);
62093+
62094+
while (offset < end - stride && Math.sqrt(Math.pow(x2 - x, 2) + Math.pow(y2 - y, 2)) < charLength / 2) {
62095+
x1 = x2;
62096+
y1 = y2;
62097+
offset += stride;
62098+
x2 = flatCoordinates[offset];
62099+
y2 = flatCoordinates[offset + 1];
62100+
}
62101+
a = Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2);
62102+
b = 2 * (x2 - x1) * (x1 - x) + 2 * (y2 - y1) * (y1 - y);
62103+
c = Math.pow(x1 - x, 2) + Math.pow(y1 - y, 2) - Math.pow(charLength / 2, 2);
62104+
scale1 = (-b + Math.sqrt(b * b - 4 * a * c)) / (2 * a);
62105+
scale2 = (-b - Math.sqrt(b * b - 4 * a * c)) / (2 * a);
62106+
interpolate = scale1 < 0 || scale1 > 1 ? scale2 : scale2 < 0 || scale2 > 1 ? scale1 : scale1 < scale2 ? scale2 : scale1;
62107+
var x3 = _openlayers2.default.math.lerp(x1, x2, interpolate);
62108+
var y3 = _openlayers2.default.math.lerp(y1, y2, interpolate);
62109+
var angle = Math.atan2(y3 - y0, x3 - x0);
62110+
6207762111
if (reverse) {
6207862112
angle += angle > 0 ? -Math.PI : Math.PI;
6207962113
}
@@ -62087,9 +62121,7 @@ var olExtends = exports.olExtends = function olExtends(targetMap) {
6208762121
return null;
6208862122
}
6208962123
}
62090-
var interpolate = segmentPos / segmentLength;
62091-
var x = _openlayers2.default.math.lerp(x1, x2, interpolate);
62092-
var y = _openlayers2.default.math.lerp(y1, y2, interpolate);
62124+
6209362125
if (previousAngle == angle && !isRotateUp) {
6209462126
if (reverse) {
6209562127
data[0] = x;
@@ -62109,6 +62141,8 @@ var olExtends = exports.olExtends = function olExtends(targetMap) {
6210962141
previousAngle = angle;
6211062142
previousLang = ischinese;
6211162143
}
62144+
x0 = x3;
62145+
y0 = y3;
6211262146
startM += charLength;
6211362147
}
6211462148
return result;

‎dist/iclient9-openlayers.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/openlayers/overlay/vectortile/olExtends.js‎

Lines changed: 70 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import ol from 'openlayers';
44
export var olExtends = function (targetMap) {
55

66
window.targetMapCache = targetMap;
7-
ol.format.MVT.prototype.readProjection = function (source) {
7+
ol.format.MVT.prototype.readProjection = function (source) {// eslint-disable-line no-unused-vars
88
return new ol.proj.Projection({
99
code: '',
1010
units: ol.proj.Units.TILE_PIXELS
@@ -15,7 +15,7 @@ export var olExtends = function (targetMap) {
1515
return this.getCoordinateAt(0.5);
1616
};
1717
}
18-
ol.render.canvas.Replay.prototype.applyFill = function (state, geometry) {
18+
ol.render.canvas.Replay.prototype.applyFill = function (state, geometry) {// eslint-disable-line no-unused-vars
1919
var fillStyle = state.fillStyle;
2020
var fillInstruction = [ol.render.canvas.Instruction.SET_FILL_STYLE, fillStyle];
2121
if (typeof fillStyle !== 'string') {
@@ -86,63 +86,97 @@ export var olExtends = function (targetMap) {
8686
return feature;
8787
};
8888

89-
ol.geom.flat.textpath.lineString = function (flatCoordinates, offset, end, stride, text, measure, startM, maxAngle) {
90-
const result = [];
89+
ol.geom.flat.textpath.lineString = function (
90+
flatCoordinates, offset, end, stride, text, measure, startM, maxAngle) {
91+
var result = [];
9192

9293
// Keep text upright
93-
//const reverse = flatCoordinates[offset] > flatCoordinates[end - stride];
94-
const anglereverse = Math.atan2(flatCoordinates[end - stride + 1] - flatCoordinates[offset + 1], flatCoordinates[end - stride] - flatCoordinates[offset]);
95-
const reverse = anglereverse < -0.785 || anglereverse > 2.356 ? true : false; //0.785//2.356
96-
const isRotateUp = (anglereverse < -0.785 && anglereverse > -2.356) || (anglereverse > 0.785 && anglereverse < 2.356);
94+
var anglereverse = Math.atan2(flatCoordinates[end - stride + 1] - flatCoordinates[offset + 1], flatCoordinates[end - stride] - flatCoordinates[offset]);
95+
var reverse = anglereverse < -0.785 || anglereverse > 2.356; //0.785//2.356
96+
var isRotateUp = (anglereverse < -0.785 && anglereverse > -2.356) || (anglereverse > 0.785 && anglereverse < 2.356);
9797

98-
const numChars = text.length;
98+
var numChars = text.length;
9999

100-
let x1 = flatCoordinates[offset];
101-
let y1 = flatCoordinates[offset + 1];
100+
var x1 = flatCoordinates[offset];
101+
var y1 = flatCoordinates[offset + 1];
102102
offset += stride;
103-
let x2 = flatCoordinates[offset];
104-
let y2 = flatCoordinates[offset + 1];
105-
let segmentM = 0;
106-
let segmentLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
103+
var x2 = flatCoordinates[offset];
104+
var y2 = flatCoordinates[offset + 1];
105+
var segmentM = 0;
106+
var segmentLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
107107

108-
let chunk = '';
109-
let chunkLength = 0;
110-
let data, index, previousAngle, previousLang;
111-
for (let i = 0; i < numChars; ++i) {
108+
while (offset < end - stride && segmentM + segmentLength < startM) {
109+
x1 = x2;
110+
y1 = y2;
111+
offset += stride;
112+
x2 = flatCoordinates[offset];
113+
y2 = flatCoordinates[offset + 1];
114+
segmentM += segmentLength;
115+
segmentLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
116+
}
117+
var interpolate = (startM - segmentM) / segmentLength;
118+
var x0 = ol.math.lerp(x1, x2, interpolate); //起始点
119+
var y0 = ol.math.lerp(y1, y2, interpolate); //起始点
120+
121+
var chunk = '';
122+
var chunkLength = 0;
123+
var data, index, previousAngle, previousLang;
124+
for (var i = 0; i < numChars; ++i) {
112125
index = reverse ? numChars - i - 1 : i;
113-
const char = text.charAt(index);
114-
const ischinese = char.charCodeAt(0) >= 19968 && char.charCodeAt(0) <= 40907 ? true : false;
126+
var char = text.charAt(index);
127+
var charcode = char.charCodeAt(0);
128+
var ischinese = charcode >= 19968 && charcode <= 40907;
115129
chunk = reverse ? char + chunk : chunk + char;
116-
const charLength = measure(chunk) - chunkLength;
130+
var charLength = measure(chunk) - chunkLength;
117131
chunkLength += charLength;
118-
const charM = startM + charLength / 2;
119-
while (offset < end - stride && segmentM + segmentLength < charM) {
132+
//var charM = startM + charLength / 2;
133+
while (offset < end - stride && Math.sqrt(Math.pow(x2 - x0, 2) + Math.pow(y2 - y0, 2)) < (charLength / 2)) {
120134
x1 = x2;
121135
y1 = y2;
122136
offset += stride;
123137
x2 = flatCoordinates[offset];
124138
y2 = flatCoordinates[offset + 1];
125-
segmentM += segmentLength;
126-
segmentLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
127139
}
128-
const segmentPos = charM - segmentM;
129-
let angle = Math.atan2(y2 - y1, x2 - x1);
140+
var a = Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2);
141+
var b = 2 * (x2 - x1) * (x1 - x0) + 2 * (y2 - y1) * (y1 - y0);
142+
var c = Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2) - Math.pow(charLength / 2, 2);
143+
var scale1 = (-b + Math.sqrt(b * b - 4 * a * c)) / (2 * a);
144+
var scale2 = (-b - Math.sqrt(b * b - 4 * a * c)) / (2 * a);
145+
interpolate = scale1 < 0 || scale1 > 1 ? scale2 : scale2 < 0 || scale2 > 1 ? scale1 : scale1 < scale2 ? scale2 : scale1;
146+
var x = ol.math.lerp(x1, x2, interpolate);
147+
var y = ol.math.lerp(y1, y2, interpolate);
148+
149+
while (offset < end - stride && Math.sqrt(Math.pow(x2 - x, 2) + Math.pow(y2 - y, 2)) < (charLength / 2)) {
150+
x1 = x2;
151+
y1 = y2;
152+
offset += stride;
153+
x2 = flatCoordinates[offset];
154+
y2 = flatCoordinates[offset + 1];
155+
}
156+
a = Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2);
157+
b = 2 * (x2 - x1) * (x1 - x) + 2 * (y2 - y1) * (y1 - y);
158+
c = Math.pow(x1 - x, 2) + Math.pow(y1 - y, 2) - Math.pow(charLength / 2, 2);
159+
scale1 = (-b + Math.sqrt(b * b - 4 * a * c)) / (2 * a);
160+
scale2 = (-b - Math.sqrt(b * b - 4 * a * c)) / (2 * a);
161+
interpolate = scale1 < 0 || scale1 > 1 ? scale2 : scale2 < 0 || scale2 > 1 ? scale1 : scale1 < scale2 ? scale2 : scale1;
162+
var x3 = ol.math.lerp(x1, x2, interpolate);
163+
var y3 = ol.math.lerp(y1, y2, interpolate);
164+
var angle = Math.atan2(y3 - y0, x3 - x0);
165+
130166
if (reverse) {
131167
angle += angle > 0 ? -Math.PI : Math.PI;
132168
}
133169
if (ischinese && isRotateUp) {
134170
angle += angle > 0 ? -Math.PI / 2 : Math.PI / 2;
135171
}
136172
if (previousAngle !== undefined) {
137-
let delta = angle - previousAngle;
173+
var delta = angle - previousAngle;
138174
delta += (delta > Math.PI) ? -2 * Math.PI : (delta < -Math.PI) ? 2 * Math.PI : 0;
139175
if (ischinese === previousLang ? Math.abs(delta) > maxAngle : Math.abs(delta) > (maxAngle + Math.PI / 2)) {
140176
return null;
141177
}
142178
}
143-
const interpolate = segmentPos / segmentLength;
144-
const x = ol.math.lerp(x1, x2, interpolate);
145-
const y = ol.math.lerp(y1, y2, interpolate);
179+
146180
if (previousAngle == angle && !isRotateUp) {
147181
if (reverse) {
148182
data[0] = x;
@@ -162,10 +196,12 @@ export var olExtends = function (targetMap) {
162196
previousAngle = angle;
163197
previousLang = ischinese;
164198
}
199+
x0 = x3;
200+
y0 = y3;
165201
startM += charLength;
166202
}
167203
return result;
168-
}
204+
};
169205
ol.layer.VectorTile.prototype.setFastRender = function (fastRender) {
170206
return this.fastRender = fastRender;
171207
};
@@ -257,4 +293,4 @@ export var olExtends = function (targetMap) {
257293
ol.renderer.canvas.TileLayer.prototype.postCompose.apply(this, arguments);
258294
};
259295
}
260-
window.olExtends=olExtends;
296+
window.olExtends = olExtends;

0 commit comments

Comments
 (0)