如何正确组合打开的图层绘制图层与Bing地图图层
如何正确组合打开的图层绘制图层与Bing地图图层
提问于 2018-03-02 10:06:01
如何在Bing地图瓦片制作的地图上显示Open Layers中绘制的图层？我有它的工作与绘制层显示，但一旦完成绘图，绘图消失。
我相信我的语法一定是不正确的，因为我可以生成带有绘制层的简单版本的开放地图，但当我与Bing结合时，一切都崩溃了。
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 800px;
}
textarea {
width: 300px;
height: 100px;
}
</style>
<title>Testing</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<div id="demo"></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>
</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: 'MY_BING_MAPS_KEY',
imagerySet: styles[i]
// use maxZoom 19 to see stretched tiles instead of the BingMaps
// "no photos at this zoom level" tiles
// maxZoom: 19
})
}));
}
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var source = new ol.source.Vector({
wrapX: false
});
var vector = new ol.layer.Vector({
source: source
});
var map = new ol.Map({
layers: layers,
loadTilesWhileInteracting: true,
target: 'map',
view: new ol.View({
center: ol.proj.transform([-95.5, 38.5], 'EPSG:4326', 'EPSG:3857'),
zoom: 5
})
});
var select = document.getElementById('layer-select');
function onChange() {
var style = select.value;
for (var i = 0, ii = layers.length; i < ii; ++i) {
layers[i].setVisible(styles[i] === style);
}
}
select.addEventListener('change', onChange);
onChange();
source.on('addfeature', function(evt) {
var feature = evt.feature;
var coords = feature.getGeometry().getCoordinates();
document.getElementById('demo').innerHTML = coords + "<br>";
});
var draw; // global so we can remove it later
function addInteraction() {
draw = new ol.interaction.Draw({
source: source,
type: 'Polygon',
freehand: true
});
layers.push(draw);
map.addInteraction(draw);
}
layers.push(draw);
addInteraction();
</script>
</body>
</html>回答 2
Stack Overflow用户
发布于 2020-09-06 20:56:51
如果将向量层作为参数传递，map.addLayer()可能会解决此特定问题。
Stack Overflow用户
发布于 2018-03-05 17:13:40
您应该将要绘制的图层(向量)添加到地图中。
var vector = new ol.layer.Vector({
source: source
});
layers.push(vector);您还可以删除这些行
layers.push(draw);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49061693
复制相关文章
相似问题
腾讯云开发者
