openlayers7.0.0添加天地图以及与2000高斯投影（4550）叠加展示

最新推荐文章于 2025-10-27 21:16:52 发布

原创

最新推荐文章于 2025-10-27 21:16:52 发布 · 1.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

该博客展示了如何在Vue.js应用中使用OpenLayers库集成ArcGIS切片服务和天地图服务。通过定义投影、创建瓦片网格和数据源，实现了管网图与天地图矢量图、注记图的叠加显示，并添加了点击事件监听坐标。

<template>
  <div id="map" ref="map"></div>
</template>
<script>
import TileLayer from 'ol/layer/Tile'
import { XYZ } from 'ol/source'
import { Map, View } from 'ol'
import Projection from 'ol/proj/Projection'
import { register } from 'ol/proj/proj4'
import proj4 from 'proj4'
import TileGrid from 'ol/tilegrid/TileGrid'

export default {
  data() {
    return {
      map: null,
    }
  },
  created() {},
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      proj4.defs(
        'EPSG:4550',
        '+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs'
      )

      register(proj4)

      const projection = new Projection({
        code: 'EPSG:4550',
        units: 'm',
        axisOrientation: 'neu',
        global: false,
      })

      /*****管网图arcgis切片服务*****/
      var gasTileUrl =
        'http://******:6080/arcgis/rest/services/%E7%87%83%E6%B0%94%E7%AE%A1%E7%BD%91/MapServer