1 | goog.require('ol.Feature');
|
2 | goog.require('ol.Map');
|
3 | goog.require('ol.View');
|
4 | goog.require('ol.geom.Point');
|
5 | goog.require('ol.interaction.Select');
|
6 | goog.require('ol.layer.Tile');
|
7 | goog.require('ol.layer.Vector');
|
8 | goog.require('ol.source.Stamen');
|
9 | goog.require('ol.source.Vector');
|
10 | goog.require('ol.style.Icon');
|
11 | goog.require('ol.style.Style');
|
12 |
|
13 |
|
14 | function createStyle(src, img) {
|
15 | return new ol.style.Style({
|
16 | image: new ol.style.Icon( ({
|
17 | anchor: [0.5, 0.96],
|
18 | crossOrigin: 'anonymous',
|
19 | src: src,
|
20 | img: img,
|
21 | imgSize: img ? [img.width, img.height] : undefined
|
22 | }))
|
23 | });
|
24 | }
|
25 |
|
26 | var iconFeature = new ol.Feature(new ol.geom.Point([0, 0]));
|
27 | iconFeature.set('style', createStyle('data/icon.png', undefined));
|
28 |
|
29 | var map = new ol.Map({
|
30 | layers: [
|
31 | new ol.layer.Tile({
|
32 | source: new ol.source.Stamen({layer: 'watercolor'})
|
33 | }),
|
34 | new ol.layer.Vector({
|
35 | style: function(feature) {
|
36 | return feature.get('style');
|
37 | },
|
38 | source: new ol.source.Vector({features: [iconFeature]})
|
39 | })
|
40 | ],
|
41 | target: document.getElementById('map'),
|
42 | view: new ol.View({
|
43 | center: [0, 0],
|
44 | zoom: 3
|
45 | })
|
46 | });
|
47 |
|
48 | var selectStyle = {};
|
49 | var select = new ol.interaction.Select({
|
50 | style: function(feature) {
|
51 | var image = feature.get('style').getImage().getImage();
|
52 | if (!selectStyle[image.src]) {
|
53 | var canvas = document.createElement('canvas');
|
54 | var context = canvas.getContext('2d');
|
55 | canvas.width = image.width;
|
56 | canvas.height = image.height;
|
57 | context.drawImage(image, 0, 0, image.width, image.height);
|
58 | var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
|
59 | var data = imageData.data;
|
60 | for (var i = 0, ii = data.length; i < ii; i = i + (i % 4 == 2 ? 2 : 1)) {
|
61 | data[i] = 255 - data[i];
|
62 | }
|
63 | context.putImageData(imageData, 0, 0);
|
64 | selectStyle[image.src] = createStyle(undefined, canvas);
|
65 | }
|
66 | return selectStyle[image.src];
|
67 | }
|
68 | });
|
69 | map.addInteraction(select);
|
70 |
|
71 | map.on('pointermove', function(evt) {
|
72 | map.getTargetElement().style.cursor =
|
73 | map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
|
74 | });
|