Skip to content

Commit 8e07804

Browse files
committed
优化ol mvt显示效果(支持面填充,沿线标注,多面缺失) 重写ol的部分方法
1 parent 2872fa1 commit 8e07804

File tree

7 files changed

+1699
-1139
lines changed

7 files changed

+1699
-1139
lines changed

dist/iclient9-openlayers.js

Lines changed: 1399 additions & 1111 deletions
Large diffs are not rendered by default.

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.

examples/data/styles/beijing.json

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -338,10 +338,7 @@
338338
"text-anchor": "bottom-left",
339339
"text-field": "{NAME}",
340340
"text-max-width": 7,
341-
"text-font": [
342-
"DIN Offc Pro Medium",
343-
"Arial Unicode MS Regular"
344-
],
341+
"text-font": ["Microsoft YaHei Regular"],
345342
"text-size": 22
346343
},
347344
"paint": {
@@ -362,6 +359,7 @@
362359
"text-offset": [-1.5, -0.5],
363360
"text-anchor": "bottom-left",
364361
"text-field": "{NAME}",
362+
"text-font": ["Microsoft YaHei Regular"],
365363
"text-max-width": 7,
366364
"text-size": 14
367365
},
@@ -395,10 +393,7 @@
395393
]
396394
]
397395
},
398-
"text-font": [
399-
"DIN Offc Pro Italic",
400-
"Arial Unicode MS Regular"
401-
],
396+
"text-font": ["Microsoft YaHei Regular"],
402397
"symbol-placement": "line",
403398
"text-field": "{道路名称}",
404399
"text-letter-spacing": 0.1,
@@ -436,10 +431,7 @@
436431
]
437432
]
438433
},
439-
"text-font": [
440-
"DIN Offc Pro Italic",
441-
"Arial Unicode MS Regular"
442-
],
434+
"text-font": ["Microsoft YaHei Regular"],
443435
"symbol-placement": "line",
444436
"text-field": "{道路名称}",
445437
"text-letter-spacing": 0.1,
@@ -465,6 +457,7 @@
465457
"text-offset": [-1, -1],
466458
"text-anchor": "bottom",
467459
"text-field": "{NAME}",
460+
"text-font": ["Microsoft YaHei Regular"],
468461
"text-size": 14
469462
},
470463
"paint": {
@@ -486,6 +479,7 @@
486479
"text-offset": [-1, -1],
487480
"text-anchor": "bottom",
488481
"text-field": "{NAME}",
482+
"text-font": ["Microsoft YaHei Regular"],
489483
"text-size": 12
490484
},
491485
"paint": {
@@ -507,6 +501,7 @@
507501
"text-offset": [-1, -1],
508502
"text-anchor": "bottom",
509503
"text-field": "{NAME}",
504+
"text-font": ["Microsoft YaHei Regular"],
510505
"text-size": 12
511506
},
512507
"paint": {
@@ -528,6 +523,7 @@
528523
"text-offset": [0, -0.5],
529524
"text-anchor": "bottom",
530525
"text-field": "{NAME}",
526+
"text-font": ["Microsoft YaHei Regular"],
531527
"text-size": 12
532528
},
533529
"paint": {
@@ -549,6 +545,7 @@
549545
"text-offset": [0, -0.5],
550546
"text-anchor": "bottom",
551547
"text-field": "{NAME}",
548+
"text-font": ["Microsoft YaHei Regular"],
552549
"text-size": 12
553550
},
554551
"paint": {
@@ -570,6 +567,7 @@
570567
"text-offset": [0, -0.5],
571568
"text-anchor": "bottom",
572569
"text-field": "{NAME}",
570+
"text-font": ["Microsoft YaHei Regular"],
573571
"text-size": 12
574572
},
575573
"paint": {
@@ -591,6 +589,7 @@
591589
"text-offset": [0, -0.5],
592590
"text-anchor": "bottom",
593591
"text-field": "{NAME}",
592+
"text-font": ["Microsoft YaHei Regular"],
594593
"text-size": 12
595594
},
596595
"paint": {
@@ -612,6 +611,7 @@
612611
"text-offset": [0, -0.5],
613612
"text-anchor": "bottom",
614613
"text-field": "{NAME}",
614+
"text-font": ["Microsoft YaHei Regular"],
615615
"text-size": 12
616616
},
617617
"paint": {
@@ -633,6 +633,7 @@
633633
"text-offset": [0, -0.5],
634634
"text-anchor": "bottom",
635635
"text-field": "{NAME}",
636+
"text-font": ["Microsoft YaHei Regular"],
636637
"text-size": 12
637638
},
638639
"paint": {
@@ -654,6 +655,7 @@
654655
"text-offset": [0, -0.5],
655656
"text-anchor": "bottom",
656657
"text-field": "{NAME}",
658+
"text-font": ["Microsoft YaHei Regular"],
657659
"text-size": 12
658660
},
659661
"paint": {
@@ -675,6 +677,7 @@
675677
"text-offset": [0, -0.5],
676678
"text-anchor": "bottom",
677679
"text-field": "{NAME}",
680+
"text-font": ["Microsoft YaHei Regular"],
678681
"text-size": 12
679682
},
680683
"paint": {
@@ -696,6 +699,7 @@
696699
"text-offset": [0, -0.5],
697700
"text-anchor": "bottom",
698701
"text-field": "{NAME}",
702+
"text-font": ["Microsoft YaHei Regular"],
699703
"text-size": 12
700704
},
701705
"paint": {
@@ -717,6 +721,7 @@
717721
"text-offset": [0, -0.5],
718722
"text-anchor": "bottom",
719723
"text-field": "{NAME}",
724+
"text-font": ["Microsoft YaHei Regular"],
720725
"text-size": 12
721726
},
722727
"filter": [
@@ -743,6 +748,7 @@
743748
"text-offset": [0, -0.5],
744749
"text-anchor": "bottom",
745750
"text-field": "{NAME}",
751+
"text-font": ["Microsoft YaHei Regular"],
746752
"text-size": 12
747753
},
748754
"paint": {
@@ -764,6 +770,7 @@
764770
"text-offset": [0, -0.5],
765771
"text-anchor": "bottom",
766772
"text-field": "{NAME}",
773+
"text-font": ["Microsoft YaHei Regular"],
767774
"text-size": 12
768775
},
769776
"filter": [
@@ -790,6 +797,7 @@
790797
"text-offset": [0, -0.5],
791798
"text-anchor": "bottom",
792799
"text-field": "{NAME}",
800+
"text-font": ["Microsoft YaHei Regular"],
793801
"text-size": 10,
794802
"text-max-width": 18
795803
},
@@ -813,6 +821,7 @@
813821
"text-offset": [0, -0.5],
814822
"text-anchor": "bottom",
815823
"text-field": "{NAME}",
824+
"text-font": ["Microsoft YaHei Regular"],
816825
"text-size": 12
817826
},
818827
"paint": {
@@ -834,6 +843,7 @@
834843
"text-offset": [0, -0.5],
835844
"text-anchor": "bottom",
836845
"text-field": "{NAME}",
846+
"text-font": ["Microsoft YaHei Regular"],
837847
"text-size": 12
838848
},
839849
"paint": {
@@ -855,6 +865,7 @@
855865
"text-offset": [0, -0.5],
856866
"text-anchor": "bottom",
857867
"text-field": "{NAME}",
868+
"text-font": ["Microsoft YaHei Regular"],
858869
"text-size": 12
859870
},
860871
"paint": {
@@ -876,6 +887,7 @@
876887
"text-offset": [0, -0.5],
877888
"text-anchor": "bottom",
878889
"text-field": "{NAME}",
890+
"text-font": ["Microsoft YaHei Regular"],
879891
"text-size": 12
880892
},
881893
"paint": {
@@ -897,6 +909,7 @@
897909
"text-offset": [0, -0.5],
898910
"text-anchor": "bottom",
899911
"text-field": "{NAME}",
912+
"text-font": ["Microsoft YaHei Regular"],
900913
"text-size": 12
901914
},
902915
"paint": {
@@ -918,6 +931,7 @@
918931
"text-offset": [0, -0.5],
919932
"text-anchor": "bottom",
920933
"text-field": "{NAME}",
934+
"text-font": ["Microsoft YaHei Regular"],
921935
"text-size": 12
922936
},
923937
"paint": {
@@ -939,6 +953,7 @@
939953
"text-offset": [0, -0.5],
940954
"text-anchor": "bottom",
941955
"text-field": "{NAME}",
956+
"text-font": ["Microsoft YaHei Regular"],
942957
"text-size": 12
943958
},
944959
"paint": {
@@ -960,6 +975,7 @@
960975
"text-offset": [0, -0.5],
961976
"text-anchor": "bottom",
962977
"text-field": "{NAME}",
978+
"text-font": ["Microsoft YaHei Regular"],
963979
"text-size": 12
964980
},
965981
"paint": {
@@ -981,6 +997,7 @@
981997
"text-offset": [0, -0.3],
982998
"text-anchor": "bottom",
983999
"text-field": "{NAME}",
1000+
"text-font": ["Microsoft YaHei Regular"],
9841001
"text-size": 12
9851002
},
9861003
"paint": {

examples/openlayers/mvtvectorlayer_mbstyle_4326.html

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
<title data-i18n="resources.title_mvtVectorLayer"></title>
77
<script type="text/javascript" src="../js/include-web.js"></script>
88
<!--<script type="text/javascript" src="../../dist/include-openlayers.js"></script>-->
9-
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
9+
<link href="https://cdn.bootcss.com/openlayers/4.6.5/ol-debug.css" rel="stylesheet">
1010
<!--当前示例使用 ol-debug 原因:ol.format.MVT 默认坐标系为 3857,最新代码未更新该默认设置,需使用ol-debug,设置 defaultDataProjection 参数,以支持4326底图-->
11-
<script src="https://openlayers.org/en/v4.6.4/build/ol-debug.js"></script>
11+
<script src="https://cdn.bootcss.com/openlayers/4.6.5/ol-debug.js"></script>
1212
<script type="text/javascript" src="http://iclient.supermap.io/web/libs/openlayers/plugins/ol-mapbox-style/2.11.2/olms.js"></script>
1313
<script type="text/javascript" src="../../dist/iclient9-openlayers.js"></script>
1414
<style>
@@ -71,14 +71,13 @@
7171
info.setMap(map);
7272
map.addControl(info);
7373
var format = new ol.format.MVT({
74-
//layers: ['Motorway_REF_L@California'],
7574
featureClass: ol.Feature
7675

7776
});
78-
format.defaultDataProjection = new ol.proj.Projection({
79-
code: 'EPSG:4326',
80-
units: ol.proj.Units.TILE_PIXELS
81-
});
77+
// format.defaultDataProjection = new ol.proj.Projection({
78+
// code: 'EPSG:4326',
79+
// units: ol.proj.Units.TILE_PIXELS
80+
// });
8281
var style = new ol.supermap.MapboxStyles({
8382
url: url,
8483
source: 'California',

examples/openlayers/mvtvectorlayer_mbstyle_beijing.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@
4646
<label for='positron' data-i18n="resources.text_positronStyle"></label>
4747
</div>
4848
<script type="text/javascript" include='bootstrap-css' src="../js/include-web.js"></script>
49-
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
50-
<script src="https://openlayers.org/en/v4.6.4/build/ol-debug.js"></script>
49+
<link href="https://cdn.bootcss.com/openlayers/4.6.5/ol-debug.css" rel="stylesheet">
50+
<script src="https://cdn.bootcss.com/openlayers/4.6.5/ol-debug.js"></script>
5151
<script type="text/javascript" src="http://iclient.supermap.io/web/libs/openlayers/plugins/ol-mapbox-style/2.11.2/olms.js"></script>
5252
<script type="text/javascript" src="../../dist/iclient9-openlayers.js"></script>
5353
<script type="text/javascript">

src/openlayers/overlay/vectortile/MapboxStyles.js

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import ol from 'openlayers';
22
import {
33
FetchRequest
44
} from "@supermap/iclient-common";
5+
import {olExtends} from './olExtends'
56

67

78
/**
@@ -56,12 +57,7 @@ export class MapboxStyles extends ol.Observable {
5657
this.url = options.url ? options.url + '/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true' : "";
5758
this.resolutions = options.resolutions;
5859
this.style = options.style;
59-
//applyStyleFunction 调用了ol.geom.LineString.getFlatMidpoint但是该方法在ol-debug.js里才有
60-
if (!ol.geom.LineString.getFlatMidpoint) {
61-
ol.geom.LineString.prototype.getFlatMidpoint = function () {
62-
return this.getCoordinateAt(0.5);
63-
};
64-
}
60+
olExtends(this.map);
6561
if (this.style) {
6662
this._resolve(this.style);
6763
} else {

0 commit comments

Comments
 (0)