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 执笔画月，感谢

reference:

1. SuperMap REST地图服务底图 3857
2. OpenLayers API - Class: Polygon