Skip to content

Commit 78bd70f

Browse files
liqian7liqian7
committed
openlayers 线样式编辑示例优化 review by zhurc
1 parent 01d995a commit 78bd70f

File tree

3 files changed

+123
-31
lines changed

3 files changed

+123
-31
lines changed

‎examples/locales/en-US/resources.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1114,12 +1114,14 @@ window.examplesResources = {
11141114
"text_esmode_streaming": "real time display",
11151115
"text_esmode_history": "historical display",
11161116
"text_esmode": "display mode",
1117-
"text_LineStyleEditor": "LineStyleEditor: California",
1118-
"text_lineBorderLayer": "layer(lineBorder):",
1119-
"text_lineFillLayer": "layer(lineFill):",
1120-
"text_lineColor_1": "line color:",
1121-
"text_lineOpacity": "line opacity:",
1122-
"text_lineWidth_1": "line width:",
1117+
"text_LineStyleEditor": "Layer:",
1118+
"text_lineBorderLayer": "LineBorder",
1119+
"text_lineFillLayer": "LineFill",
1120+
"text_lineColor_1": "color:",
1121+
"text_lineOpacity": "opacity:",
1122+
"text_lineWidth_1": "width:",
1123+
"text_tipsPopup_subtext": "Click on the line to edit this linelayer style",
1124+
"text_alert_subtext":"Click on the LineLayer to Edit LineLayer Style",
11231125
"text_paly": "play",
11241126
"text_pause": "pause",
11251127
"text_mb_deckglLayer_nyc_census": "This dataset contains the 2010 Census tract population data of NYC",

‎examples/locales/zh-CN/resources.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1059,12 +1059,14 @@ window.examplesResources = {
10591059
"text_esmode_streaming": "实时展示",
10601060
"text_esmode_history": "历史展示",
10611061
"text_esmode": "展示模式",
1062-
"text_LineStyleEditor": "线样式编辑器：california",
1063-
"text_lineBorderLayer": "图层（线边框）: ",
1064-
"text_lineFillLayer": "图层（线填充）: ",
1065-
"text_lineColor_1": "线的颜色：",
1066-
"text_lineOpacity": "线的透明度：",
1067-
"text_lineWidth_1": "线的宽度：",
1062+
"text_LineStyleEditor": "图层：",
1063+
"text_lineBorderLayer": "线边框 ",
1064+
"text_lineFillLayer": "线填充 ",
1065+
"text_lineColor_1": "颜色：",
1066+
"text_lineOpacity": "透明度：",
1067+
"text_lineWidth_1": "宽度：",
1068+
"text_tipsPopup_subtext": "点击线编辑该线图层样式",
1069+
"text_alert_subtext": "点击线图层编辑线图层样式",
10681070
"text_paly": "开始",
10691071
"text_pause": "暂停",
10701072
"text_mb_deckglLayer_nyc_census": "该数据集包含纽约市2010年人口普查地区人口数据",

‎examples/openlayers/mvtvectorlayer_mbstyle_linestyle.html‎

Lines changed: 107 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<head>
55
<!-- <meta charset="UTF-8"> -->
66
<title data-i18n="resources.title_mvtVectorLayer_mapboxStyle_lineStyle"></title>
7-
<script type="text/javascript" include="bootstrap,jquery,colorpicker,ionRangeSlider" src="../js/include-web.js"></script>
87
<!--<script type="text/javascript" src="../../dist/include-openlayers.js"></script>-->
98
<!--当前示例使用 ol-debug 原因：ol.format.MVT 默认坐标系为 3857，最新代码未更新该默认设置，需使用ol-debug，设置 defaultDataProjection 参数，以支持4326底图-->
109
<script src="https://cdn.bootcss.com/openlayers/4.6.5/ol-debug.js"></script>
@@ -13,7 +12,7 @@
1312
<style>
1413
ol {
1514
list-style: none;
16-
margin-left: -38px;
15+
margin-left: -30px;
1716
}
1817

1918
.ol-popup {
@@ -27,6 +26,21 @@
2726
left: 10px;
2827
opacity: 0;
2928
transition: opacity 100ms ease-in;
29+
color: white;
30+
font-size: 15px;
31+
font-weight: bold;
32+
}
33+
34+
#tipsPopup {
35+
background-color: rgba(0, 60, 136, 0.7);
36+
color: red;
37+
display: none;
38+
padding: 15px;
39+
color: white;
40+
font-size: 15px;
41+
font-weight: bold;
42+
border-radius: 5px;
43+
box-shadow: 0px -1px 46px 0px rgba(0, 0, 0, 0.75);
3044
}
3145

3246
.editContainer {
@@ -39,15 +53,14 @@
3953
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
4054
box-shadow: 0px 0px 13px 0px rgba(25, 34, 41, 1);
4155
background: white;
42-
43-
56+
width: 300px;
4457
}
4558

4659
.editContainer>.mainPanelHeader {
4760
width: 100%;
4861
padding: 8px 15px;
4962
background: rgb(0, 131, 203);
50-
font-size: 18px;
63+
font-size: 17px;
5164
font-weight: bold;
5265
color: white;
5366

@@ -67,12 +80,16 @@
6780
color: grey;
6881

6982
}
70-
83+
.layerType{
84+
margin-top: 20px;
85+
font-size: 16px;
86+
font-weight: bold;
87+
}
7188
.borderPanel,
7289
.fillPanel {
7390
background: white;
7491
margin: 10px;
75-
padding: 8px 17px 3px;
92+
padding: 8px 12px 3px;
7693
box-shadow: inset 0px 0px 7px 0px rgba(43, 40, 43, 1);
7794
}
7895

@@ -85,6 +102,44 @@
85102
padding: 8px 0 8px;
86103
font-size: 15px;
87104
}
105+
106+
.irs {
107+
height: 40px !important;
108+
}
109+
110+
.irs-line,
111+
.irs-line-left,
112+
.irs-line-mid,
113+
.irs-line,
114+
.irs-bar,
115+
.irs-bar-edge {
116+
height: 5px !important;
117+
}
118+
119+
.irs-min,
120+
.irs-max,
121+
.irs-from,
122+
.irs-to,
123+
.irs-single {
124+
font-size: 10px !important;
125+
}
126+
127+
.irs-slider {
128+
top: 27px !important;
129+
width: 15px !important;
130+
height: 15px !important;
131+
}
132+
133+
.alertContainer {
134+
width: 100%;
135+
text-align: center;
136+
position: absolute;
137+
top:10px;
138+
}
139+
.alertContainer > .alert{
140+
margin: auto;
141+
width: 300px;
142+
}
88143
</style>
89144
</head>
90145

@@ -93,62 +148,77 @@
93148
<div id="popup" class="ol-popup">
94149
<div id="popup-content"></div>
95150
</div>
151+
<div id="tipsPopup">
152+
<span data-i18n="resources.text_tipsPopup_subtext"></span>
153+
</div>
154+
<div class="alertContainer">
155+
<div class="alert alert-info alert-dismissible" role="alert">
156+
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
157+
<span aria-hidden="true">&times;</span>
158+
</button>
159+
<strong data-i18n="resources.text_alert_subtext"></strong>
160+
</div>
161+
</div>
96162
<div class="editContainer" id="editorContainer">
97163
<div class="mainPanelHeader">
98164
<span data-i18n="resources.text_LineStyleEditor"></span>
165+
<span id="layer_name"></span>
99166
<span class="closeButton" id="closeButton">×</span>
167+
100168
</div>
101169
<div class="editPanel">
102170
<div class="borderPanel">
103171
<div class="borderPanelHeader">
104-
<span data-i18n="resources.text_lineBorderLayer"></span>
105-
<span id="border_layers_id"></span>
172+
<span data-i18n="resources.text_lineBorderLayer" class="layerType"></span>
173+
<span id="border_layers_id" style="display:none"></span>
106174
</div>
107175
<ol class="borderPanelList">
108176
<li>
109177
<label for="border_input_lineColor" data-i18n="resources.text_lineColor_1"></label>
110-
<input type="text" id="border_input_lineColor" value="" style="width:102px;" />
178+
<input type="text" id="border_input_lineColor" value="" style="width:158px;" />
111179
<span>
112180
<img src='../img/colorpicker.png' id="border_input_lineColor_pic" style="cursor:pointer" />
113181
</span>
114182
</li>
115-
<li>
183+
<li class="slider">
116184
<label for="border_input_lineOpacity" data-i18n="resources.text_lineOpacity"></label>
117185
<input type="text" id="border_input_lineOpacity" name="border_input_lineOpacity">
118186
</li>
119-
<li>
187+
<li class="slider">
120188
<label for="border_input_lineWidth" data-i18n="resources.text_lineWidth_1"></label>
121189
<input type="text" id="border_input_lineWidth" name="border_input_lineWidth">
122190
</li>
123191
</ol>
124192
</div>
125193
<div class="fillPanel">
126194
<div class="fillPanelHeader">
127-
<span data-i18n="resources.text_lineFillLayer"></span>
128-
<span id="fill_layers_id"></span>
195+
<span data-i18n="resources.text_lineFillLayer" class="layerType"></span>
196+
<span id="fill_layers_id" style = "display:none"></span>
129197
</div>
130198
<ol class="fillPanelList">
131199
<li>
132200
<label for="fill_input_lineColor" data-i18n="resources.text_lineColor_1"></label>
133-
<input type="text" id="fill_input_lineColor" value="" style="width:102px;" />
201+
<input type="text" id="fill_input_lineColor" value="" style="width:158px;" />
134202
<span>
135203
<img src='../img/colorpicker.png' id="fill_input_lineColor_pic" style="cursor:pointer" />
136204
</span>
137205
</li>
138-
<li>
206+
<li class="slider">
139207
<label for="fill_input_lineOpacity" name="fill_input_lineOpacity" data-i18n="resources.text_lineOpacity"></label>
140208
<input type="text" id="fill_input_lineOpacity">
141209
</li>
142-
<li>
210+
<li class="slider">
143211
<label for="fill_input_lineWidth" data-i18n="resources.text_lineWidth_1"></label>
144212
<input type="text" id="fill_input_lineWidth" name="fill_input_lineWidth">
145213
</li>
146214
</ol>
147215
</div>
148216
</div>
149217
</div>
218+
<script type="text/javascript" include="bootstrap,jquery,colorpicker,ionRangeSlider" src="../js/include-web.js"></script>
150219

151220
<script type="text/javascript">
221+
152222
var url = (window.isLocal ? window.server : "http://54.223.164.155:8090") +
153223
"/iserver/services/map-mvt-California/rest/maps/California";
154224
getResolutions = function (zoom, scale, targetMinZoom, targetMaxZoom) {
@@ -180,7 +250,8 @@
180250
});
181251
var container = document.getElementById('popup');
182252
var content = document.getElementById('popup-content');
183-
var editorContainer = document.getElementById('editorContainer')
253+
var editorContainer = document.getElementById('editorContainer');
254+
var tipsPopupContainer = document.getElementById('tipsPopup');
184255
info = new ol.control.Control({
185256
element: container
186257
});
@@ -191,6 +262,12 @@
191262
editorContainerInfo.setMap(map);
192263
map.addControl(info);
193264
map.addControl(editorContainerInfo);
265+
var tipsPopup = new ol.Overlay({
266+
element: tipsPopupContainer,
267+
offset: [15, -50]
268+
});
269+
270+
map.addOverlay(tipsPopup);
194271
var format = new ol.format.MVT({
195272
featureClass: ol.Feature
196273
});
@@ -227,11 +304,22 @@
227304
if (!features) {
228305
content.innerHTML = '';
229306
container.style.opacity = 0;
307+
tipsPopupContainer.style.display = "none";
230308
return;
231309
}
232310
content.innerHTML = "Layer: " + features[0].get('layer') + "<br />" + (features[0].get('NAME') ?
233311
"Name: " + features[0].get('NAME') : "");
234312
container.style.opacity = 1;
313+
314+
var layerName = features[0].get('layer');
315+
var layerStyleArr = style.getStylesBySourceLayer(layerName);
316+
if (layerStyleArr[0].type !== 'line') {
317+
tipsPopupContainer.style.display = "none";
318+
return;
319+
}
320+
321+
tipsPopupContainer.style.display = "block";
322+
tipsPopup.setPosition(e.coordinate);
235323
});
236324

237325

@@ -250,7 +338,6 @@
250338
fillJqObject['lineWidth'] = $("#fill_input_lineWidth");
251339
fillJqObject['pic'] = $("#fill_input_lineColor_pic");
252340

253-
254341
// 点击弹出编辑框
255342
map.on('click', function (e) {
256343
var features = map.getFeaturesAtPixel(e.pixel);
@@ -266,6 +353,7 @@
266353
// 展示图层信息
267354
function showLayerInfo(layerInfo, jqObject) {
268355
var layerStyle = layerInfo.style;
356+
$('#layer_name').html(layerInfo.layerName);
269357
jqObject['id'].html(layerInfo.id);
270358
jqObject['lineColor'].val(layerStyle.lineColor);
271359
jqObject['lineOpacity'].val(layerStyle.lineOpacity);

0 commit comments

Comments
 (0)