openlayers4官方例子学习---DAY2
加载OSM地图
<body>
<a class="skiplink" href="#map">Go to map</a>
<div id="map" class="map" tabindex="0"></div>
<button id="zoom-out">Zoom out</button>
<button id="zoom-in">Zoom in</button>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
document.getElementById('zoom-out').onclick = function() {//缩小
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(zoom - 1);
};
document.getElementById('zoom-in').onclick = function() {//放大
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(zoom + 1);
};
</script>
</body>
使用一个动态ArcGIS REST MapService，这个源类型支持地图和图像服务，动态 ArcGIS服务。
<div id="map" class="map"></div>
<script>
var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
'Specialty/ESRI_StateCityHighway_USA/MapServer';
var layers = [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Image({
source: new ol.source.ImageArcGISRest({
ratio: 1,
params: {},
url: url
})
})
];
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: [-10997148, 4569099],
zoom: 4
})
});
</script>
加载Tiled ArcGIS MapServer
<div id="map" class="map"></div>
<script>
var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
'Specialty/ESRI_StateCityHighway_USA/MapServer';
var layers = [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Tile({
extent: [-13884991, 2870341, -7455066, 6338219],
source: new ol.source.TileArcGISRest({
url: url
})
})
];
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: [-10997148, 4569099],
zoom: 4
})
});
</script>
加载bing map
http://openlayers.org/en/latest/examples/bing-maps.html
<body>
<div id="map" class="map"></div>
<select id="layer-select">
<option value="Aerial">Aerial</option>
<option value="AerialWithLabels" selected>Aerial with labels</option>
<option value="Road">Road (static)</option>
<option value="RoadOnDemand">Road (dynamic)</option>
<option value="collinsBart">Collins Bart</option>
<option value="ordnanceSurvey">Ordnance Survey</option>
</select>
<script>
var styles = [
'Road',
'RoadOnDemand',
'Aerial',
'AerialWithLabels',
'collinsBart',
'ordnanceSurvey'
];
var layers = [];
var i, ii;
for (i = 0, ii = styles.length; i < ii; ++i) {
layers.push(new ol.layer.Tile({
visible: false,
preload: Infinity,
source: new ol.source.BingMaps({
key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here',
imagerySet: styles[i]//图像集
// use maxZoom 19 to see stretched tiles instead of the BingMaps
// "no photos at this zoom level" tiles
// maxZoom: 19
})
}));
}
var map = new ol.Map({
layers: layers,
// Improve user experience by loading tiles while dragging/zooming. Will make
// zooming choppy on mobile or slow devices.
loadTilesWhileInteracting: true,
target: 'map',
view: new ol.View({
center: [-6655.5402445057125, 6709968.258934638],
zoom: 13
})
});
//下面的方法可借鉴
var select = document.getElementById('layer-select'); function onChange() { var style = select.value;//将被选中的ratio设为可见 for (var i = 0, ii = layers.length; i < ii; ++i) { layers[i].setVisible(styles[i] === style); } } select.addEventListener('change', onChange); onChange(); </script> </body>
加载CartoDB source
CartoDB是一个开源的允许你在web上存储和虚拟化地理数据的工具，这个数据库通过灵活方式让开发者更容易的、创建地图和设计自己的应用。
http://openlayers.org/en/latest/examples/cartodb.html
<body>
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div>
<form class="form-horizontal">
<label>
Show countries larger than
<select id="country-area" class="form-control">
<option value="0" default>0 ㎢</option>
<option value="5000">5000 ㎢</option>
<option value="10000">10000 ㎢</option>
<option value="50000">50000 ㎢</option>
<option value="100000">100000 ㎢</option>
</select>
</label>
</form>
</div>
</div>
<script>
var mapConfig = {
'layers': [{
'type': 'cartodb',
'options': {
'cartocss_version': '2.1.1',
'cartocss': '#layer { polygon-fill: #F00; }',
'sql': 'select * from european_countries_e where area > 0'
}
}]
};
var cartoDBSource = new ol.source.CartoDB({
account: 'documentation',
config: mapConfig
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Tile({
source: cartoDBSource
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
function setArea(n) {
mapConfig.layers[0].options.sql =
'select * from european_countries_e where area > ' + n;
cartoDBSource.setConfig(mapConfig);
}
document.getElementById('country-area').addEventListener('change', function() {
setArea(this.value);
});
</script>
</body>
做点的聚类
http://openlayers.org/en/latest/examples/cluster.html
<body>
<div id="map" class="map"></div>
<form>
<label>cluster distance</label>
<input id="distance" type="range" min="0" max="100" step="1" value="40"/>//注意这里的设置
</form>
<script>
var distance = document.getElementById('distance');
var count = 20000;
var features = new Array(count);
var e = 4500000;
for (var i = 0; i < count; ++i) {
var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
features[i] = new ol.Feature(new ol.geom.Point(coordinates));
}//随机设置2000个点的坐标
var source = new ol.source.Vector({
features: features
});
var clusterSource = new ol.source.Cluster({
distance: parseInt(distance.value, 10),
source: source
});
var styleCache = {};
var clusters = new ol.layer.Vector({
source: clusterSource,
style: function(feature) {
var size = feature.get('features').length;
var style = styleCache[size];
if (!style) {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: '#fff'
}),
fill: new ol.style.Fill({
color: '#3399CC'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff'
})
})
});
styleCache[size] = style;
}
return style;
}
});
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [raster, clusters],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
distance.addEventListener('input', function() {
clusterSource.setDistance(parseInt(distance.value, 10));
});
</script>
浙公网安备 33010602011771号