I am unable to load ol3cesium map in Ionic 2.
My index.html (code within body tag):
<ion-app></ion-app>
<script src="http://openlayers.org/en/v3.16.0/build/ol.js"
<script src="../ol3-cesium-v1.17/ol3cesium.js"></script>
<script src="../ol3-cesium-v1.17/Cesium/Cesium.js"></script>
My home.ts:
Inside constructor, below code is added --
var view = new ol.View({
projection: 'EPSG:4326',
center: [-100, 35],
zoom: 3
});
var layer = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://demo.boundlessgeo.com/geoserver/wms',
params: {
'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
}
})
});
var overlay = new ol.layer.Tile({
opacity: 0.7,
extent: [-124.74, 24.96, -66.96, 49.38],
source: new ol.source.TileWMS(/** #type {olx.source.TileWMSOptions} */({
url: 'http://demo.boundlessgeo.com/geoserver/wms',
params: { 'LAYERS': 'topp:states', 'TILED': true },
serverType: 'geoserver',
crossOrigin: 'anonymous'
}))
});
var ol2d = new ol.Map({
layers: [layer, overlay],
target: 'map2d',
view: view
});
var ol3d = new olcs.OLCesium({ map: ol2d });
var scene = ol3d.getCesiumScene();
var terrainProvider = new Cesium.CesiumTerrainProvider({
url: '//assets.agi.com/stk-terrain/world'
});
ol3d.getCesiumScene().scene.terrainProvider = terrainProvider;
ol3d.setEnabled(true);
});
'map2d' is my div id in home.html.
I don't know why it is saying 'olcs is not defined' when running the project by ionic serve --lab. How can I resolve this JavaScript issue?
i solved it.
Actually i had to put cesium.js and ol3cesium inside www folder.
Related
I cannot assign polygon property to the area I want on the map in my project that I have created with open layers and angular
My method that I have created my map and then call in ngOnit()
IntilazeMapParsel() {
this.view = new View({
center: [3876682.9740679907, 4746346.604388495],
zoom: 6.5,
// minZoom:5.8
});
console.log("mao")
this.mapParsel = new Map({
view:this.view,
layers: [
new Tile({
source: new XYZ({
url: 'http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}',
}),
zIndex: -5444
}),
],
target: 'ol-map-parsel'
});
}
Here is the code I wrote because I want to show the multypolygon value on my map.
I don't understand why it doesn't appear on the map, I would appreciate it if you could help.
I am trying to load a layer on the OSM map using OL. The service which I have requires the authentication header, I have written the code but somehow it's not working. Here is my code
function customLoader(tile, src) {
var client = new XMLHttpRequest();
client.open('GET', src);
client.setRequestHeader("Ocp-Apim-Subscription-Key","XXXXXXXXXXXXXX");
client.onload = function() {
tile.getImage().src = src;
};
client.send();
}
var layers = [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Tile({
extent: [-425988.3826589292,6390953.66876267,161047.99457094132,6677439.650775372],
source: new ol.source.TileWMS({
url: 'https://url.com/WMSServer',
tileLoadFunction: customLoader,
params: {'LAYERS': '21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0', 'TILED': true},
serverType: 'WMSServer',
transition: 0
})
})
];
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: [-4.095013, 56.550473],
zoom: 4
})
});
I am not sure what I am doing wrong.
I cannot get the base64 method to work either. It would be better to use the object url method from https://openlayers.org/en/latest/apidoc/module-ol_Tile.html#~LoadFunction (but note that object urls can cause memory leaks if not revoked)
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.4.3/css/ol.css" type="text/css">
<style>
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.4.3/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
url: 'https://{a-c}.tile.opentopomap.org/{z}/{x}/{y}.png',
maxZoom: 17,
tileLoadFunction: function (tile, src) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.addEventListener('load', function (evt) {
var data = this.response;
if (data !== undefined) {
var url = URL.createObjectURL(data);
tile.getImage().addEventListener('load', function () {
URL.revokeObjectURL(url);
});
tile.getImage().src = url;
} else {
tile.setState(3);
}
});
xhr.addEventListener('error', function () {
tile.setState(3);
});
xhr.open('GET', src);
xhr.send();
}
})
})
],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
</script>
</body>
</html>
I wanna change the url of my ol3 map source. I've tryed using things such as map.set or map.getlayers().set or whatever but I can't seem to find a way to access my source object. Here's the code:
function init() {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
projection: 'PIXELS',
tileGrid: mapTileGrid,
url: loc
})
})
],
view: new ol.View({
projection: ol.proj.get('PIXELS'),
extent: mapExtent,
maxResolution: mapTileGrid.getResolution(0)
})
});
map.getView().fit(mapExtent, map.getSize());
console.log(map.get("layergroup").get("layers").get("url"));
map.get("layergroup").get("layers").set("url",loc);
}
What's a way to change the url property and reload the layer ?
I also tried using the setSource function as in the following answer : here
but it seems to not work (can't setSource of undefined).
try the following
function init() {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
projection: 'PIXELS',
tileGrid: mapTileGrid,
url: loc
})
})
],
view: new ol.View({
projection: ol.proj.get('PIXELS'),
extent: mapExtent,
maxResolution: mapTileGrid.getResolution(0)
})
});
map.getView().fit(mapExtent, map.getSize());
//get alll the layers exist on your map
var layers = map.getLayers();
//lets assume you want to set the url for the first layer found
layers[0].getSource().setUrl(loc);
}
I have a ol 3.10.1 map where the goal is to redraw the features of a layer dynamically. On the road to get there, I'm using the source.clear() function. The strange thing is that the source.clear() actually clear the features from the layer at the current zoom level, but while zooming in or out the features are still there. Am I using the source.clear() function the correct way? Please find bellow the code snippet which I'm using for testing purposes.
var image = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({color: 'red', width: 1})
});
var styles = {
'Point': [new ol.style.Style({
image: image
})]};
var styleFunction = function(feature, resolution) {
return styles[feature.getGeometry().getType()];
};
var CITYClusterSource = new ol.source.Cluster({
source: new ol.source.Vector({
url: 'world_cities.json',
format: new ol.format.GeoJSON(),
projection: 'EPSG:3857'
}),
})
var CITYClusterLayer = new ol.layer.Vector({
source: CITYClusterSource,
style: styleFunction
});
setTimeout(function () { CITYClusterSource.clear(); }, 5000);
var map = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
CITYClusterLayer
],
view: new ol.View({
center: ol.proj.transform([15.0, 45.0], 'EPSG:4326', 'EPSG:3857'),
zoom:3
})
});
I'm using the setTimout() function to have the features visible for some seconds, before they are supposed to be cleared.
Please advice.
UPDATE: http://jsfiddle.net/jonataswalker/ayewaz87/
I forgot, OL will load your features again and again, for each resolution. So if you want to remove once and for all, use a custom loader, see fiddle.
Your source is asynchronously loaded, so set a timeout when it's ready:
CITYClusterSource.once('change', function(evt){
if (CITYClusterSource.getState() === 'ready') {
// now the source is fully loaded
setTimeout(function () { CITYClusterSource.clear(); }, 5000);
}
});
Note the once method, you can use on instead of it.
im learing OpenLayers 3 and i am trying to assign an png image to the logo attribute of the layer.Vector.source like this:
var vectorSpeedLimit40 = new ol.layer.Vector({
title: 'speedlimit40',
source: new ol.source.Vector({
url: 'gpx/Fotoboks_40.gpx',
format: new ol.format.GPX({
extraStyles: false
}),
logo: '/imgs/lc.png'
})
});
var rasterLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [rasterLayer, vectorSpeedLimit40],
target: document.getElementById('map-canvas'),
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
Where i thought this would show instances of the png, it shows small blue circles instead like this:
I have checked, double checked, triple checked and the path is correct relative to the client.
What am i doing wrong? Thanks!
To assign a specific image to a vectorLayer with a GPX source you have to assign the image property a new ol.style.Icon with the src attribute to the image like this:
var vectorSource = new ol.source.Vector({
// Specify that the source is of type GPX
format: new ol.format.GPX(),
// Here you specify the path to the image file
url: 'gpx/source.gpx'
})
var vectorStyle = new ol.style.Style({
// Set the image attribute to a new ol.style.Icon
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */ ({
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
scale: 0.2,
// Here you specify the path to the image file
src: 'imgs/image.png'
}))
})
var vectorLayer = new ol.layer.Vector({
// Here you specify the source and style attributes of the ol.layer.Vector to the ones that are made above
source: vectorSource,
style: vectorStyle
});
// Then add it to the map
map.addLayer(vectorLayer);