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

最新推荐文章于 2024-08-22 15:41:10 发布

L.傲骨雄风

最新推荐文章于 2024-08-22 15:41:10 发布

阅读量1k

点赞数 3

分类专栏： arcgis desktop arcgis-js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/xlp789/article/details/126493469

版权

arcgis-js 同时被 2 个专栏收录

42 篇文章 4 订阅

订阅专栏

arcgis desktop

8 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

<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/tile/{z}/{y}/{x}'
      // 坐标原点
      var gasOrigin = [-5685313.720203, 1.1002161202151e7]
      // 分辨率
      var gasResolutions = [
        132.2919312505292, 66.1459656252646, 33.0729828126323,
        16.933367200067735, 8.466683600033868, 4.233341800016934,
        2.116670900008467, 1.0583354500042335, 0.5291677250021167,
        0.26458386250105836, 0.13229193125052918, 0.05291677250021167,
      ]
      //地图范围
      var gasExtent = [
        375192.85914757306, 4584080.358053767, 708568.5258989064,
        4767807.392174504,
      ]
      var gasTileGrid = new TileGrid({
        tileSize: 256,
        origin: gasOrigin,
        extent: gasExtent,
        resolutions: gasResolutions,
      })
      // 瓦片数据源
      var gasTileArcGISXYZ = new XYZ({
        tileGrid: gasTileGrid,
        projection: projection,
        url: gasTileUrl,
      })
      var gasTiledLayer = new TileLayer({
        source: gasTileArcGISXYZ,
      })
      /******管网图arcgis切片服务*****/

      this.map = new Map({
        target: 'map', // 指向对象
        layers: [
          //天地图矢量图
          new TileLayer({
            title: 'generalMap',
            source: new XYZ({
              url: 'http://t{0-4}.tianditu.com/DataServer?T=vec_w&tk=4b22be0676d3c56757b865f958bff6b2&x={x}&y={y}&l={z}',
              crossOrigin: 'anonymous',
            }),
          }),
          //天地图注记图
          new TileLayer({
            title: 'annotaion',
            source: new XYZ({
              url: 'http://t{0-4}.tianditu.com/DataServer?T=cva_w&tk=4b22be0676d3c56757b865f958bff6b2&x={x}&y={y}&l={z}',
              crossOrigin: 'anonymous',
            }),
          }),

          gasTiledLayer,
        ],
        view: new View({
          center: [535611.8308589214, 4626752.94823888],
          projection: projection,
          zoom: 12,
        }),
      })
      this.map.on('click', (ev) => {
        console.log(ev.coordinate)
      })
    },
  },
}
</script>
<style lang="less" scoped>
html,
body {
  margin: 0;
  height: 100%;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
</style>