1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.extent');
|
4 | goog.require('ol.format.GeoJSON');
|
5 | goog.require('ol.has');
|
6 | goog.require('ol.layer.Vector');
|
7 | goog.require('ol.proj');
|
8 | goog.require('ol.source.Vector');
|
9 | goog.require('ol.style.Fill');
|
10 | goog.require('ol.style.Stroke');
|
11 | goog.require('ol.style.Style');
|
12 |
|
13 | var canvas = document.createElement('canvas');
|
14 | var context = canvas.getContext('2d');
|
15 |
|
16 |
|
17 |
|
18 | var pixelRatio = ol.has.DEVICE_PIXEL_RATIO;
|
19 |
|
20 |
|
21 | function gradient(feature, resolution) {
|
22 | var extent = feature.getGeometry().getExtent();
|
23 |
|
24 |
|
25 |
|
26 |
|
27 | var grad = context.createLinearGradient(0, 0,
|
28 | ol.extent.getWidth(extent) / resolution * pixelRatio, 0);
|
29 | grad.addColorStop(0, 'red');
|
30 | grad.addColorStop(1 / 6, 'orange');
|
31 | grad.addColorStop(2 / 6, 'yellow');
|
32 | grad.addColorStop(3 / 6, 'green');
|
33 | grad.addColorStop(4 / 6, 'aqua');
|
34 | grad.addColorStop(5 / 6, 'blue');
|
35 | grad.addColorStop(1, 'purple');
|
36 | return grad;
|
37 | }
|
38 |
|
39 |
|
40 | var pattern = (function() {
|
41 | canvas.width = 11 * pixelRatio;
|
42 | canvas.height = 11 * pixelRatio;
|
43 |
|
44 | context.fillStyle = 'white';
|
45 | context.fillRect(0, 0, canvas.width, canvas.height);
|
46 |
|
47 | context.fillStyle = 'rgba(102, 0, 102, 0.5)';
|
48 | context.beginPath();
|
49 | context.arc(5 * pixelRatio, 5 * pixelRatio, 4 * pixelRatio, 0, 2 * Math.PI);
|
50 | context.fill();
|
51 |
|
52 | context.fillStyle = 'rgb(55, 0, 170)';
|
53 | context.beginPath();
|
54 | context.arc(5 * pixelRatio, 5 * pixelRatio, 2 * pixelRatio, 0, 2 * Math.PI);
|
55 | context.fill();
|
56 | return context.createPattern(canvas, 'repeat');
|
57 | }());
|
58 |
|
59 |
|
60 | var fill = new ol.style.Fill();
|
61 | var style = new ol.style.Style({
|
62 | fill: fill,
|
63 | stroke: new ol.style.Stroke({
|
64 | color: '#333',
|
65 | width: 2
|
66 | })
|
67 | });
|
68 |
|
69 |
|
70 |
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 | var getStackedStyle = function(feature, resolution) {
|
78 | var id = feature.getId();
|
79 | fill.setColor(id > 'J' ? gradient(feature, resolution) : pattern);
|
80 | return style;
|
81 | };
|
82 |
|
83 |
|
84 | var vectorLayer = new ol.layer.Vector({
|
85 | source: new ol.source.Vector({
|
86 | url: 'data/geojson/countries.geojson',
|
87 | format: new ol.format.GeoJSON()
|
88 | }),
|
89 | style: getStackedStyle
|
90 | });
|
91 |
|
92 |
|
93 | var map = new ol.Map({
|
94 | layers: [
|
95 | vectorLayer
|
96 | ],
|
97 | target: 'map',
|
98 | view: new ol.View({
|
99 | center: ol.proj.fromLonLat([7, 52]),
|
100 | zoom: 3
|
101 | })
|
102 | });
|