ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update wmts-hidpi, add nicer-api-docs

Browse Source
This commit is contained in:
Andreas Hocevar
2014-05-06 13:02:46 -05:00
parent b3ac1afd00
commit 1e25fc5585
2239 changed files with 3726515 additions and 37010 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wmts-hidpi/examples/animation.html
+1
View File
@@ -32,6 +32,7 @@
<div class="span12">
<button id="rotate-left"><i class="icon-arrow-left"></i></button>
<button id="rotate-right"><i class="icon-arrow-right"></i></button>
<button id="rotate-around-rome">Rotate around Rome</button>
<button id="pan-to-london">Pan to London</button>
<button id="elastic-to-moscow">Elastic to Moscow</button>
<button id="bounce-to-istanbul">Bounce to Istanbul</button>
wmts-hidpi/examples/animation.js
+11
View File
@@ -40,6 +40,17 @@ rotateRight.addEventListener('click', function() {
map.beforeRender(rotateRight);
}, false);
var rotateAroundRome = document.getElementById('rotate-around-rome');
rotateAroundRome.addEventListener('click', function() {
var currentRotation = view.getRotation();
var rotateAroundRome = ol.animation.rotate({
anchor: rome,
duration: 1000,
rotation: currentRotation
});
map.beforeRender(rotateAroundRome);
view.rotate(currentRotation + (Math.PI / 2), rome);
}, false);
var panToLondon = document.getElementById('pan-to-london');
panToLondon.addEventListener('click', function() {
wmts-hidpi/examples/bind-input.html
+7 -4
View File
@@ -35,6 +35,7 @@
<p id="shortdesc">Demonstrates two-way binding of HTML input elements to OpenLayers objects.</p>
<div id="docs">
<p>See the <a href="bind-input.js" target="_blank">bind-input.js source</a> to see how this is done.</p>
<p id="has-webgl" style="display: none">With the <a href="?renderer=webgl">WebGL renderer</a>, <strong>hue</strong>, <strong>saturation</strong>, <strong>contrast</strong> and <strong>brightness</strong> can also be controlled.</p>
<div id="no-webgl" class="alert alert-warning" style="display: none">
<h4>Warning!</h4>
A browser that supports <a href="http://get.webgl.org/">WebGL</a> is required to change the
@@ -53,14 +54,16 @@
</label>
<label>opacity</label>
<input id="opacity" type="range" min="0" max="1" step="0.01"/>
</fieldset>
<fieldset id="webgl" style="display: none">
<label>hue</label>
<input id="hue" class="webgl" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
<input id="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
<label>saturation</label>
<input id="saturation" class="webgl" type="range" min="0" max="5" step="0.01"/>
<input id="saturation" type="range" min="0" max="5" step="0.01"/>
<label>contrast</label>
<input id="contrast" class="webgl" type="range" min="0" max="2" step="0.01"/>
<input id="contrast" type="range" min="0" max="2" step="0.01"/>
<label>brightness</label>
<input id="brightness" class="webgl" type="range" min="-1" max="1" step="0.01"/>
<input id="brightness" type="range" min="-1" max="1" step="0.01"/>
</fieldset>
</form>
</div>
wmts-hidpi/examples/bind-input.js
+8 -10
View File
@@ -1,18 +1,16 @@
if (!ol.BrowserFeature.HAS_WEBGL) {
var inputs = document.getElementsByClassName('webgl');
for (var i = 0, len = inputs.length; i < len; i++) {
inputs[i].disabled = true;
}
var info = document.getElementById('no-webgl');
/**
* display warning message
*/
info.style.display = '';
function checkWebGL(evt) {
document.getElementById('no-webgl').style.display =
ol.BrowserFeature.HAS_WEBGL ? 'none' : '';
document.getElementById('has-webgl').style.display =
ol.BrowserFeature.HAS_WEBGL && !evt.glContext ? '' : 'none';
document.getElementById('webgl').style.display =
evt.glContext ? '' : 'none';
}
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
layer.once('precompose', checkWebGL);
var view = new ol.View2D({
center: [0, 0],
wmts-hidpi/examples/center.js
-1
View File
@@ -36,7 +36,6 @@ var map = new ol.Map({
}),
vectorLayer
],
renderer: 'canvas',
target: 'map',
view: view
});
wmts-hidpi/examples/d3.js
Vendored
-1
View File
@@ -6,7 +6,6 @@ var map = new ol.Map({
})
})
],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: ol.proj.transform([-97, 38], 'EPSG:4326', 'EPSG:3857'),
wmts-hidpi/examples/drag-and-drop-image-vector.html
+1 -1
View File
@@ -32,7 +32,7 @@
<div class="span4">
<h4 id="title">Drag-and-Drop image vector example</h4>
<p id="shortdesc">Example of using the drag-and-drop interaction with a <code>ol.source.ImageVector</code>. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.</p>
<p id="shortdesc">Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.</p>
<div id="docs">
<p>See the <a href="drag-and-drop-image-vector.js" target="_blank">drag-and-drop-image-vector.js source</a> to see how this is done.</p>
</div>
wmts-hidpi/examples/drag-and-drop-image-vector.js
+1 -1
View File
@@ -129,6 +129,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
displayFeatureInfo(pixel);
});
map.on('singleclick', function(evt) {
map.on('click', function(evt) {
displayFeatureInfo(evt.pixel);
});
wmts-hidpi/examples/drag-and-drop.js
+1 -2
View File
@@ -84,7 +84,6 @@ var map = new ol.Map({
})
})
],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [0, 0],
@@ -127,6 +126,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
displayFeatureInfo(pixel);
});
map.on('singleclick', function(evt) {
map.on('click', function(evt) {
displayFeatureInfo(evt.pixel);
});
wmts-hidpi/examples/draw-features.html
+1 -1
View File
@@ -32,7 +32,7 @@
<div class="span12">
<h4 id="title">Draw features example</h4>
<p id="shortdesc">Example of using the <code>ol.interaction.Draw</code> interaction.</p>
<p id="shortdesc">Example of using the ol.interaction.Draw interaction.</p>
<form class="form-inline">
<label>Geometry type &nbsp;</label>
<select id="type">
wmts-hidpi/examples/draw-features.js
-1
View File
@@ -25,7 +25,6 @@ var vector = new ol.layer.Vector({
var map = new ol.Map({
layers: [raster, vector],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [-11000000, 4600000],
wmts-hidpi/examples/dynamic-data.js
-1
View File
@@ -4,7 +4,6 @@ var map = new ol.Map({
source: new ol.source.MapQuest({layer: 'sat'})
})
],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [0, 0],
wmts-hidpi/examples/epsg-4326.js
-2
View File
@@ -18,8 +18,6 @@ var map = new ol.Map({
})
]),
layers: layers,
// The OSgeo server does not set cross origin headers, so we cannot use WebGL
renderer: ['canvas', 'dom'],
target: 'map',
view: new ol.View2D({
projection: 'EPSG:4326',
wmts-hidpi/examples/example-list.js
+1 -1
View File
File diff suppressed because one or more lines are too long
wmts-hidpi/examples/example-list.xml
+1 -1
View File
File diff suppressed because one or more lines are too long
wmts-hidpi/examples/export-map.js
-1
View File
@@ -4,7 +4,6 @@ var map = new ol.Map({
source: new ol.source.OSM()
})
],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [0, 0],
wmts-hidpi/examples/fractal.js
-1
View File
@@ -18,7 +18,6 @@ var layer = new ol.layer.Vector({
var map = new ol.Map({
layers: [layer],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [0, 0],
wmts-hidpi/examples/full-screen-drag-rotate-and-zoom.js
-1
View File
@@ -14,7 +14,6 @@ var map = new ol.Map({
})
],
// Use the canvas renderer because it's currently the fastest
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [-33519607, 5616436],
wmts-hidpi/examples/full-screen.html
+3
View File
@@ -21,6 +21,9 @@
.map:full-screen {
height: 100%;
}
.ol-rotate {
top: 3em;
}
</style>
<title>Full screen control example</title>
</head>
wmts-hidpi/examples/geojson.js
-1
View File
@@ -173,7 +173,6 @@ var map = new ol.Map({
}),
vectorLayer
],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [0, 0],
wmts-hidpi/examples/geolocation.js
-1
View File
@@ -9,7 +9,6 @@ var map = new ol.Map({
source: new ol.source.OSM()
})
],
renderer: 'canvas',
target: 'map',
view: view
});
wmts-hidpi/examples/getfeatureinfo.js
-1
View File
@@ -17,7 +17,6 @@ var viewProjection = /** @type {ol.proj.Projection} */
var map = new ol.Map({
layers: [wmsLayer],
renderer: 'canvas',
target: 'map',
view: view
});
wmts-hidpi/examples/google-map.js
-1
View File
@@ -40,7 +40,6 @@ var map = new ol.Map({
pan: false,
rotate: false
}).extend([new ol.interaction.DragPan({kinetic: false})]),
renderer: 'canvas',
target: olMapDiv,
view: view
});
wmts-hidpi/examples/gpx.js
+1 -2
View File
@@ -44,7 +44,6 @@ var vector = new ol.layer.Vector({
var map = new ol.Map({
layers: [raster, vector],
renderer: 'canvas',
target: document.getElementById('map'),
view: new ol.View2D({
center: [-7916041.528716288, 5228379.045749711],
@@ -76,6 +75,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
displayFeatureInfo(pixel);
});
map.on('singleclick', function(evt) {
map.on('click', function(evt) {
displayFeatureInfo(evt.pixel);
});
wmts-hidpi/examples/heatmap-earthquakes.js
-1
View File
@@ -23,7 +23,6 @@ var raster = new ol.layer.Tile({
var map = new ol.Map({
layers: [raster, vector],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [0, 0],
wmts-hidpi/examples/icon.js
+1 -2
View File
@@ -33,7 +33,6 @@ var rasterLayer = new ol.layer.Tile({
var map = new ol.Map({
layers: [rasterLayer, vectorLayer],
renderer: 'canvas',
target: document.getElementById('map'),
view: new ol.View2D({
center: [0, 0],
@@ -51,7 +50,7 @@ var popup = new ol.Overlay({
map.addOverlay(popup);
// display popup on click
map.on('singleclick', function(evt) {
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
wmts-hidpi/examples/igc.html
+2 -1
View File
@@ -32,8 +32,9 @@
<div class="span4">
<h4 id="title">IGC example</h4>
<p id="shortdesc">Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file. The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from <a href="http://www.opencyclemap.org/">OpenCycleMap</a>.</p>
<p id="shortdesc">Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file.</p>
<div id="docs">
<p>The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from <a href="http://www.opencyclemap.org/">OpenCycleMap</a>.</p>
<p>See the <a href="igc.js" target="_blank">igc.js source</a> to see how this is done.</p>
</div>
<input id="time" type="range" value="0" steps="1"></input>
wmts-hidpi/examples/igc.js
+1 -2
View File
@@ -65,7 +65,6 @@ var map = new ol.Map({
style: styleFunction
})
],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [703365.7089403362, 5714629.865071137],
@@ -109,7 +108,7 @@ $(map.getViewport()).on('mousemove', function(evt) {
displaySnap(coordinate);
});
map.on('singleclick', function(evt) {
map.on('click', function(evt) {
displaySnap(evt.coordinate);
});
wmts-hidpi/examples/image-filter.js
-1
View File
@@ -6,7 +6,6 @@ var imagery = new ol.layer.Tile({
var map = new ol.Map({
layers: [imagery],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: ol.proj.transform([-120, 50], 'EPSG:4326', 'EPSG:3857'),
wmts-hidpi/examples/image-vector-layer.js
+1 -2
View File
@@ -21,7 +21,6 @@ var map = new ol.Map({
})
})
],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [0, 0],
@@ -73,6 +72,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
displayFeatureInfo(pixel);
});
map.on('singleclick', function(evt) {
map.on('click', function(evt) {
displayFeatureInfo(evt.pixel);
});
wmts-hidpi/examples/kml-earthquakes.js
+1 -2
View File
@@ -41,7 +41,6 @@ var raster = new ol.layer.Tile({
var map = new ol.Map({
layers: [raster, vector],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [0, 0],
@@ -77,6 +76,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
displayFeatureInfo(map.getEventPixel(evt.originalEvent));
});
map.on('singleclick', function(evt) {
map.on('click', function(evt) {
displayFeatureInfo(evt.pixel);
});
wmts-hidpi/examples/kml-timezones.js
+1 -2
View File
@@ -49,7 +49,6 @@ var raster = new ol.layer.Tile({
var map = new ol.Map({
layers: [raster, vector],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [0, 0],
@@ -85,6 +84,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
displayFeatureInfo(map.getEventPixel(evt.originalEvent));
});
map.on('singleclick', function(evt) {
map.on('click', function(evt) {
displayFeatureInfo(evt.pixel);
});
wmts-hidpi/examples/kml.js
+1 -2
View File
@@ -14,7 +14,6 @@ var vector = new ol.layer.Vector({
var map = new ol.Map({
layers: [raster, vector],
renderer: 'canvas',
target: document.getElementById('map'),
view: new ol.View2D({
center: [876970.8463461736, 5859807.853963373],
@@ -46,6 +45,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
displayFeatureInfo(pixel);
});
map.on('singleclick', function(evt) {
map.on('click', function(evt) {
displayFeatureInfo(evt.pixel);
});
wmts-hidpi/examples/layer-clipping.js
-1
View File
@@ -4,7 +4,6 @@ var osm = new ol.layer.Tile({
var map = new ol.Map({
layers: [osm],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [0, 0],
wmts-hidpi/examples/layer-spy.js
-1
View File
@@ -10,7 +10,6 @@ var imagery = new ol.layer.Tile({
var map = new ol.Map({
layers: [roads, imagery],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: ol.proj.transform([-109, 46.5], 'EPSG:4326', 'EPSG:3857'),
wmts-hidpi/examples/layer-swipe.js
-1
View File
@@ -10,7 +10,6 @@ var bing = new ol.layer.Tile({
var map = new ol.Map({
layers: [osm, bing],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [0, 0],
wmts-hidpi/examples/localized-openstreetmap.html
+2 -1
View File
@@ -32,8 +32,9 @@
<div class="span12">
<h4 id="title">Localized OpenStreetMap example</h4>
<p id="shortdesc">Example of a localized OpenStreetMap map with a custom tile server and a custom attribution. The base layer is <a href="http://www.opencyclemap.org/">OpenCycleMap</a> with an overlay from <a href="http://www.openseamap.org/">OpenSeaMap</a>. The OpenSeaMap tile server does not support <a href="http://enable-cors.org/">CORS</a> headers.</p>
<p id="shortdesc">Example of a localized OpenStreetMap map with a custom tile server and a custom attribution.</p>
<div id="docs">
<p>The base layer is <a href="http://www.opencyclemap.org/">OpenCycleMap</a> with an overlay from <a href="http://www.openseamap.org/">OpenSeaMap</a>. The OpenSeaMap tile server does not support <a href="http://enable-cors.org/">CORS</a> headers.</p>
<p>See the <a href="localized-openstreetmap.js" target="_blank">localized-openstreetmap.js source</a> to see how this is done.</p>
</div>
<div id="tags">cors, localized-openstreetmap, openseamap, openstreetmap</div>
wmts-hidpi/examples/localized-openstreetmap.js
-1
View File
@@ -34,7 +34,6 @@ var map = new ol.Map({
openCycleMapLayer,
openSeaMapLayer
],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
maxZoom: 18,
wmts-hidpi/examples/mapguide-untiled.js
-1
View File
@@ -24,7 +24,6 @@ var map = new ol.Map({
})
})
],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [-87.7302542509315, 43.744459064634],
wmts-hidpi/examples/measure-require.js
+14
View File
@@ -0,0 +1,14 @@
goog.require('ol.Map');
goog.require('ol.View2D');
goog.require('ol.geom.LineString');
goog.require('ol.geom.Polygon');
goog.require('ol.interaction');
goog.require('ol.interaction.Draw');
goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector');
goog.require('ol.source.MapQuest');
goog.require('ol.source.Vector');
goog.require('ol.style.Circle');
goog.require('ol.style.Fill');
goog.require('ol.style.Stroke');
goog.require('ol.style.Style');
wmts-hidpi/examples/measure.html
+65
View File
@@ -0,0 +1,65 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Measure example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Measure example</h4>
<p id="shortdesc">Example of using the
ol.interaction.Draw interaction for creating simple
measuring application. </p>
<form class="form-inline">
<label>Geometry type &nbsp;</label>
<select id="type">
<option value="length">Length</option>
<option value="area">Area</option>
</select>
</form>
<ol id="measureOutput" reversed></ol>
<div id="docs">
<p><i>NOTE: Measure is done in simple way on projected plane. Earth
curvature is not taken into account</i></p>
<p>See the <a href="measure.js" target="_blank">measure.js source</a> to see how this is done.</p>
</div>
<div id="tags">draw, edit, measure, vector</div>
</div>
</div>
</div>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=measure" type="text/javascript"></script>
</body>
</html>
wmts-hidpi/examples/measure.js
+152
View File
@@ -0,0 +1,152 @@
var raster = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
});
var source = new ol.source.Vector();
var vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
/**
* Currently drawed feature
* @type {ol.Feature}
*/
var sketch;
/**
* Element for currently drawed feature
* @type {Element}
*/
var sketchElement;
/**
* handle pointer move
* @param {Event} evt
*/
var mouseMoveHandler = function(evt) {
if (sketch) {
var output;
var geom = (sketch.getGeometry());
if (geom instanceof ol.geom.Polygon) {
output = formatArea(/** @type {ol.geom.Polygon} */ (geom));
} else if (geom instanceof ol.geom.LineString) {
output = formatLength( /** @type {ol.geom.LineString} */ (geom));
}
sketchElement.innerHTML = output;
}
};
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View2D({
center: [-11000000, 4600000],
zoom: 15
})
});
$(map.getViewport()).on('mousemove', mouseMoveHandler);
var typeSelect = document.getElementById('type');
var draw; // global so we can remove it later
function addInteraction() {
var type = (typeSelect.value == 'area' ? 'Polygon' : 'LineString');
draw = new ol.interaction.Draw({
source: source,
type: /** @type {ol.geom.GeometryType} */ (type)
});
map.addInteraction(draw);
draw.on('drawstart',
function(evt) {
// set sketch
sketch = evt.feature;
sketchElement = document.createElement('li');
var outputList = document.getElementById('measureOutput');
if (outputList.childNodes) {
outputList.insertBefore(sketchElement, outputList.firstChild);
} else {
outputList.appendChild(sketchElement);
}
}, this);
draw.on('drawend',
function(evt) {
// unset sketch
sketch = null;
sketchElement = null;
}, this);
}
/**
* Let user change the geometry type.
* @param {Event} e Change event.
*/
typeSelect.onchange = function(e) {
map.removeInteraction(draw);
addInteraction();
};
/**
* format length output
* @param {ol.geom.LineString} line
* @return {string}
*/
var formatLength = function(line) {
var length = Math.round(line.getLength() * 100) / 100;
var output;
if (length > 100) {
output = (Math.round(length / 1000 * 100) / 100) +
' ' + 'km';
} else {
output = (Math.round(length * 100) / 100) +
' ' + 'm';
}
return output;
};
/**
* format length output
* @param {ol.geom.Polygon} polygon
* @return {string}
*/
var formatArea = function(polygon) {
var area = polygon.getArea();
var output;
if (area > 10000) {
output = (Math.round(area / 1000000 * 100) / 100) +
' ' + 'km<sup>2</sup>';
} else {
output = (Math.round(area * 100) / 100) +
' ' + 'm<sup>2</sup>';
}
return output;
};
addInteraction();
wmts-hidpi/examples/modify-features.js
+5 -9
View File
@@ -1,20 +1,17 @@
var raster = new ol.layer.Tile({
style: 'Aerial',
source: new ol.source.MapQuest({
layer: 'sat'
})
});
var source = new ol.source.GeoJSON({
projection: 'EPSG:3857',
url: 'data/geojson/countries.geojson'
});
var vector = new ol.layer.Vector({
source: source
source: new ol.source.GeoJSON({
projection: 'EPSG:3857',
url: 'data/geojson/countries.geojson'
})
});
var select = new ol.interaction.Select({});
var select = new ol.interaction.Select();
var modify = new ol.interaction.Modify({
features: select.getFeatures()
@@ -23,7 +20,6 @@ var modify = new ol.interaction.Modify({
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([select, modify]),
layers: [raster, vector],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [0, 0],
wmts-hidpi/examples/modify-test.js
-1
View File
@@ -229,7 +229,6 @@ var modify = new ol.interaction.Modify({
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([select, modify]),
layers: [layer],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [0, 1000000],
wmts-hidpi/examples/overlay.js
+1 -1
View File
@@ -36,7 +36,7 @@ var popup = new ol.Overlay({
});
map.addOverlay(popup);
map.on('singleclick', function(evt) {
map.on('click', function(evt) {
var element = popup.getElement();
var coordinate = evt.coordinate;
var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
wmts-hidpi/examples/popup.js
+1 -1
View File
@@ -51,7 +51,7 @@ var map = new ol.Map({
/**
* Add a click handler to the map to render the popup.
*/
map.on('singleclick', function(evt) {
map.on('click', function(evt) {
var coordinate = evt.coordinate;
var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
coordinate, 'EPSG:3857', 'EPSG:4326'));
wmts-hidpi/examples/rtree.js
-1
View File
@@ -82,7 +82,6 @@ var rtree = new ol.layer.Vector({
var map = new ol.Map({
layers: [vector, rtree],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [0, 0],
wmts-hidpi/examples/select-features-require.js
-4
View File
@@ -6,7 +6,3 @@ goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector');
goog.require('ol.source.GeoJSON');
goog.require('ol.source.MapQuest');
goog.require('ol.style.Fill');
goog.require('ol.style.Stroke');
goog.require('ol.style.Style');
goog.require('ol.style.Text');
wmts-hidpi/examples/select-features.js
+1 -30
View File
@@ -9,40 +9,11 @@ var vector = new ol.layer.Vector({
})
});
var styleCache = {};
var select = new ol.interaction.Select({
style: function(feature, resolution) {
var text = feature.get('name');
if (!styleCache[text]) {
styleCache[text] = [new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.3)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255,0,0,1)',
size: 2
}),
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
text: text,
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 3
})
})
})];
}
return styleCache[text];
}
});
var select = new ol.interaction.Select();
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([select]),
layers: [raster, vector],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [0, 0],
wmts-hidpi/examples/side-by-side.js
-1
View File
@@ -28,7 +28,6 @@ if (ol.BrowserFeature.HAS_WEBGL) {
}
var canvasMap = new ol.Map({
renderer: 'canvas',
target: 'canvasMap'
});
canvasMap.bindTo('layergroup', domMap);
wmts-hidpi/examples/static-image.html
+2 -1
View File
@@ -32,8 +32,9 @@
<div class="span12">
<h4 id="title">Static image example</h4>
<p id="shortdesc">Example of a static image layer. Source: <a href="http://xkcd.com/256/">xkcd.com/256/</a></p>
<p id="shortdesc">Example of a static image layer.</p>
<div id="docs">
<p>Source: <a href="http://xkcd.com/256/">xkcd.com/256/</a></p>
<p>See the <a href="static-image.js" target="_blank">static-image.js source</a> to see how this is done.</p>
</div>
<div id="tags">static image, xkcd</div>
wmts-hidpi/examples/static-image.js
-1
View File
@@ -23,7 +23,6 @@ var map = new ol.Map({
})
})
],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
projection: pixelProjection,
wmts-hidpi/examples/synthetic-lines.js
-1
View File
@@ -45,7 +45,6 @@ var view = new ol.View2D({
var map = new ol.Map({
layers: [vector],
renderer: 'canvas',
target: 'map',
view: view
});
wmts-hidpi/examples/synthetic-points.js
+1 -2
View File
@@ -43,7 +43,6 @@ var popup = new ol.Overlay({
var map = new ol.Map({
layers: [vector],
renderer: 'canvas',
target: document.getElementById('map'),
view: new ol.View2D({
center: [0, 0],
@@ -81,7 +80,7 @@ $(map.getViewport()).on('mousemove', function(evt) {
displaySnap(coordinate);
});
map.on('singleclick', function(evt) {
map.on('click', function(evt) {
displaySnap(evt.coordinate);
});
wmts-hidpi/examples/tile-vector-require.js
+10
View File
@@ -0,0 +1,10 @@
goog.require('ol.Map');
goog.require('ol.View2D');
goog.require('ol.format.TopoJSON');
goog.require('ol.layer.Vector');
goog.require('ol.proj');
goog.require('ol.source.TileVector');
goog.require('ol.style.Fill');
goog.require('ol.style.Stroke');
goog.require('ol.style.Style');
goog.require('ol.tilegrid.XYZ');
wmts-hidpi/examples/tile-vector.html
+51
View File
@@ -0,0 +1,51 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Tile vector example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map" style="background: white;"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Tile vector example</h4>
<p id="shortdesc">Example of vector tiles from openstreetmap.us.</p>
<div id="docs">
<p>See the <a href="tile-vector.js" target="_blank">tile-vector.js source</a> to see how this is done.</p>
</div>
<div id="tags">tile-vector, openstreetmap</div>
</div>
</div>
</div>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=tile-vector" type="text/javascript"></script>
</body>
</html>
wmts-hidpi/examples/tile-vector.js
+74
View File
@@ -0,0 +1,74 @@
var waterLayer = new ol.layer.Vector({
source: new ol.source.TileVector({
format: new ol.format.TopoJSON({
defaultProjection: 'EPSG:4326'
}),
projection: 'EPSG:3857',
tileGrid: new ol.tilegrid.XYZ({
maxZoom: 19
}),
url: 'http://{a-c}.tile.openstreetmap.us/' +
'vectiles-water-areas/{z}/{x}/{y}.topojson'
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: '#9db9e8'
})
})
});
var roadStyleCache = {};
var roadLayer = new ol.layer.Vector({
source: new ol.source.TileVector({
format: new ol.format.TopoJSON({
defaultProjection: 'EPSG:4326'
}),
projection: 'EPSG:3857',
tileGrid: new ol.tilegrid.XYZ({
maxZoom: 19
}),
url: 'http://{a-c}.tile.openstreetmap.us/' +
'vectiles-highroad/{z}/{x}/{y}.topojson'
}),
style: function(feature, resolution) {
var kind = feature.get('kind');
var railway = feature.get('railway');
var sort_key = feature.get('sort_key');
var styleKey = kind + '/' + railway + '/' + sort_key;
var styleArray = roadStyleCache[styleKey];
if (!styleArray) {
var color, width;
if (railway) {
color = '#7de';
width = 1;
} else {
color = {
'major_road': '#776',
'minor_road': '#ccb',
'highway': '#f39'
}[kind];
width = kind == 'highway' ? 1.5 : 1;
}
styleArray = [new ol.style.Style({
stroke: new ol.style.Stroke({
color: color,
width: width
}),
zIndex: sort_key
})];
roadStyleCache[styleKey] = styleArray;
}
return styleArray;
}
});
var map = new ol.Map({
layers: [waterLayer, roadLayer],
renderer: 'canvas',
target: document.getElementById('map'),
view: new ol.View2D({
center: ol.proj.transform([-74.0064, 40.7142], 'EPSG:4326', 'EPSG:3857'),
maxZoom: 19,
zoom: 14
})
});
wmts-hidpi/examples/tissot-require.js
+9
View File
@@ -0,0 +1,9 @@
goog.require('ol.Feature');
goog.require('ol.Map');
goog.require('ol.View2D');
goog.require('ol.geom.Polygon');
goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector');
goog.require('ol.source.TileWMS');
goog.require('ol.source.Vector');
goog.require('ol.sphere.WGS84');
wmts-hidpi/examples/tissot.html
+51
View File
@@ -0,0 +1,51 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Tissot indicatrix example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Tissot indicatrix example</h4>
<p id="shortdesc">Example of a <a href="http://en.wikipedia.org/wiki/Tissot's_indicatrix">Tissot indicatrix</a> map.</p>
<div id="docs">
<p>See the <a href="tissot.js" target="_blank">tissot.js source</a> to see how this is done.</p>
</div>
<div id="tags">tissot, circle</div>
</div>
</div>
</div>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=tissot" type="text/javascript"></script>
</body>
</html>
wmts-hidpi/examples/tissot.js
+35
View File
@@ -0,0 +1,35 @@
var vectorSource = new ol.source.Vector();
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://vmap0.tiles.osgeo.org/wms/vmap0',
params: {
'VERSION': '1.1.1',
'LAYERS': 'basic',
'FORMAT': 'image/jpeg'
}
})
}),
new ol.layer.Vector({
source: vectorSource
})
],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 2
})
});
var radius = 800000;
for (var x = -180; x < 180; x += 30) {
for (var y = -90; y < 90; y += 30) {
var circle = ol.geom.Polygon.circular(ol.sphere.WGS84, [x, y], radius, 64);
vectorSource.addFeature(new ol.Feature(circle));
}
}
wmts-hidpi/examples/topojson.js
-1
View File
@@ -27,7 +27,6 @@ var vector = new ol.layer.Vector({
var map = new ol.Map({
layers: [raster, vector],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [0, 0],
wmts-hidpi/examples/vector-labels.js
-1
View File
@@ -173,7 +173,6 @@ var map = new ol.Map({
vectorLines,
vectorPoints
],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [-8161939, 6095025],
wmts-hidpi/examples/vector-layer.js
+1 -2
View File
@@ -39,7 +39,6 @@ var map = new ol.Map({
}),
vectorLayer
],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [0, 0],
@@ -110,6 +109,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
displayFeatureInfo(pixel);
});
map.on('singleclick', function(evt) {
map.on('click', function(evt) {
displayFeatureInfo(evt.pixel);
});
wmts-hidpi/examples/vector-osm-require.js
+5 -1
View File
@@ -1,10 +1,14 @@
goog.require('ol.Map');
goog.require('ol.View2D');
goog.require('ol.format.OSMXML');
goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector');
goog.require('ol.loadingstrategy');
goog.require('ol.proj');
goog.require('ol.source.BingMaps');
goog.require('ol.source.OSMXML');
goog.require('ol.source.ServerVector');
goog.require('ol.style.Circle');
goog.require('ol.style.Fill');
goog.require('ol.style.Stroke');
goog.require('ol.style.Style');
goog.require('ol.tilegrid.XYZ');
wmts-hidpi/examples/vector-osm.html
+2 -2
View File
@@ -32,11 +32,11 @@
<div class="span4">
<h4 id="title">OSM XML example</h4>
<p id="shortdesc">Example of using the OSM XML source.</p>
<p id="shortdesc">Example of using the OSM XML source. Vector data is loaded dynamically from a server using a tiling strategy.</p>
<div id="docs">
<p>See the <a href="vector-osm.js" target="_blank">vector-osm.js source</a> to see how this is done.</p>
</div>
<div id="tags">vector, osm, xml</div>
<div id="tags">vector, osm, xml, loading, server</div>
</div>
<div class="span4 offset4">
<div id="info" class="alert alert-success">
wmts-hidpi/examples/vector-osm.js
+16 -4
View File
@@ -72,9 +72,21 @@ var styles = {
}
};
var vectorSource = new ol.source.OSMXML({
projection: 'EPSG:3857',
url: 'data/osm/map.osm'
var vectorSource = new ol.source.ServerVector({
format: new ol.format.OSMXML(),
loader: function(extent, resolution, projection) {
var transform = ol.proj.getTransform(projection, 'EPSG:4326');
var epsg4326Extent = transform(extent, []);
var url = 'http://overpass-api.de/api/xapi?map?bbox=' +
epsg4326Extent.join(',');
$.ajax(url).then(function(response) {
vectorSource.addFeatures(vectorSource.readFeatures(response));
});
},
strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({
maxZoom: 19
})),
projection: 'EPSG:3857'
});
var vector = new ol.layer.Vector({
@@ -103,10 +115,10 @@ var raster = new ol.layer.Tile({
var map = new ol.Map({
layers: [raster, vector],
renderer: 'canvas',
target: document.getElementById('map'),
view: new ol.View2D({
center: [739218, 5906096],
maxZoom: 19,
zoom: 17
})
});
wmts-hidpi/examples/vector-wfs-require.js
+11
View File
@@ -0,0 +1,11 @@
goog.require('ol.Map');
goog.require('ol.View2D');
goog.require('ol.format.GeoJSON');
goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector');
goog.require('ol.loadingstrategy');
goog.require('ol.source.BingMaps');
goog.require('ol.source.ServerVector');
goog.require('ol.style.Stroke');
goog.require('ol.style.Style');
goog.require('ol.tilegrid.XYZ');
wmts-hidpi/examples/vector-wfs.html
+56
View File
@@ -0,0 +1,56 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>WFS example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<h4 id="title">WFS example</h4>
<p id="shortdesc">Example of using WFS with a BBOX strategy.</p>
<div id="docs">
<p>See the <a href="vector-wfs.js" target="_blank">vector-wfs.js source</a> to see how this is done.</p>
</div>
<div id="tags">vector, WFS, bbox, loading, server</div>
</div>
<div class="span4 offset4">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</div>
</div>
</div>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=vector-wfs" type="text/javascript"></script>
</body>
</html>
wmts-hidpi/examples/vector-wfs.js
+48
View File
@@ -0,0 +1,48 @@
var loadFeatures = function(response) {
vectorSource.addFeatures(vectorSource.readFeatures(response));
};
var vectorSource = new ol.source.ServerVector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) {
var url = 'http://demo.opengeo.org/geoserver/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
'outputFormat=text/javascript&format_options=callback:loadFeatures' +
'&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857';
$.ajax({
url: url,
dataType: 'jsonp'
});
},
strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({
maxZoom: 19
})),
projection: 'EPSG:3857'
});
var vector = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 255, 1.0)',
width: 2
})
})
});
var raster = new ol.layer.Tile({
source: new ol.source.BingMaps({
imagerySet: 'Aerial',
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
})
});
var map = new ol.Map({
layers: [raster, vector],
target: document.getElementById('map'),
view: new ol.View2D({
center: [-8908887.277395891, 5381918.072437216],
maxZoom: 19,
zoom: 12
})
});
wmts-hidpi/examples/wms-image.js
-1
View File
@@ -12,7 +12,6 @@ var layers = [
})
];
var map = new ol.Map({
renderer: 'canvas',
layers: layers,
target: 'map',
view: new ol.View2D({
wmts-hidpi/examples/wms-tiled.js
-1
View File
@@ -12,7 +12,6 @@ var layers = [
})
];
var map = new ol.Map({
renderer: 'canvas',
layers: layers,
target: 'map',
view: new ol.View2D({
wmts-hidpi/examples/wmts-hidpi.js
+10 -32
View File
@@ -1,26 +1,15 @@
var template = '{TileMatrix}/{TileRow}/{TileCol}.jpeg';
var normalUrls = [
'http://maps1.wien.gv.at/basemap/geolandbasemap/normal/google3857/' +
template,
'http://maps2.wien.gv.at/basemap/geolandbasemap/normal/google3857/' +
template,
'http://maps3.wien.gv.at/basemap/geolandbasemap/normal/google3857/' +
template,
'http://maps4.wien.gv.at/basemap/geolandbasemap/normal/google3857/' +
template,
'http://maps.wien.gv.at/basemap/geolandbasemap/normal/google3857/' + template
];
var retinaUrls = [
'http://maps1.wien.gv.at/basemap/bmapretina/normal/retina3857/' + template,
'http://maps2.wien.gv.at/basemap/bmapretina/normal/retina3857/' + template,
'http://maps3.wien.gv.at/basemap/bmapretina/normal/retina3857/' + template,
'http://maps4.wien.gv.at/basemap/bmapretina/normal/retina3857/' + template,
'http://maps.wien.gv.at/basemap/bmapretina/normal/retina3857/' + template
var urls = [
'http://maps1.wien.gv.at/basemap/bmaphidpi/normal/google3857/' + template,
'http://maps2.wien.gv.at/basemap/bmaphidpi/normal/google3857/' + template,
'http://maps3.wien.gv.at/basemap/bmaphidpi/normal/google3857/' + template,
'http://maps4.wien.gv.at/basemap/bmaphidpi/normal/google3857/' + template,
'http://maps.wien.gv.at/basemap/bmaphidpi/normal/google3857/' + template
];
var source = new ol.source.TileImage({
extent: [977844.377599999, 5837774.6617, 1915609.8654, 6295560.8122],
pixelRatios: [1, 2],
pixelRatios: [2],
requestEncoding: 'REST',
tileGrid: new ol.tilegrid.WMTS({
origin: [-20037508.3428, 20037508.3428],
@@ -53,20 +42,9 @@ var source = new ol.source.TileImage({
}),
tileUrlFunction: function(tileCoord, pixelRatio, projection) {
if (tileCoord) {
var urls;
var zxy = tileCoord.getZXY();
var supportedPixelRatio = source.getSupportedPixelRatio(pixelRatio);
if (supportedPixelRatio == 2) {
urls = retinaUrls;
zxy[0] += 1;
} else {
urls = normalUrls;
}
var index = tileCoord.hash() % urls.length;
if (index < 0) {
index += urls.length;
}
return urls[index]
var index = ((zxy[1] << zxy[0]) + zxy[2]) % urls.length;
return urls[index < 0 ? index + urls.length : index]
.replace('{TileMatrix}', zxy[0])
.replace('{TileRow}', -zxy[2] - 1)
.replace('{TileCol}', zxy[1]);
@@ -80,7 +58,7 @@ var map = new ol.Map({
source: source
})
],
renderer: 'canvas',
renderer: exampleNS.getRendererFromQueryString(['canvas', 'dom']),
target: 'map',
view: new ol.View2D({
center: [1823849, 6143760],
wmts-hidpi/examples/wmts-require.js
+1
View File
@@ -1,3 +1,4 @@
goog.require('ol.Attribution');
goog.require('ol.Map');
goog.require('ol.View2D');
goog.require('ol.extent');
wmts-hidpi/examples/wmts.js
+19 -13
View File
@@ -1,14 +1,20 @@
var projection = ol.proj.get('EPSG:900913');
var projection = ol.proj.get('EPSG:3857');
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = new Array(18);
var matrixIds = new Array(18);
for (var z = 0; z < 18; ++z) {
var resolutions = new Array(14);
var matrixIds = new Array(14);
for (var z = 0; z < 14; ++z) {
// generate resolutions and matrixIds arrays for this WMTS
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = z;
}
var attribution = new ol.Attribution({
html: 'Tiles &copy; <a href="http://services.arcgisonline.com/arcgis/rest/' +
'services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>'
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
@@ -18,26 +24,26 @@ var map = new ol.Map({
new ol.layer.Tile({
opacity: 0.7,
source: new ol.source.WMTS({
url: 'http://demo-apollo.geospatial.intergraph.com/erdas-iws/ogc/wmts/',
layer: 'sampleiws_images_geodetic_worldgeodemo.ecw',
matrixSet: 'ogc:1.0:googlemapscompatible',
format: 'image/jpeg',
attributions: [attribution],
url: 'http://services.arcgisonline.com/arcgis/rest/' +
'services/Demographics/USA_Population_Density/MapServer/WMTS/',
layer: '0',
matrixSet: 'EPSG:3857',
format: 'image/png',
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
}),
extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34],
extent: projectionExtent,
style: 'default'
})
})
],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
center: [0, 0],
zoom: 0,
maxResolution: resolutions[1]
center: [-11158582, 4813697],
zoom: 4
})
});
wmts-hidpi/examples/xyz-esri.js
-1
View File
@@ -14,7 +14,6 @@ var map = new ol.Map({
})
})
],
renderer: 'canvas',
view: new ol.View2D({
center: ol.proj.transform([-121.1, 47.5], 'EPSG:4326', 'EPSG:3857'),
zoom: 7
wmts-hidpi/examples/xyz-require.js
+6
View File
@@ -0,0 +1,6 @@
goog.require('ol.Attribution');
goog.require('ol.Map');
goog.require('ol.View2D');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
goog.require('ol.source.XYZ');
wmts-hidpi/examples/xyz.html
+51
View File
@@ -0,0 +1,51 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>XYZ example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">XYZ example</h4>
<p id="shortdesc">Example of a XYZ source.</p>
<div id="docs">
<p>See the <a href="xyz.js" target="_blank">xyz.js source</a> for details on how this is done.</p>
</div>
<div id="tags">xyz</div>
</div>
</div>
</div>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=xyz" type="text/javascript"></script>
</body>
</html>
wmts-hidpi/examples/xyz.js
+32
View File
@@ -0,0 +1,32 @@
var attribution = new ol.Attribution({
html: 'Tiles &copy; <a href="http://maps.nls.uk/townplans/glasgow_1.html">' +
'National Library of Scotland</a>'
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
attributions: [
new ol.Attribution({
html: 'Tiles &copy; <a href="http://www.opencyclemap.org/">' +
'OpenCycleMap</a>'
}),
ol.source.OSM.DATA_ATTRIBUTION
],
url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
})
}),
new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: [attribution],
url: 'http://geo.nls.uk/maps/towns/glasgow1857/{z}/{x}/{-y}.png'
})
})
],
view: new ol.View2D({
center: [-472202, 7530279],
zoom: 12
})
});