Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
amssedzeta opened this issue May 1, 2024 · 3 comments
Closed

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

amssedzeta opened this issue May 1, 2024 · 3 comments
Assignees

Comments

@amssedzeta
Copy link

amssedzeta commented May 1, 2024

问题描述

引入天地图后,缩放为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

Copy link
Contributor

github-actions bot commented May 1, 2024

hi @amssedzeta, welcome!

Copy link
Contributor

github-actions bot commented May 1, 2024

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

@lzxue
Copy link
Contributor

lzxue commented May 6, 2024

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

@lvisei lvisei closed this as completed May 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants