Vue+Openlayers实现在地图上绘制多边形Polygon,坐标数组三层赋值，否则不显示

拼搏现实的明天。 2023-09-30 12:16 18阅读 0赞

## 场景 ##

Vue+Openlayers实现地图上绘制线：

[Vue+Openlayers实现地图上绘制线\_霸道流氓气质的博客-CSDN博客][Vue_Openlayers_-CSDN]

上面实现添加点和线，怎么实现添加面/多边形Polygon

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

注：

博客：  
[霸道流氓气质的博客\_CSDN博客-C\#,架构之路,SpringBoot领域博主][CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、引入所需模块

//导入基本模块
    import "ol/ol.css";
    import Map from "ol/Map";
    import View from "ol/View";
    import { Fill,Style,Stroke} from "ol/style";
    //导入相关模块
    import { Tile as TileLayer , Vector as VectorLayer } from 'ol/layer'
    import { TileWMS ,Vector as VectorSource } from 'ol/source'
    import { Polygon} from "ol/geom";
    import Feature from "ol/Feature";

2、声明多边形图层与数据源

data() {
        return {
          map: null, // map地图
          layer:null, //地图图层
          polygonLayer: null,
          polygonSource: null,
       };
      },

3、封装绘制Polygon的方法

//画多边形
        drawPolygon(data){ 
            debugger
            let self = this;
            //下边来添加一线feature
            var feature = new Feature({
                type: "Polygon",
                geometry: new Polygon(
                    data  // 线的坐标
                ),
            });
            let lineStyle = new Style({
                fill: new Fill({
                    color: 'rgba(1, 210, 241, 0.2)'
                }),
                stroke: new Stroke({
                    color: 'rgba(255, 0, 0)',
                    width: 4,
                }),
            });
            // 添加线的样式
            feature.setStyle(lineStyle);
            // 添加线的fature
            self.polygonSource.addFeature(feature);
        },

4、页面加载之后初始化地图并调用绘制多边形的方法

mounted() {
        this.initMap();
        let pointArr = [[[[986957.12],[215578.12]],[[989763.12],[213860.12]],[[987415.12],[212008.12]],[[986957.12],[215578.12]]]];
        this.drawPolygon(pointArr);
      },

5、完整示例代码

<template>
        <div id="app">
          <div id="map" class="map"></div>
        </div>
    </template>
    
    <script>
    //导入基本模块
    import "ol/ol.css";
    import Map from "ol/Map";
    import View from "ol/View";
    import { Fill,Style,Stroke} from "ol/style";
    //导入相关模块
    import { Tile as TileLayer , Vector as VectorLayer } from 'ol/layer'
    import { TileWMS ,Vector as VectorSource } from 'ol/source'
    import { Polygon} from "ol/geom";
    import Feature from "ol/Feature";
    export default {
      name: "olMapTileWMSAddPolygon",
      data() {
        return {
          map: null, // map地图
          layer:null, //地图图层
          polygonLayer: null,
          polygonSource: null,
       };
      },
      mounted() {
        this.initMap();
        let pointArr = [[[[986957.12],[215578.12]],[[989763.12],[213860.12]],[[987415.12],[212008.12]],[[986957.12],[215578.12]]]];
        this.drawPolygon(pointArr);
      },
      methods: {
     
        initMap() {
          //地图图层
          this.layer = new TileLayer({
            source: new TileWMS({
              //不能设置为0，否则地图不展示。
              ratio: 1,
              url: "http://localhost:8000/geoserver/nyc/wms",
              params: {
                LAYERS: "nyc:nyc_roads",
                STYLES: "",
                VERSION: "1.1.1",
                tiled: true
              },
              serverType: "geoserver",
            }),
          });
    
          //线的图层
          this.polygonSource = new VectorSource({ wrapX: false });
          this.polygonLayer = new VectorLayer({
              source: this.polygonSource,
          });
    
          this.map = new Map({
            //地图容器ID
            target: "map",
            //引入地图
            layers: [this.layer,this.polygonLayer],
            view: new View({
              //地图中心点
              center: [987777.93778, 213834.81024],
              zoom: 14,
              minZoom:6, // 地图缩放最小级别
              maxZoom:19,
            }),
          });
    
    
        },
        //画多边形
        drawPolygon(data){ 
            debugger
            let self = this;
            //下边来添加一线feature
            var feature = new Feature({
                type: "Polygon",
                geometry: new Polygon(
                    data  // 线的坐标
                ),
            });
            let lineStyle = new Style({
                fill: new Fill({
                    color: 'rgba(1, 210, 241, 0.2)'
                }),
                stroke: new Stroke({
                    color: 'rgba(255, 0, 0)',
                    width: 4,
                }),
            });
            // 添加线的样式
            feature.setStyle(lineStyle);
            // 添加线的fature
            self.polygonSource.addFeature(feature);
        },
      },
    };
    </script>
    
    <style scoped>
    .map {
      width: 100%;
      height: 800px;
    }
    </style>

6、注意事项

一开始不显示多边形也不报错，原始是坐标数组赋值时是嵌套的三层数组

let pointArr = \[\[\[\[986957.12\],\[215578.12\]\],\[\[989763.12\],\[213860.12\]\],\[\[987415.12\],\[212008.12\]\],\[\[986957.12\],\[215578.12\]\]\]\];

这里是三角形，需要四个点，且第一个点与第四个点坐标一致。

在使用Draw进行页面上绘制多边形时，绘制结束后可以看到其点位坐标也是如下三层数组的结构。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

[Vue_Openlayers_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121252960
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/9329a500ab1a42a4be56e8ebdbf1ade2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/345eab7052984464a0e0214407d14b9e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16