console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/openlayers/3.10.0/ol.css">
<script src="https://cdn.bootcdn.net/ajax/libs/openlayers/3.10.0/ol.js"></script>
<style>
html, body, #map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
let map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.BingMaps({
key: 'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ',
imagerySet: 'Road'
})
}),
new ol.layer.Tile({
source: new ol.source.TileArcGISRest({
ratio: 1,
params: {},
url: 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer'
})
})
],
target: 'map',
view: new ol.View({
center: [110, 39],
zoom: 2
})
});
var polygon = new ol.geom.Polygon([[[110, 39], [116, 39], [116, 33], [110, 33], [110, 39]]]);
polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857'));
var feature = new ol.Feature(polygon);
var vectorSource = new ol.source.Vector();
vectorSource.addFeature(feature);
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
text: new ol.style.Text({
text: '我是描述',
scale: 1,
fill: new ol.style.Fill({
color: 'red'
}),
}),
fill: new ol.style.Fill({
color: 'rgba(237, 242, 98, 0.5)'
}),
stroke: new ol.style.Stroke({
color: 'transparent',
width: 0
}),
})
});
map.addLayer(vectorLayer);
</script>
</body>
</html>