<!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. HBuilderX代码缩进问题

    前情 uni-app是我很喜欢的跨平台框架,它能开发小程序,H5,APP(安卓/iOS),对前端开发很友好,自带的IDE让开发体验也很棒,公司项目就是主推uni-app,自然也是用官方自带的IDE了 ...

  2. 【分块】LibreOJ 6282 数列分块入门6

    题目 https://loj.ac/p/6282 题解 数据范围 \(1 \leq n \leq 10^5\),因此进行分块最多分 \(\sqrt{10^5} ≈ 318\) 块.且数据是随机生成的, ...

  3. 【杂谈】如何选择：Session 还是 JWT？

    服务端如何验证客户端已经登录? 在用户成功登录后,服务端会发放一个凭证.之后,客户端的每次请求都需要携带该凭证,服务端通过验证凭证的有效性来判断用户是否已登录,并处理请求. 以下是 Session 和 ...

  4. Teams 无法访问的问题

    排除以下 login.partner.microsoftonline.cn; login.microsoftonline.com; microsoft.com; live.com; hotmail.c ...

  5. 搭建 zerotier 的行星服务

    放弃moon节点,直接搭建Zerotier根服务器_软件应用_什么值得买 Zerotier的优点在于其部署十分简便,只需在zerotier官网注册登陆并创建网络,在自己的设备安装客户端加入网络后,ze ...

  6. django连接数据库与orm基础知识

    目录 一.django连接数据库 二.pycharm连接MySQL数据库 三.ORM简介 1.ORM概念 2.ORM由来 3.ORM的优势和劣势 ORM的优势 ORM的劣势 四.ORM基本操作 1.现 ...

  7. Spring 事务管理 基于配置文件

    事务概念: 原子性:要么都成功,有一个失败都失败 一致性:总量不变(A有100元,B有100元,总量是200元.A把100元转给B,B就有了200元,总量还是200元) 隔离性:两人操作同一条数据,不 ...

  8. Shiro配置跳过权限验证

    需求 因为在开发环境,测试环境,有时候需要跳过shiro的权限验证.所以想写个简单的配置跳过shiro的权限验证.跳过权限验证的原理就是重写**@RequiresPermissions**的实现,然后 ...

  9. Qt/C++编写物联网组件/支持modbus/rtu/tcp/udp/websocket/mqtt/多线程采集

    一.功能特点 支持多种协议,包括Modbus_Rtu_Com/Modbus_Rtu_Tcp/Modbus_Rtu_Udp/Modbus_Rtu_Web/Modbus_Tcp/Modbus_Udp/Mo ...

  10. vue3项目中报错：Unexpected mutation of "xxx" prop

    vue3 中element 弹窗绑定需要通过v-model,这个时候父级会传个dialogVisible(boolean值)过来,结果会报eslint的错. Unexpected mutation o ...