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)
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