<!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

openlayers 在地图上绘制矩形框，非鼠标框选的更多相关文章

  1. 利用百度API（JavaScript 版）实现在地图上绘制任一多边形，并判断给定经纬度是否在多边形范围内。以及两点间的测距功能

    权声明:本文为博主原创文章,未经博主允许不得转载. 利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内.以及两点间的测距功能. 绘制多边形(蓝色) ...

  2. R语言绘图：在地图上绘制热力图

    使用ggplot2在地图上绘制热力图 ######*****绘制热力图代码*****####### interval <- seq(0, 150000, 25000)[-2] #设置价格区间 n ...

  3. R语言绘图：在地图上绘制散点图

    使用ggplot2在地图上绘制散点图 ######*****绘制散点图代码*****####### options(baidumap.key = '**************') #设置密钥 bei ...

  4. 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明

    前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...

  5. iOS开发之在地图上绘制出你运行的轨迹

    首先我们看下如何在地图上绘制曲线.在Map Kit中提供了一个叫MKPolyline的类,我们可以利用它来绘制曲线,先看个简单的例子. 使用下面代码从一个文件中读取出经纬度,然后创建一个路径:MKPo ...

  6. 在谷歌地图上绘制行政区域轮廓【结合高德地图的API】

    实现思路: 1.利用高德地图行政区域API获得坐标列表 2.将坐标列表绘制在谷歌地图上[因为高德地图和国内的谷歌地图都是采用GCJ02坐标系,所有误差很小,可以不进行坐标误差转换] 注意点: 1.用百 ...

  7. echarts在地图上绘制散点图（任意点）

    项目需求:在省份地图上绘制散点图,散点位置不一定是哪个城市或哪个区县,即任意点 通过查询官网文档,找到一个与需求类似的Demo:https://www.echartsjs.com/gallery/ed ...

  8. OpenLayers在地图上显示统计图，饼图线状图柱状图，修复统计图跳动的问题

    环境介绍 Openlayers ol.js v5.3.0 Highcharts highcharts.js v7.0.1 jquery jquery-3.3.1.js v3.3.1 显示效果 地图放大 ...

  9. 如何用 matlab 在图片上绘制矩形框 和 添加文字 ？

    如何给图像添加矩形框?以及添加想要输入的文字 ? 案例程序,如下所示: clc; close all; clear all;image = imread('/home/wangxiao/Picture ...

  10. C#窗体上绘制矩形

    先上效果图 鼠标三个事件 private void Form1_MouseDown(object sender, MouseEventArgs e) { //记录开始点 this.mousedown ...

随机推荐

  1. oracle中id自增长（转）

    首先,你要有一张表! CREATE TABLE example( ID Number(4) NOT NULL PRIMARY KEY, NAME VARCHAR(25), PHONE VARCHAR( ...

  2. 【Amadeus原创】wordpress批量更新图片路径的方法

    连上wordpress数据库,怼一句: UPDATE wp_posts SET post_content = REPLACE( post_content, '旧域名', '新域名' );

  3. Centos更改SSH端口的方法

    1,vi sshd vi /etc/ssh/sshd_config 2,添加PORT #AddressFamily any #ListenAddress 0.0.0.0 #ListenAddress ...

  4. IOS中的Context Menu

    IOS中的Context Menu 通过长按组件或者3D touch方式,周边全部虚化,弹出一个可操作的菜单,并且菜单之间也可以嵌套 IOS13之后已经弃用UIViewControllerPrevie ...

  5. jQuery 国内 CDN

    eShop 中使用了 cdnjs ,由于网络问题,导致编译失败 可以使用如下国内链接: https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.mi ...

  6. 解决WSL2无法启动提示“找不到元素”

    最近一段时间没有看 docker desktop,忽然想起来打开看看,结果死活启动不了.以前卸载之后,重新安装就好了,同样的方法尝试了很多次还是不太行,重启也不行... 后来想想是不是 wsl 出了问 ...

  7. Qt音视频开发32-Onvif网络设置

    一.前言 用onvif协议来对设备的网络信息进行获取和设置,这个操作在众多的NVR产品中,用的很少,绝大部分用户都还是习惯直接通过摄像机的web页面进去配置,其实修改网络配置的功能在大部分的NVR中都 ...

  8. ThreeJs-09精通粒子特效

    一.初识points与点材质 什么叫做点材质,之前说过所有物体都是有定点的比如一个球体,并且将材质设置为线框模式,这个之前就说过所有mesh物体都是由三角形构成,都是有顶点的 我们也可以创建点物体,电 ...

  9. echo输出

    linux中不免经常使用echo进行输出,或输出到屏幕,或输出到文件.但是使用的时候会发现,在想要输出一些需要转义的字符时,例如\t等,它却原样不动的输出了. 使用man命令查看echo的帮助文档,会 ...

  10. Swagger UI、RESTful简介

    Swagger UI 简介 Swagger UI允许任何人(无论您是开发团队还是最终用户)都可以可视化API资源并与之交互,而无需任何实现逻辑.它是根据您的OpenAPI(以前称为Swagger)规范 ...