Skip to content

Commit 8a4e233

Browse files
songyumengsongyumeng
committed
【fix】Fix leaflet对cartocss的特殊字符的解析及测试 增加mapboxstyle setStyle方法测试 优化ServerGeometry转化算法 review by zhurch
1 parent d84d816 commit 8a4e233

File tree

10 files changed

+159
-82
lines changed

10 files changed

+159
-82
lines changed

‎src/common/commontypes/Bounds.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -436,8 +436,8 @@ export class Bounds {
436436
return false;
437437
}
438438

439-
x = Util.toFloat(x);
440-
y = Util.toFloat(y);
439+
//x = Util.toFloat(x);
440+
//y = Util.toFloat(y);
441441

442442
var contains = false;
443443
if (inclusive) {

‎src/common/iServer/ServerGeometry.js‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -278,6 +278,7 @@ export class ServerGeometry {
278278
var CCWArray = [];
279279
var areaArray = [];
280280
var polygonArrayTemp = [];
281+
var polygonBounds = [];
281282
//polyon岛洞标识数组，初始都是岛。
282283
var CCWIdent = [];
283284
for (let i = 0, pointIndex = 0; i < len; i++) {
@@ -292,11 +293,14 @@ export class ServerGeometry {
292293
);
293294
pointList = [];
294295
polygonArrayTemp.push(polygon);
296+
if (geoTopo.length === 0){
297+
polygonBounds.push(polygon.getBounds());
298+
}
295299
CCWIdent.push(1);
296300
areaArray.push(polygon.getArea());
297301
}
298302
//根据面积排序
299-
ServerGeometry.bubbleSort(areaArray, polygonArrayTemp, geoTopo);
303+
ServerGeometry.bubbleSort(areaArray, polygonArrayTemp, geoTopo, polygonBounds);
300304
//iServer 9D新增字段
301305
if (geoTopo.length === 0) {
302306
//岛洞底层判断原则：将所有的子对象按照面积排序，面积最大的直接判定为岛（1），从面积次大的开始处理，
@@ -307,7 +311,7 @@ export class ServerGeometry {
307311
for (let i = 1; i < polygonArrayTemp.length; i++) {
308312
for (let j = i - 1; j >= 0; j--) {
309313
targetArray[i] = -1;
310-
if (polygonArrayTemp[j].getBounds().containsBounds(polygonArrayTemp[i].getBounds())) {
314+
if (polygonBounds[j].containsBounds(polygonBounds[i])) {
311315
CCWIdent[i] = CCWIdent[j] * -1;
312316
if (CCWIdent[i] < 0) {
313317
targetArray[i] = j;
@@ -394,6 +398,7 @@ export class ServerGeometry {
394398
var CCWArray = [];
395399
var areaArray = [];
396400
var polygonArrayTemp = [];
401+
var polygonBounds = [];
397402
//polyon岛洞标识数组，初始都是岛。
398403
var CCWIdent = [];
399404
for (let i = 0, pointIndex = 0; i < len; i++) {
@@ -410,11 +415,14 @@ export class ServerGeometry {
410415
);
411416
pointList = [];
412417
polygonArrayTemp.push(polygon);
418+
if (geoTopo.length === 0){
419+
polygonBounds.push(polygon.getBounds());
420+
}
413421
CCWIdent.push(1);
414422
areaArray.push(polygon.getArea());
415423
}
416424
//根据面积排序
417-
ServerGeometry.bubbleSort(areaArray, polygonArrayTemp, geoTopo);
425+
ServerGeometry.bubbleSort(areaArray, polygonArrayTemp, geoTopo, polygonBounds);
418426
//iServer 9D新增字段
419427
if (geoTopo.length === 0) {
420428
//岛洞底层判断原则：将所有的子对象按照面积排序，面积最大的直接判定为岛（1），从面积次大的开始处理，
@@ -425,7 +433,7 @@ export class ServerGeometry {
425433
for (let i = 1; i < polygonArrayTemp.length; i++) {
426434
for (let j = i - 1; j >= 0; j--) {
427435
targetArray[i] = -1;
428-
if (polygonArrayTemp[j].getBounds().containsBounds(polygonArrayTemp[i].getBounds())) {
436+
if (polygonBounds[j].containsBounds(polygonBounds[i])) {
429437
CCWIdent[i] = CCWIdent[j] * -1;
430438
if (CCWIdent[i] < 0) {
431439
targetArray[i] = j;
@@ -602,7 +610,7 @@ export class ServerGeometry {
602610
return s * 0.5;
603611
}
604612

605-
static bubbleSort(areaArray, pointList, geoTopo) {
613+
static bubbleSort(areaArray, pointList, geoTopo,polygonBounds) {
606614
for (var i = 0; i < areaArray.length; i++) {
607615
for (var j = 0; j < areaArray.length; j++) {
608616
if (areaArray[i] > areaArray[j]) {
@@ -617,6 +625,11 @@ export class ServerGeometry {
617625
geoTopo[j] = geoTopo[i];
618626
geoTopo[i] = c;
619627
}
628+
if (polygonBounds && polygonBounds.length > 0) {
629+
var f = polygonBounds[j];
630+
polygonBounds[j] = polygonBounds[i];
631+
polygonBounds[i] = f;
632+
}
620633
}
621634
}
622635
}

‎src/leaflet/overlay/TileVectorLayer.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export var TileVectorLayer = VectorGrid.extend({
9797
}
9898
this.cartoCSSToLeaflet = new CartoCSSToLeaflet(me.url);
9999
me.initLayersInfo();
100-
if (!me.options.serverCartoCSSStyle && me.options) {
100+
if (!me.options.serverCartoCSSStyle && me.options.cartoCSS) {
101101
me.setClientCartoCSS(me.options.cartoCSS);
102102
}
103103
},
@@ -144,6 +144,7 @@ export var TileVectorLayer = VectorGrid.extend({
144144
}
145145
}
146146
me.layersInfo = layersInfo;
147+
me.cartoCSSToLeaflet.layersInfo = layersInfo;
147148
if (me.options.serverCartoCSSStyle) {
148149
me.getVectorStylesFromServer();
149150
}
@@ -265,7 +266,7 @@ export var TileVectorLayer = VectorGrid.extend({
265266
layerStyleInfo = me.getLayerStyleInfo(layerName);
266267

267268
//处理标签图层
268-
if (layerStyleInfo.textField) {
269+
if (layerStyleInfo && layerStyleInfo.textField) {
269270
var textField = layerStyleInfo.textField;
270271
if (textField && textField.indexOf('.')) {
271272
var arr = textField.split('.');

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

Lines changed: 87 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,20 @@
33
* which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
44
import L from "leaflet";
55
import '../../core/Base';
6-
import {SuperMap, CommonUtil as Util, CartoCSS, StringExt} from "@supermap/iclient-common";
7-
import {DefaultStyle} from './CartoDefaultStyle';
8-
import {CartoStyleMap, ServerStyleMap, CompOpMap} from './CartoStyleMap';
6+
import {
7+
SuperMap,
8+
CommonUtil as Util,
9+
CartoCSS,
10+
StringExt
11+
} from "@supermap/iclient-common";
12+
import {
13+
DefaultStyle
14+
} from './CartoDefaultStyle';
15+
import {
16+
CartoStyleMap,
17+
ServerStyleMap,
18+
CompOpMap
19+
} from './CartoStyleMap';
920

1021
/**
1122
* @class L.supermap.CartoCSSToLeaflet
@@ -67,11 +78,23 @@ export class CartoCSSToLeaflet {
6778
}
6879
var me = this;
6980
style = style.replace(/[@]/gi, "___");
70-
style = style.replace(/\\#/gi, "___");
71-
for (var attr in me.layersInfo) {
81+
style = style.replace(/\\#/gi, "\#");
82+
83+
var cachedLayer = {};
84+
me.layersInfo && Object.keys(me.layersInfo).sort().forEach(function (attr) {
7285
var newAttr = attr.replace(/[@#\s]/gi, "___");
73-
style = style.replace(attr.replace(/[#]/gi, "\\#"), newAttr);
74-
}
86+
var to = attr;
87+
var keys = Object.keys(cachedLayer);
88+
for (let index = keys.length; index > -1; index--) {
89+
if (attr.indexOf(keys[index]) > -1) {
90+
to = attr.replace(keys[index], cachedLayer[keys[index]]);
91+
break;
92+
}
93+
}
94+
to = to.replace(/[#]/gi, "\#");
95+
cachedLayer[attr] = newAttr;
96+
style = style.replace(new RegExp(to, "g"), newAttr);
97+
})
7598
style = style.replace(/[#]/gi, "\n#");
7699
//将zoom转化为scale，以免引起混淆
77100
style = style.replace(/\[zoom/gi, "[scale");
@@ -256,11 +279,11 @@ export class CartoCSSToLeaflet {
256279
var value = _shader.getValue(attributes, zoom, true);
257280
if ((value !== null) && prop) {
258281
if (prop === "fontSize") {
259-
if (fromServer) {
260-
value *= 0.8
261-
}
262-
fontSize = value + "px";
263-
style.fontSize = fontSize;
282+
if (fromServer) {
283+
value *= 0.8
284+
}
285+
fontSize = value + "px";
286+
style.fontSize = fontSize;
264287
} else if (prop === "fontName") {
265288
fontName = value;
266289
style.fontName = fontName;
@@ -319,7 +342,7 @@ export class CartoCSSToLeaflet {
319342
//设置文本的尺寸（对应fontHeight属性）和行高，行高iserver不支持，默认5像素
320343
//固定大小的时候单位是毫米
321344
if (shader.fontHeight) {
322-
var text_h = shader.fontHeight * SuperMap.DOTS_PER_INCH * SuperMap.INCHES_PER_UNIT["mm"] * 0.85; //毫米转像素,服务端的字体貌似要稍微小一点
345+
var text_h = shader.fontHeight * SuperMap.DOTS_PER_INCH * SuperMap.INCHES_PER_UNIT["mm"] * 0.85; //毫米转像素,服务端的字体貌似要稍微小一点
323346
style.fontSize = text_h + "px";
324347
style.textHeight = text_h;
325348
}
@@ -339,16 +362,16 @@ export class CartoCSSToLeaflet {
339362
}
340363
style.weight = shader.outline ? shader.outlineWidth : 0;
341364
if (shader.backColor) {
342-
style.color = "rgba(" + shader.backColor.red + ","
343-
+ shader.backColor.green + ","
344-
+ shader.backColor.blue
345-
+ ",1)";
365+
style.color = "rgba(" + shader.backColor.red + "," +
366+
shader.backColor.green + "," +
367+
shader.backColor.blue +
368+
",1)";
346369
}
347370
if (shader.foreColor) {
348-
style.fillColor = "rgba(" + shader.foreColor.red + ","
349-
+ shader.foreColor.green + ","
350-
+ shader.foreColor.blue
351-
+ ",1)";
371+
style.fillColor = "rgba(" + shader.foreColor.red + "," +
372+
shader.foreColor.green + "," +
373+
shader.foreColor.blue +
374+
",1)";
352375
}
353376
style.rotation = shader.rotation || 0;
354377
return style;
@@ -364,55 +387,55 @@ export class CartoCSSToLeaflet {
364387
var leafletStyle = obj.leafletStyle;
365388
switch (obj.type) {
366389
case "number":
367-
{
368-
let value = shader[attr];
369-
if (obj.unit) {
370-
value = value * SuperMap.DOTS_PER_INCH * SuperMap.INCHES_PER_UNIT[obj.unit] * 2.5;
390+
{
391+
let value = shader[attr];
392+
if (obj.unit) {
393+
value = value * SuperMap.DOTS_PER_INCH * SuperMap.INCHES_PER_UNIT[obj.unit] * 2.5;
394+
}
395+
style[leafletStyle] = value;
396+
break;
371397
}
372-
style[leafletStyle] = value;
373-
break;
374-
}
375398

376399
case "color":
377-
{
378-
var color = shader[attr];
379-
let value, alpha = 1;
380-
if (leafletStyle === "fillColor") {
381-
if (fillSymbolID === 0 || fillSymbolID === 1) {
382-
//当fillSymbolID为0时，用颜色填充，为1是无填充，即为透明填充，alpha通道为0
383-
alpha = 1 - fillSymbolID;
384-
value = "rgba(" + color.red + "," + color.green + "," + color.blue + "," + alpha + ")";
385-
}
386-
} else if (leafletStyle === "color") {
387-
if (lineSymbolID === 0 || lineSymbolID === 5) {
388-
//对于lineSymbolID为0时，线为实线，为lineSymbolID为5时，为无线模式，即线为透明，即alpha通道为0
389-
alpha = lineSymbolID === 0 ? 1 : 0;
390-
} else {
391-
//以下几种linePattern分别模拟了桌面的SymbolID为1~4几种符号的linePattern
392-
var linePattern = [1, 0];
393-
switch (lineSymbolID) {
394-
case 1:
395-
linePattern = [9.7, 3.7];
396-
break;
397-
case 2:
398-
linePattern = [3.7, 3.7];
399-
break;
400-
case 3:
401-
linePattern = [9.7, 3.7, 2.3, 3.7];
402-
break;
403-
case 4:
404-
linePattern = [9.7, 3.7, 2.3, 3.7, 2.3, 3.7];
405-
break;
406-
default:
407-
break
400+
{
401+
var color = shader[attr];
402+
let value, alpha = 1;
403+
if (leafletStyle === "fillColor") {
404+
if (fillSymbolID === 0 || fillSymbolID === 1) {
405+
//当fillSymbolID为0时，用颜色填充，为1是无填充，即为透明填充，alpha通道为0
406+
alpha = 1 - fillSymbolID;
407+
value = "rgba(" + color.red + "," + color.green + "," + color.blue + "," + alpha + ")";
408+
}
409+
} else if (leafletStyle === "color") {
410+
if (lineSymbolID === 0 || lineSymbolID === 5) {
411+
//对于lineSymbolID为0时，线为实线，为lineSymbolID为5时，为无线模式，即线为透明，即alpha通道为0
412+
alpha = lineSymbolID === 0 ? 1 : 0;
413+
} else {
414+
//以下几种linePattern分别模拟了桌面的SymbolID为1~4几种符号的linePattern
415+
var linePattern = [1, 0];
416+
switch (lineSymbolID) {
417+
case 1:
418+
linePattern = [9.7, 3.7];
419+
break;
420+
case 2:
421+
linePattern = [3.7, 3.7];
422+
break;
423+
case 3:
424+
linePattern = [9.7, 3.7, 2.3, 3.7];
425+
break;
426+
case 4:
427+
linePattern = [9.7, 3.7, 2.3, 3.7, 2.3, 3.7];
428+
break;
429+
default:
430+
break
431+
}
432+
style.lineDasharray = linePattern;
408433
}
409-
style.lineDasharray = linePattern;
434+
value = "rgba(" + color.red + "," + color.green + "," + color.blue + "," + alpha + ")";
410435
}
411-
value = "rgba(" + color.red + "," + color.green + "," + color.blue + "," + alpha + ")";
436+
style[leafletStyle] = value;
437+
break;
412438
}
413-
style[leafletStyle] = value;
414-
break;
415-
}
416439
default:
417440
break;
418441
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export var VectorTile = L.Class.extend({
8686
}
8787

8888
//标签图层处理为文本
89-
if (layerStyleInfo.type === VectorFeatureType.LABEL
89+
if (layerStyleInfo && layerStyleInfo.type === VectorFeatureType.LABEL
9090
&& feat.type === VectorFeatureType.POINT
9191
&& feat.properties.attributes) {
9292
feat.type = VectorFeatureType.TEXT;

‎src/mapboxgl/core/MapExtend.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export var MapExtend = function () {
9393
this.x * width + originX,
9494
originY - this.y * height);
9595
};
96-
this.customConvertPoint = window.URL.createObjectURL(new Blob(['customConvertPoint = {projectX:function(x){return (x - ' + centerX + ') / ' + width + ' + 0.5},projectY:function(y){y = 0.5 - ((y - ' + centerY + ') / ' + height + ');return y < 0 ? 0 : y > 1 ? 1 : y;},toY:function(y){return (0.5-y)*' + height + '+' + centerY + ';}}']));
96+
this.customConvertPoint = window.URL.createObjectURL(new Blob(['customConvertPoint = {projectX:function(x){return (x - ' + centerX + ') / ' + width + ' + 0.5},projectY:function(y){y = 0.5 - ((y - ' + centerY + ') / ' + height + ');return y < 0 ? 0 : y > 1 ? 1 : y;},toY:function(y){return (0.5-y)*' + height + '+' + centerY + ';}}'],{type:"text/javascript"}));
9797
}
9898

9999

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,7 @@ export class MapboxStyles extends ol.Observable {
179179
* @param {Object} style - Mapbox style 对象。
180180
*/
181181
setStyle(style) {
182+
this.layersBySourceLayer={};
182183
this._mbStyle = style;
183184
this._resolve();
184185
}

0 commit comments

Comments
 (0)