OpenLayer——加载百度地图。

GIS兵墩墩

已于 2022-04-10 12:48:08 修改

阅读量3.7k

点赞数

分类专栏： OpenLayer 文章标签： Openlayer

于 2020-01-02 16:17:02 首次发布

GIS-TeZhanBing

本文链接：https://blog.csdn.net/qq_24641385/article/details/103806207

版权

OpenLayer 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

本文介绍如何解决百度地图与OpenLayers坐标系不匹配的问题，通过调整瓦片的xy编号，实现百度地图在OpenLayers中的正确加载。文章提供了详细的代码示例，包括对横向编号的特殊处理和纵向编号的取反操作。

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

问题：由于百度地图原点在右下角，ol的在左上角。所以在ol里加载会需要对瓦片的xy编号做一些处理。

注意两点：1：横向编号小于0时改为M|x|如（-7改为 M7），纵向编号始终取反。

代码：

<template>
  <div class="container">
    <div class="title">
      <h3>百度地图</h3>
      <el-button type="primary" @click="backHome">返回Home</el-button><br />
    </div>
    <div id="map" class="map">
      <div id="mouse-position"></div>
    </div>
  </div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import { Tile } from "ol/layer";
import { XYZ, TileImage } from "ol/source";
import TileGrid from "ol/tilegrid/TileGrid";
import { defaults, MousePosition } from "ol/control";
import { transform } from "ol/proj";

export default {
  data() {
    return {
      map: {}
    };
  },
  mounted() {
    this.initmap();
  },
  methods: {
    initmap() {
      let resolutions = [];
      let baiduX,baiduY;

      for (let i = 0; i < 19; i++) {
        resolutions[i] = Math.pow(2, 18 - i);
      }
      let tilegrid = new TileGrid({
        origin: [0, 0],
        resolutions: resolutions
      });
      
      let baidu_source = new TileImage({
        projection:"EPSG:3857",
        tileGrid: tilegrid,
        tileUrlFunction: function(tileCoord) {
          if (!tileCoord)  return "";
          let z = tileCoord[0];
          let x = tileCoord[1];
          let y = tileCoord[2];
          // 对编号xy处理
          baiduX = (x<0) ? x : 'M'+(-x);
          baiduY = -y;
          return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x="+baiduX+"&y="+baiduY+"&z="+z+"&styles=pl&udt=20151021&scaler=1&p=1";
        }
      });

      let baidu_layer = new Tile({
        source: baidu_source
      });

      let map = new Map({
        target: "map",
        layers: [baidu_layer],
        view: new View({
          projection: "EPSG:3857", 
          center: [13531290.967373039, 4675318.865056401],
          zoom: 12
        }),
        // 显示鼠标位置坐标
        controls: defaults().extend([
          new MousePosition({
            target: document.getElementById("mouse-position")
          })
        ])
      });
    },
    backHome() {
      this.$router.replace("/"); 
    }
  }
};
</script>

<style scoped></style>