【openlayers框架学习】十四：通过鼠标交互画直线、多边形、绘圆、自由画图

openlayers进阶

39 添加要素实现图形绘图

App.vue

<template>
  <div class="top-nav">
    <div class="city-choose">{
   
   {
   
    city }}</div>
    <el-input v-model="searchCity" style="width:240px" size="large" placeholder="请输入城市名称" :prefix-icon="Search" @keyup.enter="handleSearchCity"></el-input>
    <el-select v-model="drawType" placeholder="请选择绘制图形" style="width: 240px;"  @change="handleDrawType">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <el-select v-model="iconType" placeholder="请选择图标类型" style="width: 240px;">
      <el-option v-for="item in icons" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
  <div id="map-container"></div>
  <div id="popup"></div>
</template>

<script setup>
import {
   
    ref } from "vue";
import {
   
    onMounted } from 'vue';
import {
   
   Search} from '@element-plus/icons-vue';
import Map from 'ol/Map';
import View from "ol/View";
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector.js';
import {
   
    XYZ } from "ol/source";
import Draw from 'ol/interaction/Draw';
import VectorSource from "ol/source/Vector";
import GeoJSON from 'ol/format/GeoJSON.js';
import Style from "ol/style/Style";
import Fill from "ol/style/Fill";
import Stroke from "ol/style/Stroke";
const searchCity = ref("");
const city = ref("");
const adcode = ref("");
const cityLocation = ref([