[JavaScript知识库]openlayers + geoserver + vue3.0

openlayers
geoserver.vue 代码

<template>
  <div>
    <div id="map" class="map"></div>
    <div id="info">&nbsp;</div>
    <div id="popup" class="ol-popup">
      <a id="popup-closer" class="ol-popup-closer" href="#"></a>
      <div id="popup-content"></div>
    </div>
  </div>
</template>
<script>
import 'ol/ol.css'
import Map from 'ol/Map'
import TileWMS from 'ol/source/TileWMS'
import View from 'ol/View'
import {Vector as VectorSource, XYZ} from 'ol/source'
import {defaults as defaultControls} from 'ol/control'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'
import Overlay from 'ol/Overlay'
import {toLonLat} from 'ol/proj'
import {toStringHDMS} from 'ol/coordinate'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import {Icon, Style} from 'ol/style'

export default {
  name: 'geoserverMap',
  data: function () {
    return {
      title: 'geoserver'
    }
  },
  mounted () {
    this.initNew()
    let aa = {
      x: 106.51042127821181,
      y: 29.601409233940974
    }
    this.lonlatTomercator(aa);
  },
  methods: {

    // 经纬度转墨卡托投影坐标
    lonlatTomercator (lonlat) {
      var mercator = {x: 0, y: 0}
      var x = lonlat.x * 20037508.34 / 180
      var y = Math.log(Math.tan((90 + lonlat.y) * Math.PI / 360)) / (Math.PI / 180)
      y = y * 20037508.34 / 180
      mercator.x = x
      mercator.y = y
      console.log('坐标系投影：')
      console.log(x)
      console.log(y)
      return mercator
    },
    initNew () {
      var iconFeature = new Feature({
        geometry: new Point([106.51042127821181, 29.601409233940974]),
        name: 'Null Island',
        population: 4000,
        rainfall: 500,
      })

      var iconStyle = new Style({
        image: new Icon({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: '../../../static/map-title.png',
        }),
      })

      iconFeature.setStyle(iconStyle)

      var vectorSource = new VectorSource({
        features: [iconFeature],
      })

      var vectorLayer = new VectorLayer({
        source: vectorSource,
      })


      // poput
      var container = document.getElementById('popup')
      var content = document.getElementById('popup-content')
      var closer = document.getElementById('popup-closer')
      var overlay = new Overlay({
        element: container
      })

      closer.onclick = function () {
        overlay.setPosition(undefined)
        closer.blur()
        return false
      }

      this.source = new VectorSource()
      this.editSource = new VectorSource()
      this.vector = new VectorLayer(
          {
            source: this.source
          }
      )
      var wmsSource = new TileWMS({
        url: 'http://192.168.1.200:8880/geoserver/dum/wms',
        params: {
          'LAYERS': 'dum:qianjiang_dywg',
          'TILED': true,
          'STYLES': ''
        },
        serverType: 'geoserver',
        crossOrigin: 'anonymous',
      })

      var appMap = new TileLayer({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
          // url: 'http://t4.tianditu.com/DataServer?T=vec_w&tk=9337647a52919b1dd3bc009c730b07a7&x={x}&y={y}&l={z}'
          // url: 'http://t4.tianditu.com/DataServer?T=vec_w&tk=9337647a52919b1dd3bc009c730b07a7&x={x}&y={y}&l={z}'
          // url: 'http://t4.tianditu.com/DataServer?T=vec_w&tk=9337647a52919b1dd3bc009c730b07a7&x={x}&y={y}&l={z}'
        })
      })

      var wmsLayer = new TileLayer({
        source: wmsSource,
      })

      var view = new View({
        projection: 'EPSG:4326',
        center: [108.798964085552, 29.525997184232],
        zoom: 10,
        minZoom: 3,
        maxZoom: 18
      })

      var map = new Map({
        target: 'map',
        controls: defaultControls({
          zoom: false
        }),
        layers: [appMap, wmsLayer, vectorLayer],
        overlays: [overlay],
        view: view,
      })

      map.on('singleclick', function (evt) {
        document.getElementById('info').innerHTML = ''
        var viewResolution = /** @type {number} */ (view.getResolution())
        var url = wmsSource.getFeatureInfoUrl(
            evt.coordinate,
            viewResolution,
            // 'EPSG:3857',
            'EPSG:4326',
            {'INFO_FORMAT': 'application/json'}
        )
        if (url) {
          console.log(url)
          fetch(url).then(function (response) {
            return response.text()
          }).then(function (html) {
            document.getElementById('info').innerHTML = html
            var coordinate = evt.coordinate
            var hdms = toStringHDMS(toLonLat(coordinate))
            content.innerHTML = '<p>You clicked here:</p><code>' + hdms + '</code>'
            overlay.setPosition(coordinate)
          })
        }
      })

      map.on('pointermove', function (evt) {
        if (evt.dragging) {
          return
        }
        var pixel = map.getEventPixel(evt.originalEvent)
        var hit = map.forEachLayerAtPixel(pixel, function () {
          return true
        })
        map.getTargetElement().style.cursor = hit ? 'pointer' : ''
      })
    }
  }
}
</script>
<style scoped>
.map {
  width: 2600px;
  height: 1600px;
}

.ol-popup {
  position: absolute;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 280px;
}

.ol-popup:after, .ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "?";
}
</style>