Skip to content

Commit f9d31ee

Browse files
zhurczhurc
committed
尝试解决leaflet矢量瓦片文本压盖问题
1 parent a0470f1 commit f9d31ee

File tree

11 files changed

+337
-139
lines changed

11 files changed

+337
-139
lines changed

‎dist/iclient9-leaflet.js‎

Lines changed: 166 additions & 67 deletions
Large diffs are not rendered by default.

‎dist/iclient9-leaflet.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.

‎dist/iclient9-openlayers.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14923,7 +14923,7 @@ SuperMap.TimeControlBase = SuperMap.Class({
1492314923
/**
1492414924
* Property: speed
1492514925
* {Number} 步长，必须为非负数，默认为1
14926-
* （表示前后两次渲染的数据之间的间隔为1），设置越大时间跳跃越快。
14926+
* （表示前后两次渲染的数据之间的间隔为1）
1492714927
*/
1492814928
speed: 1,
1492914929

‎examples/leaflet/vectorTileLayerNormal.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<script type="text/javascript" src="../../dist/iclient9-leaflet.min.js"></script>
1414
<script type="text/javascript">
1515
var map, selectId, selectLayerName, vectorLayer,
16-
url = "http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China";
16+
url = "http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China";
1717
map = L.map('map', {
1818
center: [39.89, 116.43],
1919
maxZoom: 15,

‎src/leaflet/overlay/TileVectorLayer.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,13 @@ var TileVectorLayer = L.VectorGrid.extend({
2626
serverCartoCSSStyle: true,
2727

2828
returnAttributes: false,
29+
30+
/*各图层扩展的像素值。
31+
*例如：
32+
* 0_15:0_5,1_10：表示顶级0图层的0、1子图层扩展的像素分别为5、10像素；顶级0图层下，除0、1图层外的子图层的扩展像素都为15像素。
33+
* 0:0_5,1_10：表示顶级0图层的0、1子图层扩展的像素分别为5、10像素；顶级0图层下，其他除0、1图层外的子图层的扩展像素为根据该图层默认样式计算得出的默认值。
34+
*/
35+
expands: null,
2936
cacheEnabled: false,
3037
//瓦片模板，如果设置了此参数，则按此模板出图，url无效（对接第三方瓦片）
3138
tileTemplate: null,
@@ -326,6 +333,10 @@ var TileVectorLayer = L.VectorGrid.extend({
326333
params.push("layerNames=" + layerNamesString);
327334
}
328335

336+
if (options.expands) {
337+
params.push("expands=" + options.expands);
338+
}
339+
329340
params.push("returnAttributes=" + options.returnAttributes);
330341

331342
params.push("cacheEnabled=" + options.cacheEnabled);

‎src/leaflet/overlay/carto/CartoCSSToLeaflet.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
*CartoCSS样式转Leaflet样式
33
*/
44
require('../../core/Base');
5-
require('./CartoDeaultStyle');
5+
require('./CartoDefaultStyle');
66
require('./CartoStyleMap');
77
var CartoCSS = require('../../../common/style/CartoCSS');
88
var SuperMap = require('../../../common/SuperMap');
@@ -76,7 +76,7 @@ L.supermap.CartoCSSToLeaflet = {
7676
}
7777
//兼容iportal示例的问题
7878
if (icon.indexOf("http://support.supermap.com.cn:8092/static/portal") == 0) {
79-
icon=icon.replace("http://support.supermap.com.cn:8092/static/portal","http://support.supermap.com.cn:8092/apps/viewer/static");
79+
icon = icon.replace("http://support.supermap.com.cn:8092/static/portal", "http://support.supermap.com.cn:8092/apps/viewer/static");
8080
}
8181
return L.icon({
8282
iconUrl: icon,
@@ -96,7 +96,7 @@ L.supermap.CartoCSSToLeaflet = {
9696
}
9797
//兼容iportal示例的问题
9898
if (pointStyle.externalGraphic.indexOf("http://support.supermap.com.cn:8092/static/portal") == 0) {
99-
pointStyle.externalGraphic=pointStyle.externalGraphic.replace("http://support.supermap.com.cn:8092/static/portal","http://support.supermap.com.cn:8092/apps/viewer/static");
99+
pointStyle.externalGraphic = pointStyle.externalGraphic.replace("http://support.supermap.com.cn:8092/static/portal", "http://support.supermap.com.cn:8092/apps/viewer/static");
100100
}
101101
return L.icon({
102102
iconUrl: pointStyle.externalGraphic,
@@ -194,6 +194,7 @@ L.supermap.CartoCSSToLeaflet = {
194194
if (!value || value === "")continue;
195195
} else if (fromServer && prop === 'iconUrl') {
196196
value = this.mapUrl + '/tileFeature/symbols/' + value.replace(/(___)/gi, '@');
197+
value = value.replace(/(__0__0__)/gi, '__8__8__');
197198
style["iconUrl"] = value;
198199
continue;
199200
}

src/leaflet/overlay/carto/CartoDeaultStyle.js renamed to src/leaflet/overlay/carto/CartoDefaultStyle.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ var L = require("leaflet");
77
L.supermap.DefaultStyle = {
88
"TEXT": {
99
fontSize: "14px",
10-
fontFamily: "sans-serif",
10+
fontFamily: "Arial Unicode MS Regular,Microsoft YaHei",
1111
textAlign: "left",
1212

1313
color: "rgba(255,255,255,0)",
14-
fillColor: "rgba(0,0,0,1)",
14+
fillColor: "rgba(80,80,80,1)",
1515
weight: 1,
1616
globalAlpha: 1,
1717
},

‎src/leaflet/overlay/vectortile/TextSymbolizer.js‎

Lines changed: 42 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,27 @@ L.TextSymbolizer = L.Path.extend({
66
includes: L.Symbolizer.prototype,
77

88
options: {
9-
color: 'black',
9+
color: 'white',
1010
fillColor: 'black',
1111
fill: true,
12-
fillOpacity: 1.0,
13-
weight: 0.2,
12+
fillOpacity: 1,
13+
opacity: 0.6,
14+
weight: 1,
1415
rotation: 0.0,
1516
stroke: true,
16-
fontFamily: 'Microsoft Yahei',
17-
fontSize: 12,
18-
fontWeight: 'normal',
19-
textAlign: 'center'
17+
fontFamily: "Arial Unicode MS Regular",
18+
fontSize: 14,
19+
fontWeight: 'bold',
20+
textAlign: 'center',
21+
offsetX: 1,
22+
offsetY: 1
2023
},
2124

2225
initialize: function (feature, pxPerExtent) {
2326
L.Symbolizer.prototype.initialize.call(this, feature);
2427
this._makeFeatureParts(feature, pxPerExtent);
28+
this.options.offsetX = pxPerExtent || 1;
29+
this.options.offsetY = pxPerExtent || 1;
2530
},
2631

2732
render: function (renderer, style) {
@@ -35,8 +40,10 @@ L.TextSymbolizer = L.Path.extend({
3540
this._text = (attributes && this.properties.textField) ?
3641
attributes[this.properties.textField] || "" : "";
3742
}
38-
L.Symbolizer.prototype.render.call(this, renderer, style);
39-
L.Util.setOptions(this, style);
43+
options = this.options;
44+
this._pxBounds = L.bounds(this._point, this._point);
45+
L.Symbolizer.prototype.render.apply(this, [renderer, style]);
46+
this.options = L.Util.extend(options, style);
4047
this._updatePath();
4148
},
4249

@@ -79,45 +86,45 @@ L.Canvas.Renderer.include({
7986
_getTextWidth: function (layer) {
8087
return this._ctx.measureText(layer._text).width;
8188
},
82-
8389
_updateText: function (layer) {
8490
if (!this._drawing || layer._empty()) {
8591
return;
8692
}
87-
93+
container = this.getContainer();
94+
var size = this._map.getSize();
95+
container.width = size.x;
96+
container.height = size.y;
97+
container.style.width = size.x + 'px';
98+
container.style.height = size.y + 'px';
8899
var ctx = this._ctx,
89100
options = layer.options,
90-
offsetX = options.offsetX || 0,
91-
offsetY = options.offsetY || 0,
101+
offsetX = options.offsetX || 1,
102+
offsetY = options.offsetY || 1,
92103
p = layer._point.subtract(L.point(offsetX, offsetY));
93104
if (!options.fill) {
94105
return;
95106
}
96107

97108
this._drawnLayers[layer._leaflet_id] = layer;
98109

99-
ctx.translate(p.x, p.y);
100-
ctx.rotate(options.rotation);
101-
ctx.fillStyle = options.fillColor;
110+
ctx.fillRect(0, 0, size.x, size.y);
102111
ctx.font = [
103-
"normal",
104-
"normal",
105-
options.fontWeight ? options.fontWeight : "normal",
106-
options.fontSize ? options.fontSize : "1em",
107-
options.fontFamily ? options.fontFamily : "Microsoft Yahei"
112+
options.fontWeight ? options.fontWeight : "bold",
113+
options.fontSize ? options.fontSize : "14px",
114+
options.fontFamily ? options.fontFamily : "Arial Unicode MS Regular,Microsoft Yahei"
108115
].join(" ");
109116
ctx.textAlign = options.textAlign;
110-
ctx.lineWidth = options.weight / 10;
111-
ctx.fillText(layer._text, 0, 0);
117+
ctx.lineWidth = options.weight;
118+
ctx.fillStyle = options.fillColor;
119+
ctx.fillText(layer._text, p.x, p.y);
112120
ctx.strokeStyle = options.color;
113-
ctx.strokeText(layer._text, 0, 0);
114-
ctx.rotate(-options.rotation);
115-
ctx.translate(-p.x, -p.y);
121+
ctx.strokeText(layer._text, p.x, p.y);
122+
ctx.rotate(options.rotation);
116123
}
117124
});
118125
L.SVG.Renderer.include({
119126
_getTextWidth: function (layer) {
120-
return layer._path.getComputedTextLength();
127+
return layer._path.getComputedTextLength() || 0;
121128
},
122129

123130
_initPath: function (layer) {
@@ -146,8 +153,8 @@ L.SVG.Renderer.include({
146153
_updateText: function (layer) {
147154
var path = layer._path,
148155
options = layer.options,
149-
offsetX = options.offsetX || 0,
150-
offsetY = options.offsetY || 0,
156+
offsetX = options.offsetX || 1,
157+
offsetY = options.offsetY || 1,
151158
p = layer._point.subtract(L.point(offsetX, offsetY));
152159
path.setAttribute('x', p.x);
153160
path.setAttribute('y', p.y);
@@ -156,11 +163,14 @@ L.SVG.Renderer.include({
156163
path.setAttribute('text-anchor', options.textAlign === 'center' ? 'middle' : options.textAlign);
157164
path.style.fontSize = options.fontSize;
158165
path.style.fontFamily = options.fontFamily;
166+
path.style.fontWeight = options.fontWeight || "bold";
159167
path.style.glyphOrientationVertical = options.rotation;
160168
if (options.stroke) {
161169
path.setAttribute('stroke', options.color);
170+
path.setAttribute('stroke-linecap', 'round');
171+
path.setAttribute('stroke-linejoin', 'round');
162172
path.setAttribute('stroke-opacity', options.opacity);
163-
path.setAttribute('stroke-width', options.weight / 10);
173+
path.setAttribute('stroke-width', options.weight > 1 ? options.weight / 10 : options.weight);
164174
} else {
165175
path.setAttribute('stroke', 'none');
166176
}
@@ -171,5 +181,7 @@ L.SVG.Renderer.include({
171181
path.setAttribute('fill', 'none');
172182
}
173183
}
184+
185+
174186
});
175187
module.exports = L.TextSymbolizer;

‎src/leaflet/overlay/vectortile/VectorGrid.js‎

Lines changed: 46 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,28 @@ L.VectorGrid = L.GridLayer.extend({
1212
},
1313

1414
initialize: function (options) {
15-
L.Util.setOptions(this, options);
16-
L.GridLayer.prototype.initialize.apply(this, arguments);
17-
this._vectorTiles = {};
15+
var me = this;
16+
L.Util.setOptions(me, options);
17+
L.GridLayer.prototype.initialize.call(me, options);
18+
me._vectorTiles = {};
1819
//交互事件使用,键值为id_layerName
19-
this._overriddenStyles = {};
20-
this.vectorTileLayerStyles = this.options.vectorTileLayerStyles;
21-
this.on('tileunload', function (e) {
22-
var key = this._tileCoordsToKey(e.coords),
23-
tile = this._vectorTiles[key];
24-
25-
if (tile && this._map) {
26-
tile.removeFrom(this._map);
20+
me._overriddenStyles = {};
21+
me.vectorTileLayerStyles = me.options.vectorTileLayerStyles;
22+
me.on('tileunload', function (e) {
23+
var key = me._tileCoordsToKey(e.coords),
24+
tile = me._vectorTiles[key];
25+
26+
if (tile && me._map) {
27+
tile.removeFrom(me._map);
2728
}
28-
delete this._vectorTiles[key];
29-
}, this);
30-
31-
this._dataLayerNames = {};
29+
delete me._vectorTiles[key];
30+
}, me);
31+
me.on('tileerror ',me._renderText, me);
32+
me.on('load',me._renderText, me);
33+
me._dataLayerNames = {};
3234
},
3335

36+
3437
createTile: function (coords, done) {
3538
var me = this;
3639

@@ -88,6 +91,34 @@ L.VectorGrid = L.GridLayer.extend({
8891
return Object.keys(this._dataLayerNames);
8992
},
9093

94+
_removeAllTiles: function () {
95+
L.GridLayer.prototype._removeAllTiles.call(this);
96+
this._textVectorTiles = {};
97+
},
98+
99+
100+
_renderText: function () {
101+
var textVectorTiles = this._textVectorTiles;
102+
for (var key in textVectorTiles) {
103+
var textTiles = textVectorTiles[key];
104+
var renderer = textTiles.renderer;
105+
106+
for (var layerId in textTiles.layers) {
107+
var tile = textTiles.layers[layerId];
108+
var styleOptions = tile.style,
109+
featureLayer = tile.layer;
110+
for (var j = 0; j < styleOptions.length; j++) {
111+
featureLayer.render(renderer, styleOptions[j]);
112+
renderer._addPath(featureLayer);
113+
}
114+
115+
if (this.options.interactive) {
116+
featureLayer.makeInteractive();
117+
}
118+
}
119+
}
120+
},
121+
91122
_getFeatureKey: function (id, layerName) {
92123
id = id || 0;
93124
layerName = layerName || "null";

0 commit comments

Comments
 (0)