openLayers v6.13.0 简单图标、线的添加删除

VIP文章路过的小菜鸟

已于 2022-04-24 18:30:06 修改

阅读量1.5k

点赞数 1

文章标签： vue.js javascript

于 2022-04-24 18:26:06 首次发布

本文链接：https://blog.csdn.net/qq_48971830/article/details/124388953

版权

<template>
  <div>
    <div
      id="map"
      class="map"
    ></div>
  </div>
</template>

<script>
// openLayers地图引入文件
import "ol/ol.css" // ol.css文件
import { Feature, Map, View } from "ol"; // 引入Map对象
import XYZ from "ol/source/XYZ" // 使用自定义
import TileLayer from "ol/layer/Tile" // 瓦片图层
import { transform } from "ol/proj" // 将坐标从源投影转换为目标投影。这将返回一个新的坐标（并且不会修改原始坐标）
import {
  Vector as VectorLayer, // 图标图层
} from "ol/layer";
import { Vector } from "ol/source";
import { Point, LineString } from 'ol/geom';
import { Style, Icon, Text, Fill } from 'ol/style';


export default {
  data () {
    return {
      /**ol new Map({}) */
      map: {},
      /**icon图标的坐标 */
      coordarr: [[104, 30], [150, 60]],
      /** ol.source.Vector 图标图层数据源 */
      vectorSource: null,
      /**ol.layer.Tile 地图数据源 */
      rasterLayer: null,
      /**ol.layer.Vector 图标图层的弹层组件 */
      vectorLayer: null,
      /**添加icon使用的id */
      addFeatureid: 1,
      /**删除icon使用的id */
      removeFeatureid: 2,
      /**添加线使用的id */
      addLineId: 1,
      /**删除线使用的id */
      romoveLineId: 1,
      /**计时器 */
      change: null
    }
  },
  mounted () {
    const that = this
    if (this