openlayers 在地图上绘制矩形框，非鼠标框选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title data-i18n="resources.title_tiledMapLayer3857"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
<script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
</head>
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
<div id="map" style="width: 100%; height: 100%"></div>
<script type="text/javascript">
var map,
url =
(window.isLocal ? window.server : 'https://iserver.supermap.io') +
'/iserver/services/map-china400/rest/maps/China';
// 方式一：1.调用 ol.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
// ol.supermap.initMap(url, {
// mapOptions: {
// controls: ol.control
// .defaults({ attributionOptions: { collapsed: false } })
// .extend([new ol.supermap.control.Logo()])
// }
// });
/* 方式二：1.调用 ol.supermap.MapService，获取 SuperMap iServer 地图服务的地图信息
2.调用 ol.supermap.viewOptionsFromMapJSON 获取地图视图参数
3.调用 ol.Map 创建地图
4.调用 ol.layer.Tile 与 ol.source.TileSuperMapRest 创建底图
*/
new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
const mapObj = serviceResult.result;
map = new ol.Map({
target: 'map',
controls: ol.control
.defaults({ attributionOptions: { collapsed: false } })
.extend([new ol.supermap.control.Logo()]),
view: new ol.View(ol.supermap.viewOptionsFromMapJSON(mapObj))
});
var layer = new ol.layer.Tile({
source: new ol.source.TileSuperMapRest(ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapObj, true))
});
map.addLayer(layer);
map.addControl(new ol.supermap.control.ScaleLine());
var coords = [[110,20],[112,22],[114,25],[116,28],[111,40],[110,20]]; // 多边形坐标数组
var vectorLayer = new ol.layer.Vector();
var vectorSource = new ol.source.Vector();
var polygon = new ol.geom.Polygon([coords]); // 多边形形构造方法
polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857')); // 4326 对应的是经纬度坐标系，3857叫墨卡托？反正不是经纬度，需要做个转换
vectorSource.addFeature(new ol.Feature(polygon)); // 形成Feature，并添加到source
vectorLayer.setSource(vectorSource); // layer设置source
map.addLayer(vectorLayer); // 将layer加入地图
});
</script>
</body>
</html>
谁知道这里是为什么又套了一层数组？
var polygon = new ol.geom.Polygon([coords]); // 矩形构造方法，不知道这里为啥又套了一层数组，去掉这层数组则无法显示矩形
如果这么写的话，按照上面的例子，传入的内容为[ [ [110,20],[112,22],[114,25],[116,28],[111,40],[110,20] ] ]岂不是没有按照一般人的思路来，为什么多套一层？
解：
多套一层是因为 一个Polygon 可以绘制多个多边形，根据supermap问答区的解释 是因为 Polygon 可以做多对象复合多边形 —— 来自 SuperMap 执笔画月，感谢
