initMap

<template>
  <div id="openlayer-map-container"></div>
</template>

<script>
import 'ol/ol.css'
import {Map, View} from 'ol'
import TileLayer from "ol/layer/Tile";
import {TileWMS, XYZ} from "ol/source";
import {Zoom} from "ol/control";
import {fromLonLat, toLonLat} from "ol/proj";
import {showDialog} from "@/utils/projectFunc";

export default {
  name: 'openlayers-map',
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap()
    })
  },
  methods: {
    initMap() {
      this.map = new Map({
        target: 'openlayer-map-container',
        layers: [
          // this.xysGetTDT('vec', 'w'),
          // this.xysGetTDT('ibo', 'w')
        ],
        view: new View({
          projection: 'EPSG:3857',// 投影坐标系
          center: fromLonLat([116, 40]), // 地图中心

          zoom: 2.6,// 当前缩放数

        }),
        controls: [
          new Zoom()
        ]
      });

      let layer = new TileLayer({
        source: new TileWMS({
          url: 'http://43.143.213.90:8080/geoserver/xys/wms?',
          params: {
            LAYERS: 'xys:world',
            TILED: true,
            cql_filter: '"国家编"=156'
          },
        }),
      });
      this.map.addLayer(layer)

    },
    xysGetTDT(type = 'vec', projectionWay = 'w') {
      let typeObj = {
        'vec': '矢量底图',
        'cva': '矢量注记',

        'img': '影像底图',
        'cia': '影像注记',

        'ter': '地形晕渲',
        'cta': '地形注记',

        'ibo': '全球境界',

        'eva': '矢量英文注记',
        'eia': '影像英文注记',
      }
      let projectionWayObj = {
        'c': '经纬度投影',
        'w': '球面墨卡托投影',
      }
      if (!typeObj[type]) {
        return '地图类型不存在'
      }
      if (!projectionWayObj[projectionWay]) {
        return '投影方式不存在'
      }

      let sourceOption = {}
      if (projectionWay === 'c') {
        sourceOption.projection = 'EPSG:4326'
      } else {
        sourceOption.projection = 'EPSG:3857'
      }

      let layer = new TileLayer({
        source: new XYZ({
          url: 'https://t0.tianditu.gov.cn/DataServer?T=' + type + '_' + projectionWay + '&x={x}&y={y}&l={z}&tk=6d6732d7f432d1a70b3c0c9fc0e4d8fd',
          ...sourceOption
        }),
      })

      layer.id = '天地图:' + type + ':' + projectionWay;
      layer.type = '天地图';
      return layer;
    },


    // addWmsLayer(url, layers, id) {
    //   let layer = new TileLayer({
    //     source: new TileWMS({
    //       url,
    //       params: {
    //         LAYERS: layers,
    //         TILED: true,
    //         cql_filter: 'mine_code=22001'
    //       },
    //     }),
    //   });
    //   layer.id = id
    //   this.map.addLayer(layer)
    // },


  }
}
</script>

<style lang="scss" scoped>
#openlayer-map-container {
  width: 1000px;
  height: 500px;
}
</style>