OpenLayer——加载百度地图。

问题：由于百度地图原点在右下角，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>

OpenLayer——加载百度地图。相关推荐

使用OpenLayer加载百度地图（无偏移）
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer完美无偏移加载百度离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/ope ...
angular使用openlayers6以及加载百度地图
angular中使用openlayers本来是没什么难度的,但是如果要加载百度地图还是有些问题的,在openlayers3中坐标是从原点右上递增,而openlayers6中是右下递增,这就导致使用百度 ...
FGMap学习之--加载百度地图
今天我们用FGMap来加载百度地图数据. 从目前国内的地图服务商提供的地图来看,地图瓦片切图规则只少分为三种.其中Google Map.Bing地图.MapABC.QQ地图是一类,而百度地图.搜狗地图 ...
Openlayers3 加载百度地图，天地图
2019独角兽企业重金招聘Python工程师标准>>> openlayers3 加载百度地图: var projection = ol.proj.get("EPSG:385 ...
（转） Arcgis for js加载百度地图
http://blog.csdn.net/gisshixisheng/article/details/44853709 概述: 在前面的文章里提到了Arcgis for js加载天地图,在本节,继续讲 ...
【百度地图】——利用三级联动加载百度地图
[百度地图]--利用三级联动加载百度地图 HTML+CSS代码如下: <!DOCTYPE html> <html lang="en"><head> ...
leaflet、cesium加载百度地图，加载自定义样式百度地图
1 leaflet.cesium加载百度地图(官方预设样式) 预留,待补充 2 leaflet.cesium加载百度自定义样式地图样式编辑器新版地址:http://lbsyun.baidu.com/ ...
Leaflet加载百度地图
为了验证一下百度地图的影像.矢量.注记等瓦片数据是否是坐标统一的,写了一个简单的leaflet加载百度影像瓦片.矢量瓦片.注记瓦片的页面,叠加在一起,看了一下,果然坐标系是统一的. <!DOCT ...
openlayers加载百度地图作为底图坐标偏移的解决办法
openlayers加载天地图作为底图,在网上找了公开的服务资源,要做到百度地图与天地图之间切换,同样也从网上找到百度地图的服务资源但是在地图上坐标总是有偏差,最初的代码是这样的: var proje ...

OpenLayer——加载百度地图。

OpenLayer——加载百度地图。相关推荐

最新文章

热门文章