Skip to content

Commit df5cb8f

Browse files
author
Judy Zhu
committed
merge
1 parent d3936a2 commit df5cb8f

File tree

4 files changed

+1222
-3494
lines changed

4 files changed

+1222
-3494
lines changed

‎example/data/light.json

+8-11
Original file line numberDiff line numberDiff line change
@@ -153,10 +153,7 @@
153153
}, {
154154
"id": "water",
155155
"filter": "layerName='water'",
156-
"style": [{
157-
"filter": "zoom>=0;zoom<=19;",
158-
"polygon-fill": "@water"
159-
}]
156+
"polygon-fill": "@water"
160157
}, {
161158
"id": "country_boundary",
162159
"filter": "layerName='admin_boundary';admin_level=2",
@@ -608,6 +605,8 @@
608605
}, {
609606
"id": "building",
610607
"filter": "layerName='building'",
608+
"polygon-fill": "@buildingFill"
609+
}, {
611610
"style": [{
612611
"filter": "zoom=14;class='hospital,hotel,castle,university,civic,stadium'",
613612
"polygon-fill": "@buildingFill"
@@ -3051,13 +3050,11 @@
30513050
"text-font": "13px Arial, Helvetica, sans-serif"
30523051
}]
30533052
}],
3054-
"sources": [
3055-
{
3056-
"id": "worldstreets_source_test",
3057-
"urls": ["https://cloud.thinkgeo.com/api/v1/maps/vector/streets/3857/{z}/{x}/{y}.pbf", "https://cloud2.thinkgeo.com/api/v1/maps/vector/streets/3857/{z}/{x}/{y}.pbf", "https://cloud.thinkgeo.com/api/v1/maps/vector/streets/3857/{z}/{x}/{y}.pbf", "https://cloud4.thinkgeo.com/api/v1/maps/vector/streets/3857/{z}/{x}/{y}.pbf", "https://cloud5.thinkgeo.com/api/v1/maps/vector/streets/3857/{z}/{x}/{y}.pbf", "https://cloud6.thinkgeo.com/api/v1/maps/vector/streets/3857/{z}/{x}/{y}.pbf"],
3058-
"type": "MVT"
3059-
}
3060-
],
3053+
"sources": [{
3054+
"id": "worldstreets_source_test",
3055+
"urls": ["https://cloud.thinkgeo.com/api/v1/maps/vector/streets/3857/{z}/{x}/{y}.pbf", "https://cloud2.thinkgeo.com/api/v1/maps/vector/streets/3857/{z}/{x}/{y}.pbf", "https://cloud.thinkgeo.com/api/v1/maps/vector/streets/3857/{z}/{x}/{y}.pbf", "https://cloud4.thinkgeo.com/api/v1/maps/vector/streets/3857/{z}/{x}/{y}.pbf", "https://cloud5.thinkgeo.com/api/v1/maps/vector/streets/3857/{z}/{x}/{y}.pbf", "https://cloud6.thinkgeo.com/api/v1/maps/vector/streets/3857/{z}/{x}/{y}.pbf"],
3056+
"type": "MVT"
3057+
}],
30613058
"layers": [{
30623059
"id": "worldstreets_layers",
30633060
"source": "worldstreets_source_test",

‎example/html/vue.html

+17-13
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
#lines label {
2323
display: inline-block;
24-
width: 82px;
24+
width: 90px;
2525
color: #5f6b78;
2626
text-align: right;
2727
margin: 12px 0;
@@ -101,22 +101,26 @@
101101
<body>
102102
<div id="map" style="width:100%;height:100%"></div>
103103
<div id="lines">
104-
<label>FontSize: </label>
104+
<label>POI Size: </label>
105+
<input type="number" v-model="poiSize">
106+
<br>
107+
<label>Font Size: </label>
105108
<input type="number" v-model="fontSize">
106109
<br>
107-
<label>Text: </label>
108-
<select v-model="fontFamily">
109-
<option value="Calibri">Calibri</option>
110-
<option value="sans-serif">Sans-Serif</option>
110+
<label>Water Color: </label>
111+
<select v-model="waterColor">
112+
<option value="#0000CD">#0000CD</option>
113+
<option value="#4169E1">#4169E1</option>
114+
<option value="#0000FF">#0000FF</option>
115+
<option value="#1E90FF">#1E90FF</option>
111116
</select>
112117
<br>
113-
<label>FillColor: </label>
114-
<input type="text" v-model="fillColor">
115-
<br>
116-
<label>Placement: </label>
117-
<select v-model="placement">
118-
<option value="line">Line</option>
119-
<option value="point">Point</option>
118+
<label>Road Color: </label>
119+
<select v-model="buildingColor">
120+
<option value="#FFD700">#FFD700</option>
121+
<option value="#EEC900">#EEC900</option>
122+
<option value="#CDAD00">#CDAD00</option>
123+
<option value="#8B7500">#8B7500</option>
120124
</select>
121125
<br>
122126
<div>

‎example/js/vue.js

+33-11
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ let map = new ol.Map({
1616
target: 'map',
1717
view: new ol.View({
1818
center: ol.proj.fromLonLat([-96.820787, 33.098294]),
19-
zoom: 17,
19+
zoom: 16,
2020
}),
2121
});
2222

@@ -44,26 +44,48 @@ let json
4444

4545
getJson().then((data) => {
4646
json = JSON.parse(data);
47-
console.log(json)
4847
})
4948

49+
const updatedWater = (poiSize, waterColor, fontSize, buildingColor) => {
50+
let styles = json.styles;
51+
let stylesLength = styles.length;
52+
for (let i = 0; i < stylesLength; i++) {
53+
if (styles[i].id === 'poi_icon') {
54+
styles[i]['point-size'] = poiSize;
55+
} else if (styles[i].id === 'water') {
56+
styles[i]['polygon-fill'] = waterColor
57+
} else if (styles[i].id === 'motorway_name') {
58+
styles[i]['text-font'] = `bold ${fontSize}px Arial, Helvetica, sans-serif`;
59+
} else if (styles[i].id === 'building') {
60+
styles[i]['polygon-fill'] = buildingColor;
61+
}
62+
}
63+
return json;
64+
}
65+
66+
const clickRefresh = (json) => {
67+
let layers = map.getLayers().getArray();
68+
map.removeLayer(layers[0]);
69+
let newLayer = new ol.mapsuite.VectorTileLayer(json, {
70+
'apiKey': 'v8pUXjjVgVSaUOhJCZENyNpdtN7_QnOooGkG0JxEdcI~'
71+
});
72+
map.addLayer(newLayer);
73+
}
74+
5075

5176

5277
new Vue({
5378
el: '#lines',
5479
data: {
55-
fontSize: 12,
56-
fontFamily: 'Calibri',
57-
fillColor: '#525255',
58-
placement: 'line'
80+
poiSize: 50,
81+
fontSize: 40,
82+
waterColor: '#0000CD',
83+
buildingColor: '#FFD700'
5984
},
6085
methods: {
6186
refresh: function () {
62-
let text = blockMapStyle.getText();
63-
text.setFont(`${this.fontSize}px ${this.fontFamily},sans-serif`);
64-
text.getFill().setColor(this.fillColor);
65-
text.setPlacement(this.placement);
66-
blockMapLayer.setStyle(blockMapStyle);
87+
let json = updatedWater(this.poiSize, this.waterColor, this.fontSize, this.buildingColor);
88+
clickRefresh(json)
6789
}
6890
}
6991
})

0 commit comments

Comments
 (0)