安保管理地图选点

guoshilong

2023-02-14 f6ca44fd34e71b9d5ae9a52ac6b7781a13b8ed7b

 src/components/map/mapBox.vue

@@ -1,448 +1,449 @@
<template>
    <div>
        <div id='map' :style="{ height: isDetail ? '90vh' : '40vh', width: '100%' }" ref="MapContent">
            <div style="position: absolute;right:40%;top:-1%;z-index: 999999">
                <p style="margin-top: 10px" v-if="!isDetail">
                    <el-button type="primary" size="small" @click="point()">绘制区域</el-button>
                    <el-button size="small" @click="clearDraw()">重置</el-button>
                </p>
            </div>
            <!--画线后的提示-->
            <div class="mapTip" v-if="showTip" :style="{ top: tipPosition.h + 'px', left: tipPosition.w + 'px' }">
                {{ tipTitle }}
            </div>
        </div>
  <div>
    <div id='map' :style="{ height: isDetail ? '90vh' : '40vh', width: '100%' }" ref="MapContent">
      <div style="position: absolute;right:40%;top:-1%;z-index: 999999">
        <p style="margin-top: 10px" v-if="!isDetail">
          <el-button type="primary" size="small" @click="point()">绘制区域</el-button>
          <el-button size="small" @click="clearDraw()">重置</el-button>
        </p>
      </div>
      <!--画线后的提示-->
      <div class="mapTip" v-if="showTip" :style="{ top: tipPosition.h + 'px', left: tipPosition.w + 'px' }">
        {{ tipTitle }}
      </div>
    </div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View, Feature } from 'ol'
import {Map, View, Feature} from 'ol'
import VectorSource from 'ol/source/Vector'
import Cluster from 'ol/source/Cluster'
import { Vector as VectorLayer, Tile as TileLayer } from 'ol/layer'
import {Vector as VectorLayer, Tile as TileLayer} from 'ol/layer'
import LineString from "ol/geom/LineString"
import Point from 'ol/geom/Point'
import Icon from 'ol/style/Icon'
import { Style, Fill as StyleFill, Stroke as StyleStroke, Text as StyleText, Circle as StyleCircle } from 'ol/style'
import { Circle as GeomCircle, Point as GeomPoint, LineString as GeomLineString, Polygon as GeomPolygon } from 'ol/geom'
import {Style, Fill as StyleFill, Stroke as StyleStroke, Text as StyleText, Circle as StyleCircle} from 'ol/style'
import {Circle as GeomCircle, Point as GeomPoint, LineString as GeomLineString, Polygon as GeomPolygon} from 'ol/geom'
import Draw from 'ol/interaction/Draw'
import XYZ from "ol/source/XYZ"
import 'ol/ol.css'

export default {
    name: 'mapBox',
    props: ['routeRange', 'isDetail'],
    data () {
        return {
            map: null,
            points: [],
            // 线条点数组
            linePoints: [],
            // 多边形数组
            polygonPoints: [],
            draw: null,
            drawLayer: null,
            lineVector: null,
            pointVector: null,
            polygonVector:null,
            coordinates: [],// 保存绘画坐标地址   [[115.90490549080435, 28.746101718722358],[115.93151300423209, 28.741123538790717]]
            toData: null,// 保存数据库格式坐标地址
            showTip: false,
            tipPosition: {//提示的位置
                w: 200,
                h: 10,
            },
            tipTitle: null
        }
    },
    methods: {

        createMap () {
            let _this = this

            _this.map = new Map({
                target: 'map',
                layers: [
                    new TileLayer({
                        source: new XYZ({
                            url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
                        })
                    }),

                ],
                view: new View({
                    // 设置中心点，默认南昌，用于规划南昌市的路线
                    center: [115.9032747077233, 28.67433116990186],
                    projection: 'EPSG:4326',
                    // 设置缩放倍数
                    zoom: 13,
                    minZoom: 8,
                    maxZoom: 19
                })
            })
            _this.lineVector = new VectorLayer({
                //layer所对应的source
                source: new VectorSource({
                    wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
                }),
            })
            _this.pointVector = new VectorLayer({
                //layer所对应的source
                source: new VectorSource({
                    wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
                }),
            })
            _this.polygonVector = new VectorLayer({
              //layer所对应的source
              source: new VectorSource({
                wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
              }),
            })
            _this.map.addLayer(_this.lineVector)
            _this.map.addLayer(_this.pointVector)
            _this.map.addLayer(_this.polygonVector)
            //在地图上回显线或点
            _this.startAdd(_this.routeRange)
        },
        // 绘画之后的样式
        styleFunction () {
            // 绘画之后的样式
            let styles = [
                new Style({
                    fill: new StyleFill({ color: "rgba(255, 255, 255, 0.2)" }),
                    stroke: new StyleStroke({
                        color: 'rgb(252, 94, 32)',
                        width: 5
                    })
                })
            ]
            return styles
        },
        // 添加线路
        addLineDraw (toData) {
            // toData = 'LINESTRING(115.90505364627936 28.740342332731327,115.9119724729309 28.74040302419318,115.90766337913915 28.73566909016844)'
            if (toData) {
                // 将数据库点坐标数据转换
                let entityData = ""
                let entityArr = []
                entityData = toData.match(/\(([^)]*)\)/)
                if (entityData && entityData != "") {
                    entityData = entityData[1].split(",")
                    for (let j = 0; j < entityData.length; j++) {
                        entityArr.push([
                            Number(entityData[j].split(" ")[0]),
                            Number(entityData[j].split(" ")[1]),
                        ])
                    }
                }
                // let lineCoords = [[115.90490549080435, 28.746101718722358],[115.93151300423209, 28.741123538790717],[115.90696542732779, 28.73408542233564],[115.90696542732779, 28.73408542233564]]
                let lineCoords = entityArr
                let view = this.map.getView()
                view.setCenter([
                    lineCoords[Math.ceil(lineCoords.length / 2)][0],
                    lineCoords[Math.ceil(lineCoords.length / 2)][1],
                ])
                view.setZoom(14.5)

                let feature_LineString = new Feature({
                    geometry: new LineString(lineCoords),
                })
                feature_LineString.setStyle(this.styleFunction())// 设置样式
                this.lineVector.getSource().addFeature(feature_LineString)
            }
        },
        // 添加点
        addPoint (pointLonLat) {
            // pointLonLat = POINT(115.87531914674 28.8603307485585)
            if (pointLonLat) {
                let pointData = ""
                let pointArray = []
                pointData = pointLonLat.match(/\(([^)]*)\)/)
                pointArray = pointData[1].split(" ")
                //设置点
                let feature_Point = new Feature({
                    geometry: new Point([Number(pointArray[0]), Number(pointArray[1])])
                })
                //点样式
                let style = new Style({
                    image: new Icon({
                        src: "/img/dwicon.jpeg",
                        anchor: [0.48, 0.52],
                        // imgSize: [250,320],
                        scale: 0.2
                    }),
                })
                feature_Point.setStyle(style)
                this.pointVector.getSource().addFeature(feature_Point)
                let center = [Number(pointArray[0]), Number(pointArray[1])]
                let view = this.map.getView()
                view.setZoom(16)
                view.animate({
                    center: center,
                    duration: 5,
                })
            }
        },
        //回显多边形区域
        addPolygon(area){

        },
        // 将点坐标集合转换为数据库数据
        doData (val) {
            let str = "LINESTRING("
            for (let k = 0; k < val.length; k++) {
                str += `${val[k][0]} ${val[k][1]}`
                if (k != val.length - 1) {
                    str += ","
                }
            }
            str =str +","+ `${val[0][0]} ${val[0][1]}`
            str += ")"
            // console.log(str)
            return '\'' + str + '\''
        },
        // 开始绘制
        point () {
            let _this = this
            _this.coordinates = []
            _this.map.removeInteraction(_this.draw)
            _this.polygonVector.getSource().clear()
            //提示
            if (!_this.showTip) {
                _this.showTip = true
            }
            _this.tipTitle = "单击左键或者右键开始绘画"
            //提示器
            function mapMousemove (e) {
                _this.setTipPosition(e.offsetX, e.offsetY, 5, 5)
            }
            this.$refs.MapContent.addEventListener('mousemove', mapMousemove)
          // this.$refs.MapContent.removeEventListener('mousemove', mapMousemove)

            function mapMousedown () {
                _this.tipTitle = "可继续，或选择最终位置双击结束绘画"
            }
            this.$refs.MapContent.addEventListener('mousedown', mapMousedown)
            // this.$refs.MapContent.removeEventListener('mousedown', mapMousedown)

            _this.draw = new Draw({
                source: _this.polygonVector.getSource(),
                type: 'Polygon',
                style: new Style({
                    stroke: new StyleStroke({
                        color: "red",
                        width: 3,
                    })
                }),
            })
            _this.map.addInteraction(_this.draw)
            // 点击事件
            _this.map.on('click', function (e) {
                // 将点坐标保存集合
                _this.coordinates.push(e.coordinate)
            })
            // 结束事件
            _this.draw.on('drawend', function () {

                _this.map.removeInteraction(_this.draw)
                _this.polygonVector.setStyle(_this.styleFunction())// 路线画好之后的样式
                // 将点坐标集合转换为数据库数据
                let toData = _this.doData(_this.coordinates)
                // 传值给父组件
                _this.$emit('toData', toData)
                //隐藏提示
                _this.tipTitle = null
                _this.showTip = false
            })

        },
        // 设置统一控制点击事件，需要画图方式在此处切换
        handleClick (point) {
            // 绘制连线
            this.drawLineString(point)
            // 绘制点
            // this.drawPoint(point)
            // 绘制圆形
            // this.drawCircle(point)
            // 绘制多边形
            // this.drawPolygon(point)
        },
        // 绘制点位
        drawPoint (center) {
            let vectorLayer = this.getLayer()

            let point = new GeomPoint(center)
            let feature = new Feature(point)
            vectorLayer.getSource().addFeature(feature)
            this.map.addLayer(vectorLayer)
        },
        // 绘制连线
        drawLineString (point) {
            this.linePoints.push(point)
            let featureLine = new Feature({
                geometry: new GeomLineString(this.linePoints),
            })

            // 添加线的样式
            let lineStyle = new Style({
                fill: new StyleFill({
                    color: 'rgba(1, 210, 241, 0.1)'
                }),
                stroke: new StyleStroke({
                    color: 'rgba(255, 0, 0)',
                    width: 4,
                }),
            })
            featureLine.setStyle(lineStyle)

            let source = new VectorSource()
            source.addFeature(featureLine)
            let layer = new VectorLayer()
            layer.setSource(source)
            this.map.addLayer(layer)
        },
        // 绘制区域圆形
        drawCircle (center) {
            let vectorLayer = this.getLayer()

            // 设置半径
            let circle = new GeomCircle(center, 0.003)// 新建圆对象
            let feature = new Feature(circle)// 新建Feature对象 并将circle传入
            vectorLayer.getSource().addFeature(feature)// 将Feature对象填入图层源
            this.map.addLayer(vectorLayer) // 将图层添至地图对象
        },
        // 画多边形
        drawPolygon (point) {
            this.polygonPoints.push(point)
            let feature = new Feature({
                geometry: new GeomPolygon([this.polygonPoints]),
                attributes: null
            })
            // 添加线的样式
            let lineStyle = new Style({
                fill: new StyleFill({
                    color: 'rgba(1, 210, 241, 0.1)'
                }),
                stroke: new StyleStroke({
                    color: 'rgba(255, 0, 0)',
                    width: 4,
                }),
            })
            feature.setStyle(lineStyle)
            let source = new VectorSource()
            source.addFeature(feature)
            let vectorLayer = new VectorLayer({
                source: source
            })
            this.map.addLayer(vectorLayer)
        },
        // 设置聚合点
        addMarker () {
            let source = new VectorSource()
            // 随机创建200个要素，后台点位取出后按此格式处理
            for (let i = 1; i <= 200; i++) {
                let coordinates = [115.90 + Math.random() * 0.05, 28.64 + Math.random() * 0.05]
                let feature = new Feature(new GeomPoint(coordinates))
                source.addFeature(feature)
            }

            // 聚合
            let clusterSource = new Cluster({
                source: source,
                distance: 50
            })

            let clusters = new VectorLayer({
                source: clusterSource,
                style: function (feature) {
                    let size = feature.get('features').length
                    let style = new Style({
                        image: new StyleCircle({
                            radius: 20,
                            stroke: new StyleStroke({
                                color: 'white'
                            }),
                            fill: new StyleFill({
                                color: '#AAD3DF'
                            })
                        }),
                        text: new StyleText({
                            text: size.toString(),
                            fill: new StyleFill({
                                color: 'black'
                            })
                        })
                    })
                    return style
                }
            })

            this.map.addLayer(clusters)
        },
        // 重置图层
        clearDraw () {
            let _this = this
            _this.coordinates = []
            _this.map.removeInteraction(_this.draw)
            _this.lineVector.getSource().clear()
            _this.showTip = false
            _this.tipTitle = null

            // 传值给父组件
            _this.$emit('toData', "")
        },
        // 获取新的 layer 图层对象
        getLayer () {
            return new VectorLayer({
                source: new VectorSource({
                    features: ''
                }),
                // 设置样式，但不完全兼容
                // style: function (feature) {
                //   let style = new Style({
                //     stroke: new StyleStroke({
                //       color: '#E80000',
                //       width: 2
                //     }),
                //     fill: new StyleFill({
                //       color: 'rgba(0,0,0,0)'
                //     })
                //   })
                //   return style
                // }
            })
        },
        // 设置提示位置
        setTipPosition (x, y, n, m) {
            let _this = this
            _this.tipPosition.w = x + n
            _this.tipPosition.h = y + m
        },
        startAdd (routeRange) {
            if (routeRange.startsWith("LINESTRING")) {
                this.addLineDraw(routeRange)
            } else if (routeRange.startsWith("POINT")) {
                this.addPoint(routeRange)
            } else if (routeRange.startsWith("POLYGON")){
              this.addPolygon(routeRange)
            }
        }
    },
    mounted () {
        this.createMap()
  name: 'mapBox',
  props: ['routeRange', 'isDetail', "searchMap"],
  data() {
    return {
      map: null,
      points: [],
      // 线条点数组
      linePoints: [],
      // 多边形数组
      polygonPoints: [],
      draw: null,
      drawLayer: null,
      lineVector: null,
      pointVector: null,
      polygonVector: null,
      coordinates: [],// 保存绘画坐标地址   [[115.90490549080435, 28.746101718722358],[115.93151300423209, 28.741123538790717]]
      toData: null,// 保存数据库格式坐标地址
      showTip: false,
      tipPosition: {//提示的位置
        w: 200,
        h: 10,
      },
      tipTitle: null
    }
  },
  methods: {

    createMap() {
      let _this = this

      _this.map = new Map({
        target: 'map',
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
            })
          }),

        ],
        view: new View({
          // 设置中心点，默认南昌，用于规划南昌市的路线
          center: [117.951478782, 28.447896798],
          projection: 'EPSG:4326',
          // 设置缩放倍数
          zoom: 13,
          minZoom: 8,
          maxZoom: 19
        })
      })

      _this.lineVector = new VectorLayer({
        //layer所对应的source
        source: new VectorSource({
          wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
        }),
      })
      _this.pointVector = new VectorLayer({
        //layer所对应的source
        source: new VectorSource({
          wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
        }),
      })
      _this.polygonVector = new VectorLayer({
        //layer所对应的source
        source: new VectorSource({
          wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
        }),
      })
      _this.map.addLayer(_this.lineVector)
      _this.map.addLayer(_this.pointVector)
      _this.map.addLayer(_this.polygonVector)
      //在地图上回显线或点
      _this.startAdd(_this.routeRange)
    },
    // 绘画之后的样式
    styleFunction() {
      // 绘画之后的样式
      let styles = [
        new Style({
          fill: new StyleFill({color: "rgba(255, 255, 255, 0.2)"}),
          stroke: new StyleStroke({
            color: 'rgb(252, 94, 32)',
            width: 5
          })
        })
      ]
      return styles
    },
    // 添加线路
    addLineDraw(toData) {
      // toData = 'LINESTRING(115.90505364627936 28.740342332731327,115.9119724729309 28.74040302419318,115.90766337913915 28.73566909016844)'
      if (toData) {
        // 将数据库点坐标数据转换
        let entityData = ""
        let entityArr = []
        entityData = toData.match(/\(([^)]*)\)/)
        if (entityData && entityData != "") {
          entityData = entityData[1].split(",")
          for (let j = 0; j < entityData.length; j++) {
            entityArr.push([
              Number(entityData[j].split(" ")[0]),
              Number(entityData[j].split(" ")[1]),
            ])
          }
        }
        // let lineCoords = [[115.90490549080435, 28.746101718722358],[115.93151300423209, 28.741123538790717],[115.90696542732779, 28.73408542233564],[115.90696542732779, 28.73408542233564]]
        let lineCoords = entityArr
        let view = this.map.getView()
        view.setCenter([
          lineCoords[Math.ceil(lineCoords.length / 2)][0],
          lineCoords[Math.ceil(lineCoords.length / 2)][1],
        ])
        view.setZoom(14.5)

        let feature_LineString = new Feature({
          geometry: new LineString(lineCoords),
        })
        feature_LineString.setStyle(this.styleFunction())// 设置样式
        this.lineVector.getSource().addFeature(feature_LineString)
      }
    },
    // 添加点
    addPoint(pointLonLat) {
      // pointLonLat = POINT(115.87531914674 28.8603307485585)
      if (pointLonLat) {
        let pointData = ""
        let pointArray = []
        pointData = pointLonLat.match(/\(([^)]*)\)/)
        pointArray = pointData[1].split(" ")
        //设置点
        let feature_Point = new Feature({
          geometry: new Point([Number(pointArray[0]), Number(pointArray[1])])
        })
        //点样式
        let style = new Style({
          image: new Icon({
            src: "/img/dwicon.jpeg",
            anchor: [0.48, 0.52],
            // imgSize: [250,320],
            scale: 0.2
          }),
        })
        feature_Point.setStyle(style)
        this.pointVector.getSource().addFeature(feature_Point)
        let center = [Number(pointArray[0]), Number(pointArray[1])]
        let view = this.map.getView()
        view.setZoom(16)
        view.animate({
          center: center,
          duration: 5,
        })
      }
    },
    // 将点坐标集合转换为数据库数据
    doData(val) {
      let str = "LINESTRING("
      for (let k = 0; k < val.length; k++) {
        str += `${val[k][0]} ${val[k][1]}`
        if (k != val.length - 1) {
          str += ","
        }
      }
      str = str + "," + `${val[0][0]} ${val[0][1]}`
      str += ")"
      // console.log(str)
      return '\'' + str + '\''
    },
    // 开始绘制
    point() {
      let _this = this
      _this.coordinates = []
      _this.map.removeInteraction(_this.draw)
      _this.polygonVector.getSource().clear()
      //提示
      if (!_this.showTip) {
        _this.showTip = true
      }
      _this.tipTitle = "单击左键或者右键开始绘画"

      //提示器
      function mapMousemove(e) {
        _this.setTipPosition(e.offsetX, e.offsetY, 5, 5)
      }

      this.$refs.MapContent.addEventListener('mousemove', mapMousemove)

      // this.$refs.MapContent.removeEventListener('mousemove', mapMousemove)

      function mapMousedown() {
        _this.tipTitle = "可继续，或选择最终位置双击结束绘画"
      }

      this.$refs.MapContent.addEventListener('mousedown', mapMousedown)
      // this.$refs.MapContent.removeEventListener('mousedown', mapMousedown)

      _this.draw = new Draw({
        source: _this.polygonVector.getSource(),
        type: 'Polygon',
        style: new Style({
          stroke: new StyleStroke({
            color: "red",
            width: 3,
          })
        }),
      })
      _this.map.addInteraction(_this.draw)
      // 点击事件
      _this.map.on('click', function (e) {
        // 将点坐标保存集合
        _this.coordinates.push(e.coordinate)
      })
      // 结束事件
      _this.draw.on('drawend', function () {

        _this.map.removeInteraction(_this.draw)
        _this.polygonVector.setStyle(_this.styleFunction())// 路线画好之后的样式
        // 将点坐标集合转换为数据库数据
        let toData = _this.doData(_this.coordinates)
        // 传值给父组件
        _this.$emit('toData', toData)
        //隐藏提示
        _this.tipTitle = null
        _this.showTip = false
      })

    },
    // 设置统一控制点击事件，需要画图方式在此处切换
    handleClick(point) {
      // 绘制连线
      this.drawLineString(point)
      // 绘制点
      // this.drawPoint(point)
      // 绘制圆形
      // this.drawCircle(point)
      // 绘制多边形
      // this.drawPolygon(point)
    },
    // 绘制点位
    drawPoint(center) {
      let vectorLayer = this.getLayer()

      let point = new GeomPoint(center)
      let feature = new Feature(point)
      vectorLayer.getSource().addFeature(feature)
      this.map.addLayer(vectorLayer)
    },
    // 绘制连线
    drawLineString(point) {
      this.linePoints.push(point)
      let featureLine = new Feature({
        geometry: new GeomLineString(this.linePoints),
      })

      // 添加线的样式
      let lineStyle = new Style({
        fill: new StyleFill({
          color: 'rgba(1, 210, 241, 0.1)'
        }),
        stroke: new StyleStroke({
          color: 'rgba(255, 0, 0)',
          width: 4,
        }),
      })
      featureLine.setStyle(lineStyle)

      let source = new VectorSource()
      source.addFeature(featureLine)
      let layer = new VectorLayer()
      layer.setSource(source)
      this.map.addLayer(layer)
    },
    // 绘制区域圆形
    drawCircle(center) {
      let vectorLayer = this.getLayer()

      // 设置半径
      let circle = new GeomCircle(center, 0.003)// 新建圆对象
      let feature = new Feature(circle)// 新建Feature对象 并将circle传入
      vectorLayer.getSource().addFeature(feature)// 将Feature对象填入图层源
      this.map.addLayer(vectorLayer) // 将图层添至地图对象
    },
    // 画多边形
    drawPolygon(point) {
      this.polygonPoints.push(point)
      let feature = new Feature({
        geometry: new GeomPolygon([this.polygonPoints]),
        attributes: null
      })
      // 添加线的样式
      let lineStyle = new Style({
        fill: new StyleFill({
          color: 'rgba(1, 210, 241, 0.1)'
        }),
        stroke: new StyleStroke({
          color: 'rgba(255, 0, 0)',
          width: 4,
        }),
      })
      feature.setStyle(lineStyle)
      let source = new VectorSource()
      source.addFeature(feature)
      let vectorLayer = new VectorLayer({
        source: source
      })
      this.map.addLayer(vectorLayer)
    },
    // 设置聚合点
    addMarker() {
      let source = new VectorSource()
      // 随机创建200个要素，后台点位取出后按此格式处理
      for (let i = 1; i <= 200; i++) {
        let coordinates = [115.90 + Math.random() * 0.05, 28.64 + Math.random() * 0.05]
        let feature = new Feature(new GeomPoint(coordinates))
        source.addFeature(feature)
      }

      // 聚合
      let clusterSource = new Cluster({
        source: source,
        distance: 50
      })

      let clusters = new VectorLayer({
        source: clusterSource,
        style: function (feature) {
          let size = feature.get('features').length
          let style = new Style({
            image: new StyleCircle({
              radius: 20,
              stroke: new StyleStroke({
                color: 'white'
              }),
              fill: new StyleFill({
                color: '#AAD3DF'
              })
            }),
            text: new StyleText({
              text: size.toString(),
              fill: new StyleFill({
                color: 'black'
              })
            })
          })
          return style
        }
      })

      this.map.addLayer(clusters)
    },
    // 重置图层
    clearDraw() {
      let _this = this
      _this.coordinates = []
      _this.map.removeInteraction(_this.draw)
      _this.lineVector.getSource().clear()
      _this.showTip = false
      _this.tipTitle = null

      // 传值给父组件
      _this.$emit('toData', "")
    },
    // 获取新的 layer 图层对象
    getLayer() {
      return new VectorLayer({
        source: new VectorSource({
          features: ''
        }),
        // 设置样式，但不完全兼容
        // style: function (feature) {
        //   let style = new Style({
        //     stroke: new StyleStroke({
        //       color: '#E80000',
        //       width: 2
        //     }),
        //     fill: new StyleFill({
        //       color: 'rgba(0,0,0,0)'
        //     })
        //   })
        //   return style
        // }
      })
    },
    // 设置提示位置
    setTipPosition(x, y, n, m) {
      let _this = this
      _this.tipPosition.w = x + n
      _this.tipPosition.h = y + m
    },
    startAdd(routeRange) {
      if (routeRange) {
        if (routeRange.startsWith("LINESTRING")) {
          this.addLineDraw(routeRange)
        } else if (routeRange.startsWith("POINT")) {
          this.addPoint(routeRange)
        }
      }
    }
  },
  mounted() {
    this.createMap()
  }

}
</script>

<style>
.mapTip {
    background-color: rgb(168, 168, 168);
    padding: 5px;
    border: 1px solid #000;
    position: absolute;
    z-index: 10 !important;
    border-radius: 5px;
  background-color: rgb(168, 168, 168);
  padding: 5px;
  border: 1px solid #000;
  position: absolute;
  z-index: 10 !important;
  border-radius: 5px;
}
</style>