antvis / L7

🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis engine.

Home Page:https://l7.antv.antgroup.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

使用天地图后,出现两张底图

amssedzeta opened this issue · comments

问题描述

引入天地图后,缩放为3,向下拖动地图,在上层地图的下方,会出现和上层地图一样的地图。

重现链接

No response

重现步骤

代码使用vue3框架,框架引入了pinia,scss,使用ts语法。由于是测试L7使用天地图的,所以是新建的框架,都是默认的设置,再没有引入其它第三方库。

这是app页面
`

<script setup lang="ts"> import { RouterLink, RouterView } from "vue-router"; </script>
L7Map
<style lang="scss"> body{ margin: 0; #content{ height: 100vh; } } </style> <style lang="scss" scoped> .route-box { position: fixed; top: 30px; left: 30px; z-index: 10; .link { color: rgba(255, 0, 0, 0.25); font-size: 16px; font-weight: bold; padding: 4px 10px; border-radius: 5px; background: #60b779; text-decoration: none; margin: 0 10px; } .active { color: #ca5a07; background: #71db90; padding: 4px 12px; } } </style>

`

这是地图页面
`

<script setup lang="ts"> import { Scene, RasterLayer, PointLayer } from "@antv/l7"; import { TMap, GaodeMap } from "@antv/l7-maps";

// const scene = new Scene({
// id: 'map',
// map: new GaodeMap({
// style: 'dark', // 样式URL
// center: [90.268, 40.3628],
// pitch: 0,
// zoom: 3,
// token: 'be9440d2cf56ab94327bb0b7fb82324e',
// }),
// });
const scene = new Scene({
id: "map",
map: new TMap({
center: [90.268, 40.3628],
zoom: 3,
}),
});
scene.on("loaded", () => {
// 底图服务
const baseLayer = new RasterLayer({ zIndex: 1 }).source(
"https://t0.tianditu.gov.cn/DataServer?T=vec_c&X={x}&Y={y}&L={z}&tk=b15e548080c79819617367d3f6095c69",
{
parser: {
type: "rasterTile",
tileSize: 256,
},
}
);
// 注记服务
// const annotionLayer = new RasterLayer({ zIndex: 2 }).source(
// "https://t0.tianditu.gov.cn/DataServer?T=cva_c&X={x}&Y={y}&L={z}&tk=b15e548080c79819617367d3f6095c69",
// {
// parser: {
// type: "rasterTile",
// tileSize: 256,
// },
// }
// );
scene.addLayer(baseLayer);
// scene.addLayer(annotionLayer);
});
</script>

`

预期行为

No response

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频(可选)

微信图片_20240502021222

补充说明(可选)

No response

Hi @amssedzeta, Please star this repo if you find it useful! Thanks ⭐!
你好~ @amssedzeta 🌟 如果这个仓库对你有帮助,可以给我们点个star支持一下~你的支持对我们来说是最大的鼓励,感谢你的支持与点赞 🌟

这个应该是瓦片 Y 方向出现了循环了,可以先限定一下最小缩放等级