Here is my fiddle, which is exact copy of Openlayers 3 measure example.
What am I doing wrong when my fiddle isn't working? I can't see the blue dot to start measuring my path or area (same problem like in my localhost environment project)…
[GIS] OpenLayers 3 measure example
html5javascriptMeasurementsopenlayersopenlayers-2
Related Solutions
It ends up that it was all a projection problem. When I created the map object, I just needed to specify the projections, and then my MBTiles layer was positioned correctly.
var options = {
projection: "EPSG:900913",
displayProjection: new OpenLayers.Projection("EPSG:4326")
};
map = new OpenLayers.Map('map', options);
var layer = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'}
);
map.addLayer(layer);
Here's an example that accomplishes what you want (I think): http://jsfiddle.net/tschaub/Lkgx0qaa/
I've created a map with three layers, only the first one (named roads) is visible:
var roads = new ol.layer.Tile({
source: new ol.source.BingMaps({key: key, imagerySet: 'Road'})
});
var clipped = {
imagery: new ol.layer.Tile({
source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'}),
visible: false
}),
labeled: new ol.layer.Tile({
source: new ol.source.BingMaps({key: key, imagerySet: 'AerialWithLabels'}),
visible: false
})
};
var map = new ol.Map({
layers: [roads, clipped.imagery, clipped.labeled],
target: 'map',
view: new ol.View({
center: ol.proj.transform([-109, 46.5], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});
The imagery and labeled layers are going to be toggled on/off with radio inputs. When a radio input is checked, the layer is made visible (with layer.setVisible(true)), and listeners are registered for precompose and postcompse events (with layer.on(...)).
In addition, any previously chosen layer will be made invisible (with layer.setVisible(false)), and listeners will be unregistered (with layer.un(...)).
The function that handles this radio change event looks like this:
var chosen;
function onRadioChange(event) {
if (chosen) {
chosen.un('precompose', onPreCompose);
chosen.un('postcompose', onPostCompose);
chosen.setVisible(false);
}
chosen = clipped[event.target.value];
chosen.on('precompose', onPreCompose);
chosen.on('postcompose', onPostCompose);
chosen.setVisible(true);
}
That's really the meat of the solution. The rest pretty much follows the hosted layer-spy.html example.
For completeness, I'll dump the rest below.
// get the pixel position with every move
var mousePosition = null;
map.on('pointermove', function(event) {
mousePosition = event.pixel
map.render();
});
// before rendering the layer, do some clipping
function onPreCompose(event) {
var ctx = event.context;
var pixelRatio = event.frameState.pixelRatio;
ctx.save();
ctx.beginPath();
if (mousePosition) {
// only show a circle around the mouse
ctx.arc(mousePosition[0] * pixelRatio, mousePosition[1] * pixelRatio,
75 * pixelRatio, 0, 2 * Math.PI);
ctx.lineWidth = 5 * pixelRatio;
ctx.strokeStyle = 'rgba(0,0,0,0.5)';
ctx.stroke();
}
ctx.clip();
}
// after rendering the layer, restore the canvas context
function onPostCompose(event) {
var ctx = event.context;
ctx.restore();
}
// listen for change events on radio inputs
var inputs = document.querySelectorAll('input[type="radio"]');
for (var i = 0, ii = inputs.length; i < ii; ++i) {
inputs[i].addEventListener('change', onRadioChange);
}
// kick things off with the first checked radio input
onRadioChange({target: document.querySelector('input[type="radio"]:checked')});
Best Answer
http://jsfiddle.net/a6pp9vwz/9/ working for me.
Console log said "
$not defined".$is a jQuery class, so you need a jQuery environment to enable AJAX requests. You can enable jQuery in JSFiddle in the "Frameworks & Extensions" tab.