对于一般瓦片来说,origin在左上角,X轴从左至右递增,Y轴是从上往下递增(先计算左上角,然后计算右下角)
但是,百度瓦片Origin在[0,0],X轴从左至右递增,Y轴从下往上递增(从左下角到右上角)
所以,就要在tileUrlFunction上下点功夫了,废话不多说,直接撸代码吧:
<!--
* @Author: yang xiunan
* @Date: 2020-10-31 16:03:42
* @LastEditTime: 2020-11-09 09:51:18
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \ol6d:\myCode\ol5\src\components\HelloWorld.vue
-->
<template>
<div class="box">
<div id="map"></div>
</div>
</template>
<script>
/* eslint-disable */
import Map from "ol/Map";
import View from "ol/View";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Fill, Icon, Stroke, Style, Text } from "ol/style";
import TileGrid from "ol/tilegrid/TileGrid";
import TileImage from "ol/source/TileImage";
import Tile from "ol/layer/Tile";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
export default {
name: "HelloWorld",
mounted() {
let center = [108.946994, 34.261361];
let resolutions = [];
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, pixelRatio, proj) {
if (!tileCoord) {
return "";
}
let z = tileCoord[0];
let x = tileCoord[1];
let y = tileCoord[2];
if (x < 0) {
x = "M" + -x;
}
if (y < 0) {
y = "M" + -y;
}
return (
// "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" +
// x +
// "&y=" +
// y +
// "&z=" +
// z +
// "&styles=pl&udt=20151021&scaler=1&p=1"
"https://api.map.baidu.com/customimage/tile?&x=" +
x +
"&y=" +
y +
"&z=" +
z +
"&udt=20201022&scale=1&styles=t%3Aland%7Ce%3Aall%7Cc%3A%2300121cff%2Ct%3Awater%7Ce%3Aall%7Cc%3A%2300445dff%2Ct%3Ahighway%7Ce%3Aall%7Cc%3A%2307313fff%2Ct%3Asubway%7Ce%3Aall%7Cv%3Aoff%2Ct%3Aarterial%7Ce%3Aall%7Cv%3Aon%7Cc%3A%23003242ff%2Ct%3Agreen%7Ce%3Aall%7Cv%3Aoff%2Ct%3Alabel%7Ce%3Al.t.s%7Cv%3Aon%7Cc%3A%2335bd8500%2Ct%3Arailway%7Ce%3Aall%7Cv%3Aoff%2Ct%3Alabel%7Ce%3Al.t.f%7Cv%3Aon%7Cc%3A%2335bd85ff%7Cw%3A1%2Ct%3Abuilding%7Ce%3Aall%7Cv%3Aon%7Cc%3A%231692beff%2Ct%3Amanmade%7Ce%3Aall%7Cv%3Aoff%2Ct%3Agreen%7Ce%3Aall%7Cv%3Aoff%2Ct%3Apoi%7Ce%3Al.t.f%7Cv%3Aon%7Cc%3A%2335bd85ff%2Ct%3Apoi%7Ce%3Al.t.s%7Cv%3Aon%7Cc%3A%2335bd8500%2Ct%3Apoi%7Ce%3Al.i%7Cv%3Aoff%2Ct%3Alocal%7Ce%3Aall%7Cv%3Aoff%2Ct%3Aroad%7Ce%3Al.i%7Cv%3Aoff"
);
},
});
let baidu_layer = new Tile({
source: baidu_source,
});
let iconFeature = new Feature({
geometry: new Point(center),
name: "Null Island",
population: 4000,
rainfall: 500,
});
let iconStyle = new Style({
image: new Icon({
scale: 1,
// anchorXUnits: 'fraction',
// anchorYUnits: 'pixels',
src: require("../assets/police.png"),
}),
});
iconFeature.setStyle(iconStyle);
let vectorSource = new VectorSource({
features: [iconFeature],
});
let vectorLayer = new VectorLayer({
source: vectorSource,
});
let map = new Map({
target: "map",
layers: [baidu_layer, vectorLayer],
view: new View({
center: center,
zoom: 11,
projection: "EPSG:4326",
}),
});
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#map {
width: 100%;
height: 100vh;
}
</style>
加载出来效果如下:
地图是加载出来了,但是偏移严重,我设置的中心点108.946994, 34.261361,是西安钟楼的,但是加载出来,位置都偏移到北三环以外了。
怎么解决偏移问题呢,我们下节再聊。