vue中使用OpenLayers（二）：繪制 和 删除 點 線 圓

第一步 所有的引入都要引入完全

import "ol/ol.css";
  import Map from "ol/Map";
  import Feature from "ol/Feature";
  import View from "ol/View";
  import XYZ from "ol/source/XYZ";
  import Point from "ol/geom/Point";
  import Circle from "ol/geom/Circle";

  import LineString from "ol/geom/LineString";
  import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
  import { fromLonLat } from "ol/proj";
  import TileJSON from "ol/source/TileJSON";
  import VectorSource from "ol/source/Vector";
  import { Icon, Style, Stroke, Circle as CircleStyle, Fill } from "ol/style";
           

引入方式分兩種，一種引入主檔案，一種按需引入，我是按需引入，看每個人的需求

第二步繪制

其實繪制圓 線 點 的方法其實都是非常類似的

繪制點：

let tamarker = new Feature({
          tadata: {
            sectionId: this.sectionId,
            towerNumber: data.towerNumber
          },//這裡是用來傳值用的，在接下來的一章裡（事件）中我會講到。
          geometry: new Point(fromLonLat(lnglat))//這裡是點坐标的位置，這裡要注意fromLonLat
        });
        tamarker.setStyle(new Style({
          image: new Icon({
            color: "#eee",
            crossOrigin: "anonymous",
            src: *****//本地的樣式
          })
        }));//這裡是樣式
this.markerta = new VectorLayer({
          source: new VectorSource({
            features: [tamarker]//這裡放的就是之前的那個點，如果要放置多個點直接push到這裡面就行了
          })
        });
  this.map.addLayer(this.circlemark);//這裡是執行，執行之後點就出來了
           

繪制線:繪制線這裡要注意跟其他地圖不同的地方，它是兩個坐标繪制一條線

let line= new Feature(new LineString([fromLonLat([x,y]), fromLonLat([x2,y2])]));//這裡要注意寫fromLonLat，很重要
     line.setStyle(new Style({
             stroke: new Stroke({
              width: 3,
               color: "#008000"
             })
       }));
        this.linevectorLayer = new VectorLayer({
            source: new VectorSource({
              features: [line] //要繪制多段線，直接push到這裡面就行了
            })
          });
          this.map.addLayer(this.linevectorLayer);//這裡是執行，執行之後點就出來了
           

繪制圓：因為繪制都是差不多的，這裡我換一種寫發，我把樣式直接寫在new VectorLayer裡

var feature = new Feature({
          geometry: new Circle(fromLonLat([x,y]), 200),//坐标 加圓的大小
          labelPoint: new Point(fromLonLat([x,y]))
        });
        this.circlemark = new VectorLayer({
          source: new VectorSource({ features: [feature] }),//繪制多個
          style: new Style({
            // fill: new Fill({
            //   color: "rgba(23, 145, 252, 0.4)"
            // }),
            stroke: new Stroke({
              color: "#1791fc",
              width: 2
            })
          })
        });// 圓 marker
this.map.addLayer(this.circlemark);
           

接下來就是删除,三種都是一樣的删除方法

this.map.removeLayer(*******);//你addLayer啥 就removeLayer啥
           

我還沒找到一下子全部清除的辦法，這裡隻能你加載了多少就清除多少