热门地图无法使用HTML组件

1 个回答

地虎降天龙 图形社区官方人员 4天前

也许宇宙中最反直觉的真理是，你给别人的越多，你得到的也越多。

没太明白您说的点
能详细描述一下，粘贴一下代码和报错嘛？

wx523-GCFMLf 4天前

这家伙很懒，什么也没写！

编写一个类似这样子的组件，结果不显示，position写[0，0，0]可以显示，但是写实际经纬度不行，求解决，还有就是点击事件，点击模型，无法获取拾取到模型
求帮忙看看啥问题，研究一天了

地虎降天龙 4天前

也许宇宙中最反直觉的真理是，你给别人的越多，你得到的也越多。

@wx523-GCFMLf
1，经纬度需要坐标转换的，请参考你使用案例对应的经纬度转换部分代码
2，点击事件，射线这部分是是针对场景内的三维物体的，如果是html这类网页dom元素是直接用原生的html事件的

地虎降天龙 4天前

也许宇宙中最反直觉的真理是，你给别人的越多，你得到的也越多。

@wx523-GCFMLf 看了你的代码好像还是v4版本的请更新tvt.js底座到v5版本

wx523-GCFMLf 4天前

这家伙很懒，什么也没写！

@hawk86104 好的，我试试，如果真的是这个版本更新问题，那真是太好解决了

wx523-GCFMLf 4天前

这家伙很懒，什么也没写！

@hawk86104 我已经更新到v5，但是HTML组件还是不显示

<template>
    <template v-for="(item, index) in juSuoList" :key="index">
        <Html
            wrapperClass="wrapper"
            :distance-factor="1"
            :scale="[1, 1, 1]"
            transform
            :position="item.position"
            center
            sprite
        >
            <div class="bg-image-2" @click="handleClick(item)">
                <h1 class="text-xs p-1 rounded cursor-pointer box text-white whitespace-nowrap">📦{{ item.name }}</h1>
            </div>
        </Html>
    </template>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Html } from '@tresjs/cientos'
import { powerCompanyListUsingGet, PowerCompanyVO } from '@/service/app'
import { lonLatToUtm } from '@/plugins/simpleGIS/lib/threeSatelliteMap/Utils/CoordUtil'
import bus from 'vue3-eventbus'
// 获取局所接口
const juSuoList = ref<PowerCompanyVO & { JsonParsePosition: { longitude: number; latitude: number; height: number }; position: [number, number, number] }[]>([])

// 获取局所
const getJuSuo = async () => {
    const res = await powerCompanyListUsingGet({})
    if (res.code === 0) {
        if (res.data) {
            juSuoList.value = res.data.map((item: PowerCompanyVO) => {
                const JsonParsePosition = JSON.parse(item.longitude as string)
                const position = lonLatToUtm(JsonParsePosition.longitude, JsonParsePosition.latitude, 50)
                return {
                    ...item,
                    JsonParsePosition: JSON.parse(item.longitude as string),
                    position: [position[0], JsonParsePosition.height + 10, -position[1]],
                }
            })
        }
    }
}

const handleClick = (item: PowerCompanyVO) => {
    bus.emit('openPopup', item)
}

onMounted(() => {
    getJuSuo()
})
</script>

<style lang="scss" scoped>
.wrapper {
    position: absolute;
    z-index: 99999999;
    left: 0;
    top: 0;
    #inner {
        user-select: none;
        pointer-events: none !important;
    }
}
.bg-image-2 {
    width: 100%;
    padding: 10px;
    height: 100%;
    background-image: url('@/images/juxin.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
</style>

wx523-GCFMLf 3天前

这家伙很懒，什么也没写！

@hawk86104 您可以帮我看一下吗

地虎降天龙 3天前

也许宇宙中最反直觉的真理是，你给别人的越多，你得到的也越多。

1、检查 lonLatToUtm 以后的坐标位置是多少
2、先把 Html这个标识换成普通的三维物体，稍微大一点的，比如 obx

import { Box } from '@tresjs/cientos'

<template>
<Box :args="[1000, 1000, 1000]" color="orange" :position="[3, 1, 0]" />
</template>

3, 1, 0 这三个坐标换成你转换后的坐标。

这么做的原因：
html本身是dom，计算坐标后还会被css的定位所干扰，所以先换成三维物体确认坐标是否正确

请登录后再发布评论，点击登录

追加回复

撰写答案

请登录后再发布答案，点击登录

付费查看:

￥清除

1. 如果设定了付费查看，则此回答只有提问者、回答者和管理员可以查看
2. 如果提问者采纳了此回答，则付费查看生效(会员需要支付你设定的费用才能查看)，如果采纳了其它答案，付费查看失效(此时全体可见)
3. 如果提问者在 7 天后仍未采纳最佳答案，则所有付费查看失效(此时全体可见)

登录注册新账号

关于作者

wx523-GCFMLf

这家伙很懒，什么也没写！

提问

回答

被采纳

关注TA

发私信

撰写答案

付费查看:

关于作者

wx523-GCFMLf

相关问题

热门问题

热门标签

推荐达人

热门地图无法使用HTML组件

撰写答案

付费查看: 设定金额 设定积分

关于作者

wx523-GCFMLf

相关问题

热门文章

热门问题

热门标签

等待解答

推荐达人

付费查看: