mirror of
https://github.com/mapgears/ol3-google-maps.git
synced 2026-01-25 16:50:49 +00:00
782fe2d040
When a feature geometry changes, update its label as well. This PR also includes minor changes to enhance the performance of rendering a label.
360 lines
7.9 KiB
JavaScript
360 lines
7.9 KiB
JavaScript
/**
|
|
* Define a namespace for the application.
|
|
*/
|
|
window.app = {};
|
|
var app = window.app;
|
|
|
|
|
|
|
|
/**
|
|
* @constructor
|
|
* @extends {ol.interaction.Pointer}
|
|
*/
|
|
app.Drag = function() {
|
|
|
|
ol.interaction.Pointer.call(this, {
|
|
handleDownEvent: app.Drag.prototype.handleDownEvent,
|
|
handleDragEvent: app.Drag.prototype.handleDragEvent,
|
|
handleMoveEvent: app.Drag.prototype.handleMoveEvent,
|
|
handleUpEvent: app.Drag.prototype.handleUpEvent
|
|
});
|
|
|
|
/**
|
|
* @type {ol.Pixel}
|
|
* @private
|
|
*/
|
|
this.coordinate_ = null;
|
|
|
|
/**
|
|
* @type {string|undefined}
|
|
* @private
|
|
*/
|
|
this.cursor_ = 'pointer';
|
|
|
|
/**
|
|
* @type {ol.Feature}
|
|
* @private
|
|
*/
|
|
this.feature_ = null;
|
|
|
|
/**
|
|
* @type {string|undefined}
|
|
* @private
|
|
*/
|
|
this.previousCursor_ = undefined;
|
|
|
|
};
|
|
ol.inherits(app.Drag, ol.interaction.Pointer);
|
|
|
|
|
|
/**
|
|
* @param {ol.MapBrowserEvent} evt Map browser event.
|
|
* @return {boolean} `true` to start the drag sequence.
|
|
*/
|
|
app.Drag.prototype.handleDownEvent = function(evt) {
|
|
var map = evt.map;
|
|
|
|
var feature = map.forEachFeatureAtPixel(evt.pixel,
|
|
function(feature, layer) {
|
|
return feature;
|
|
});
|
|
|
|
if (feature) {
|
|
this.coordinate_ = evt.coordinate;
|
|
this.feature_ = feature;
|
|
}
|
|
|
|
return !!feature;
|
|
};
|
|
|
|
|
|
/**
|
|
* @param {ol.MapBrowserEvent} evt Map browser event.
|
|
*/
|
|
app.Drag.prototype.handleDragEvent = function(evt) {
|
|
var map = evt.map;
|
|
|
|
var feature = map.forEachFeatureAtPixel(evt.pixel,
|
|
function(feature, layer) {
|
|
return feature;
|
|
});
|
|
|
|
var deltaX = evt.coordinate[0] - this.coordinate_[0];
|
|
var deltaY = evt.coordinate[1] - this.coordinate_[1];
|
|
|
|
var geometry = /** @type {ol.geom.SimpleGeometry} */
|
|
(this.feature_.getGeometry());
|
|
geometry.translate(deltaX, deltaY);
|
|
|
|
this.coordinate_[0] = evt.coordinate[0];
|
|
this.coordinate_[1] = evt.coordinate[1];
|
|
};
|
|
|
|
|
|
/**
|
|
* @param {ol.MapBrowserEvent} evt Event.
|
|
*/
|
|
app.Drag.prototype.handleMoveEvent = function(evt) {
|
|
if (this.cursor_) {
|
|
var map = evt.map;
|
|
var feature = map.forEachFeatureAtPixel(evt.pixel,
|
|
function(feature, layer) {
|
|
return feature;
|
|
});
|
|
var element = evt.map.getTargetElement();
|
|
if (feature) {
|
|
if (element.style.cursor != this.cursor_) {
|
|
this.previousCursor_ = element.style.cursor;
|
|
element.style.cursor = this.cursor_;
|
|
}
|
|
} else if (this.previousCursor_ !== undefined) {
|
|
element.style.cursor = this.previousCursor_;
|
|
this.previousCursor_ = undefined;
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* @param {ol.MapBrowserEvent} evt Map browser event.
|
|
* @return {boolean} `false` to stop the drag sequence.
|
|
*/
|
|
app.Drag.prototype.handleUpEvent = function(evt) {
|
|
this.coordinate_ = null;
|
|
this.feature_ = null;
|
|
return false;
|
|
};
|
|
|
|
|
|
var lat = 50;
|
|
var lng = -70;
|
|
var zoom = 5;
|
|
//var extent = [-83, 44, -57, 55];
|
|
var extent = [-9259955, 5467881, -6324773, 7424669];
|
|
|
|
var osmLayer = new ol.layer.Tile({
|
|
source: new ol.source.OSM(),
|
|
visible: false
|
|
});
|
|
|
|
var map = new ol.Map({
|
|
// use OL3-Google-Maps recommended default interactions
|
|
interactions: olgm.interaction.defaults().extend([
|
|
new app.Drag()
|
|
]),
|
|
layers: [
|
|
osmLayer,
|
|
new olgm.layer.Google()
|
|
],
|
|
target: 'map',
|
|
view: new ol.View({
|
|
center: ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:3857'),
|
|
zoom: zoom
|
|
})
|
|
});
|
|
|
|
// FIXME - style override, this should be managed internally
|
|
/*
|
|
gmap.data.setStyle({
|
|
icon: 'resources/evouala.png'
|
|
});
|
|
*/
|
|
|
|
|
|
var vector = new ol.layer.Vector({
|
|
source: new ol.source.Vector()
|
|
});
|
|
map.addLayer(vector);
|
|
|
|
var generateCoordinate = function() {
|
|
var extent = [-9259955, 5467881, -6324773, 7424669];
|
|
var deltaX = extent[2] - extent[0];
|
|
var deltaY = extent[3] - extent[1];
|
|
return [
|
|
extent[0] + (deltaX * Math.random()),
|
|
extent[1] + (deltaY * Math.random())
|
|
];
|
|
};
|
|
|
|
var generatePointFeature = function() {
|
|
return new ol.Feature(
|
|
new ol.geom.Point(generateCoordinate())
|
|
);
|
|
};
|
|
|
|
var generateLineFeature = function() {
|
|
var coordinates = [];
|
|
for (var i = 0, len = 3; i < len; i++) {
|
|
coordinates.push(generateCoordinate());
|
|
}
|
|
return new ol.Feature(
|
|
new ol.geom.LineString(coordinates)
|
|
);
|
|
};
|
|
|
|
var addPointFeatures = function(len, opt_style) {
|
|
var feature;
|
|
for (var i = 0; i < len; i++) {
|
|
feature = generatePointFeature();
|
|
if (opt_style) {
|
|
feature.setStyle(opt_style);
|
|
}
|
|
vector.getSource().addFeature(feature);
|
|
}
|
|
};
|
|
|
|
var addMarkerFeatures = function(len) {
|
|
addPointFeatures(len, new ol.style.Style({
|
|
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
|
|
anchor: [0.5, 46],
|
|
anchorXUnits: 'fraction',
|
|
anchorYUnits: 'pixels',
|
|
opacity: 0.75,
|
|
src: 'data/icon.png'
|
|
}))
|
|
}));
|
|
};
|
|
|
|
var addCircleFeatures = function(len) {
|
|
addPointFeatures(len, new ol.style.Style({
|
|
image: new ol.style.Circle({
|
|
'fill': new ol.style.Fill({color: 'rgba(153,51,51,0.3)'}),
|
|
'stroke': new ol.style.Stroke({color: 'rgb(153,51,51)', width: 2}),
|
|
'radius': 20
|
|
})
|
|
}));
|
|
};
|
|
|
|
var addLineFeatures = function(len, opt_style) {
|
|
var feature;
|
|
for (var i = 0; i < len; i++) {
|
|
feature = generateLineFeature();
|
|
if (opt_style) {
|
|
feature.setStyle(opt_style);
|
|
}
|
|
vector.getSource().addFeature(feature);
|
|
}
|
|
};
|
|
|
|
|
|
addPointFeatures(3);
|
|
addPointFeatures(3, new ol.style.Style({
|
|
image: new ol.style.Circle({
|
|
'fill': new ol.style.Fill({color: '#3F5D7D'}),
|
|
'stroke': new ol.style.Stroke({color: 'rgb(30,30,30)', width: 2}),
|
|
'radius': 20
|
|
}),
|
|
text: new ol.style.Text({
|
|
font: 'normal 16pt Arial',
|
|
text: '42',
|
|
fill: new ol.style.Fill({color: 'black'}),
|
|
stroke: new ol.style.Stroke({color: 'white', width: 3})
|
|
})
|
|
}));
|
|
addMarkerFeatures(3);
|
|
addCircleFeatures(3);
|
|
addLineFeatures(1);
|
|
// line with custom style
|
|
addLineFeatures(1, new ol.style.Style({
|
|
stroke: new ol.style.Stroke({
|
|
width: 4,
|
|
color: '#CC3333'
|
|
})
|
|
}));
|
|
// add polygon feature
|
|
vector.getSource().addFeature(new ol.Feature(
|
|
new ol.geom.Polygon.fromExtent([-8259955, 6067881, -7324773, 6524669])
|
|
));
|
|
// add polygon feature with custom style
|
|
var poly2 = new ol.Feature(
|
|
new ol.geom.Polygon.fromExtent([-8159955, 6167881, -7124773, 6724669])
|
|
);
|
|
poly2.setStyle(new ol.style.Style({
|
|
fill: new ol.style.Stroke({
|
|
color: 'rgba(63,93,125,0.4)'
|
|
}),
|
|
stroke: new ol.style.Stroke({
|
|
width: 4,
|
|
color: 'rgba(63,93,125,0.8)'
|
|
})
|
|
}));
|
|
vector.getSource().addFeature(poly2);
|
|
|
|
|
|
var olGM = new olgm.OLGoogleMaps({map: map});
|
|
olGM.activate();
|
|
|
|
document.getElementById('toggle').onclick = function() {
|
|
olGM.toggle();
|
|
};
|
|
|
|
document.getElementById('add-point').onclick = function() {
|
|
addMarkerFeatures(3);
|
|
};
|
|
|
|
document.getElementById('clear-point').onclick = function() {
|
|
vector.getSource().clear();
|
|
};
|
|
|
|
|
|
var toggleOsmLayer = function(opt_visible) {
|
|
var visible = opt_visible !== undefined ? opt_visible :
|
|
!osmLayer.getVisible();
|
|
osmLayer.setVisible(visible);
|
|
};
|
|
|
|
document.getElementById('toggle-osm').onclick = function() {
|
|
toggleOsmLayer();
|
|
};
|
|
|
|
document.getElementById('gm-rm-last').onclick = function() {
|
|
var found = null;
|
|
var layers = map.getLayers();
|
|
|
|
// remove last one
|
|
layers.getArray().slice(0).reverse().every(function(layer) {
|
|
if (layer instanceof olgm.layer.Google) {
|
|
found = layer;
|
|
return false;
|
|
}
|
|
return true;
|
|
}, this);
|
|
if (found) {
|
|
layers.remove(found);
|
|
}
|
|
|
|
};
|
|
|
|
|
|
document.getElementById('gm-add-sat').onclick = function() {
|
|
map.getLayers().push(new olgm.layer.Google({
|
|
mapTypeId: google.maps.MapTypeId.SATELLITE
|
|
}));
|
|
};
|
|
|
|
|
|
document.getElementById('gm-add-ter').onclick = function() {
|
|
map.getLayers().push(new olgm.layer.Google({
|
|
mapTypeId: google.maps.MapTypeId.TERRAIN
|
|
}));
|
|
};
|
|
|
|
|
|
document.getElementById('gm-toggle-last').onclick = function() {
|
|
var found = null;
|
|
var layers = map.getLayers();
|
|
|
|
// remove last one
|
|
layers.getArray().slice(0).reverse().every(function(layer) {
|
|
if (layer instanceof olgm.layer.Google) {
|
|
found = layer;
|
|
return false;
|
|
}
|
|
return true;
|
|
}, this);
|
|
|
|
if (found) {
|
|
found.setVisible(!found.getVisible());
|
|
}
|
|
};
|