<!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. IOS实现水波纹

    IOS实现水波纹 需要实现一个水波纹效果 其实就是画两个正弦函数或者余弦函数的layer在view上面,根据屏幕刷新率来重绘,更新其左右偏移量来让其看起来是在左右移动 具体实现 定义两个layer,用 ...

  2. 有关终端Github无法访问，connection timed out:443等问题

    有关终端Github无法访问,connection timed out:443等问题 SSL_connect: Operation timed out in connection to github. ...

  3. OpenTelemetry.NET API

    OpenTelemetry.NET API Status and Releases Tracing Metrics Logging 1.0 Alpha Beta 安装 dotnet add packa ...

  4. django介绍及基本使用

    目录 一.python主流web框架 二.django简介 1.版本问题 2.运行django注意事项 三.django基本使用 1.下载模块 2.验证 3.常见命令 4.pycharm自动创建dja ...

  5. 【WEB前端】【JQuery】搜索li标签的内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. shell 下 exec，source，.，bash和sh以及export得区别

    exec执行命令时,不会启用新的shell进程.  source和 .也不会启用新的shell进程,在当前shell中执行,设定的局部变量在执行完命令后仍然有效.  bash或sh执行时,会另起一个子 ...

  7. Qt/C++原创推流工具/支持多种流媒体服务/ZLMediaKit/srs/mediamtx等

    一.前言 1.1 功能特点 支持各种本地视频文件和网络视频文件. 支持各种网络视频流,网络摄像头,协议包括rtsp.rtmp.http. 支持将本地摄像头设备推流,可指定分辨率和帧率等. 支持将本地桌 ...

  8. 张正友的相机标定论文Flexible camera calibration by viewing a plane from unknown orientations的翻译

    张正友的相机标定论文Flexible camera calibration by viewing a plane from unknown orientations的翻译: 翻译的pdf版本为:htt ...

  9. [密码管理/信息安全] KeePass Java 客户端 : KeePassJava2

    序:续<KeePass:密码管理工具> [密码管理/信息安全] 密码管理工具:KeePass vs LastPass vs 1Password - 博客园/千千寰宇 [推荐] 概述 Kee ...

  10. Android 稳定性(二)：治理思路篇

    本文同步发布于公众号:移动开发那些事:Android 稳定性(二):治理思路篇 一般来讲Android稳定性包括crash和ANR,本文主要围绕crash(应用的crash率)来讲述如何来做Andro ...