<!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. uni-app小程序(抖音)text组件使用踩坑

    前情 uni-app是我比较喜欢的跨平台框架,它能开发小程序/H5/APP(安卓/iOS),重要的是对前端开发友好,自带的IDE让开发体验也挺棒的,公司项目就是主推uni-app. 坑位 最近在开发一 ...

  2. Attribute application@label value=(xxx) from AndroidManifest.xml:8:16-37 is also present at [com.github.adrielcafe:AndroidAudioConverter:0.0.8] AndroidManifest.xml:11:18-50 value=(@string/app_name)

    关于安卓编译错误Attribute application@label value=(xxx) from AndroidManifest.xml:8:16-37 is also present at ...

  3. 实用干货分享（4）- 分布式金融PaaS容器化部署实战

    ​ ​编辑 一.学习链接 http://www.itmuch.com/docker/00-docker-lession-index/ 二.安装步骤 sudo yum install -y yum-ut ...

  4. checker jenkins 启动配置

    chmod -R 755 bin scp target/*.jar ubuntu@x:/home/ubuntu/checker/ scp config/*.yml ubuntu@x:/home/ubu ...

  5. React部署到线上Nginx环境中刷新页面后404解决方案

    我们需要在Nginx的配置文件中修改以下内容(通常Nginx配置文件位置为/etc/nginx/nginx.conf): server { # ... location / { # ... # 增加下 ...

  6. Qt采集本地摄像头推流成rtsp/rtmp(可网页播放/支持嵌入式linux)

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

  7. Qt编写地图综合应用48-地球模式、三维模式、地铁模式

    一.前言 百度地图本身提供了普通模式.地球模式.三维模式.地铁模式等好多种,普通模式是最常用的默认的,就是那个街道图和卫星图的,而地球模式和三维模式是最近几年才新增加的,为了迎合现在越来越多的用户的需 ...

  8. Datawhale AI 夏令营-天池Better Synth多模态大模型数据合成挑战赛-baseline复现与理解总结(更新中)

    在大数据.大模型时代,随着大模型发展,互联网数据渐尽且需大量处理标注,为新模型训练高效合成优质数据成为新兴问题."天池 Better Synth - 多模态大模型数据合成挑战赛"应 ...

  9. 推荐4款基于.NET开源、功能强大的CMS建站系统

    前言 CMS系统作为一种强大的内容管理工具,在数字化时代发挥着越来越重要的作用.无论是个人博客还是大型企业官网,选择一个合适的CMS都能极大地提高效率和用户体验.今天大姚给大家推荐4款基于.NET开源 ...

  10. c# C#设置WebBrowser使用Edge内核

    开始尝试是用 Microsoft.Toolkit.Forms.UI.Controls.WebView,后来发现一大堆问题,还要求WIN10 SDK的版本之类的. 网上看到的简单的解决办法(只需要修改注 ...