<!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. E. Photoshoot for Gorillas

    题意 给定一个整数 \(T\),代表共有\(T\)组测试用例,对于每组测试用例: 给定四个整数 \(n,m,k和w(1 \leq n,m \leq 2 * 10^5, 1 \leq w \leq n ...

  2. OpenType 字体文件组织结构

    OpenType 字体文件结构 OpenType 字体的组织 https://docs.microsoft.com/en-us/typography/opentype/spec/otff#organi ...

  3. 再次探讨 WinForms 多线程开发

    再次探讨 WinForms 多线程开发 WinForms 已经开源,您现在可以在 GitHub 上查看 WinForm 源代码. 正好有人又讨论到在 WinFroms 环境下的多线程开发,这里就再整理 ...

  4. 我们为什么选择Vue.js而不是React（转载）

    这篇非常好,可以当做 why React sucks 看 ;D 其实 vue 也不如 molecule 最近,Qwintry开发团队把很多项目都迁移至Vue.js,包括所有遗留的项目和新开始的项目: ...

  5. 性能测试 -- docker部署grafana

    一.前提 1.安装好了docker 2.docker内 和 jmeter脚本 全都已经部署好了influxdb,并且数据采集等都正常 二.docker 部署 grafana 的操作步骤 1.下载 do ...

  6. 组件漏洞测试工具---Dependency-Check

    目录 文章综述 Dependency-Check简介 工作原理 常用命令 报告解读 使用场景 缺点 文章综述 本文主要介绍Dependency-Check工具的工作原理和使用方法,并提供一个开源方案帮 ...

  7. 03-FTP和TFTP命令

    http://www.h3c.com/cn/d_202101/1375275_30005_0.htm 1 FTP 1.1 FTP服务器配置命令 1.1.1 display ftp-server 1.1 ...

  8. Qt6.2发布（含项目代码升级到Qt6吐血经验总结）

    一.前言 升级到Qt6吐血经验总结 https://gitee.com/feiyangqingyun/qtkaifajingyan#二升级到qt6 我很高兴地宣布 Qt 6.2 的发布.Qt 6.2 ...

  9. Qt音视频开发34-Onvif时间设置

    一.前言 对设备设置时间很有必要,这个是必备的功能,毕竟大部分的前端设备比如摄像机本身不带BIOS电池的,所以没法存储时间,要么设置了NTP地址来同步时间,要么其他设备主动对他进行设置时间,如果时间不 ...

  10. JSON字符串反序列化 动态泛型

    需求:定时任务扫描,反射调用目标对象,但是,方法的传参不是固定的. 方案一:将方法参数存成JSON字符串,然后JSON反序列化成对象,然后反射调用 目标方法时这样的: CommandResp send ...