threeJS

热门地图无法使用HTML组件

发布于 2025-10-17 23:36:38

image.png
使用HTML无法显示

查看更多

关注者
0
被浏览
38
关注问题 我来回答 分享 收藏 感谢 举报
1 个回答
地虎降天龙
地虎降天龙 图形社区官方人员 23小时前
也许宇宙中最反直觉的真理是，你给别人的越多，你得到的也越多。

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

赞同 0 6 条回复 收藏 感谢 举报
wx523-GCFMLf
wx523-GCFMLf 21小时前
这家伙很懒，什么也没写！

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

0 回复 举报
地虎降天龙
地虎降天龙 15小时前
也许宇宙中最反直觉的真理是，你给别人的越多，你得到的也越多。

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

0 回复 举报
地虎降天龙
地虎降天龙 15小时前
也许宇宙中最反直觉的真理是，你给别人的越多，你得到的也越多。

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

0 回复 举报
wx523-GCFMLf
wx523-GCFMLf 12小时前
这家伙很懒，什么也没写！

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

0 回复 举报
wx523-GCFMLf
wx523-GCFMLf 9小时前
这家伙很懒，什么也没写！

@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>

0 回复 举报
wx523-GCFMLf
wx523-GCFMLf 9小时前
这家伙很懒，什么也没写！

@hawk86104 `<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>
`

0 回复 举报
请登录后再发布评论，点击登录
追加回复
登录 注册新账号

撰写答案

请登录后再发布答案，点击登录
登录 注册新账号

相关问题

1
最近想学习webgl，不知道从哪里入手，请问有什么具体学习路线嘛？
2
请问老铁们有哪些可以下载纹理贴图的网址呀
3
Webgl或者Threejs如何在应用拓展性shader？
4
webgl怎么添加git动图呢
5
如何判断物体的是否被遮挡
6
threejs怎么生成antv或者deckgl具有聚合效果的热力图
7
three.js点击模型如何出现提示框
8
找GIS三维渲染的开发
9
threejs高性能绘制描边
10
求人才：常驻南京，也可能东京出差。 技术特别好，经验年数多的特别是图像处理的可以考虑远程工作。

热门文章

1
WebGL通常的错误提示以及解决方法
2
几何学——矩阵基础知识汇总
3
几何学——欧拉角与万向锁看这一篇就够了(含threejs demo演示)
4
几何学——坐标系概括
5
超详细讲解UE5材质基础
6
初步探讨一下Shader中的SDF应用
7
shader通常的错误提示以及解决方法
8
几何学——矢量的几何运算
9
关于homeassistant的数字家居 免费开源部署文档 都在这里
10
npm 及 yarn 代理设置及更换为国内下载源

热门问题

1
UE5中，新建关卡为什么是漆黑一片？如何设置？
2
Cesium展示3D格点数据（原始数据为nc格点数据）进行体绘制渲染思路
3
最近想学习webgl，不知道从哪里入手，请问有什么具体学习路线嘛？
4
webgl怎么添加git动图呢
5
threejs怎么生成antv或者deckgl具有聚合效果的热力图
6
煤矿三维数字点云项目需求
7
cesium绘制路线,然后模型根据路线运动动画
8
Threejs/webgl高级人才招聘
9
视口设置有区别导致帧缓冲的纹理渲染不出来
10
请教一下关于cesium的GIS方面的问题，街道数据的获得

热门标签

shader WebGL cesium threeJS gis vue3 招聘 模型 TvT glsl 地图数据 vite 点击事件 城市gis 区域编辑器 VUE 区域场景编辑器 绘制点 建模 UE5 自定义着色器 vue3-ts-cesium-map-show cesium贴图材质 插件 WEBGIS useTresContext goview @tresjs/core texture 实现热力图 求助 3d tiles 三维图表 goview组件 模型加载 需求 开发 模型获取 javascript html css 集成tvt.js插件子应用 3D算法渲染 base深圳龙华大和 webGPU tvt.js 引入useTresContext报错 .env 学习线路 XYZTiles

等待解答

问
方舆科技webgis前端开发工程师
问
当在组件中引入useTresContext时模型不显示，控制台报错的问题
问
3D算法渲染工程师招聘
问
深圳知名运动相机招聘。
问
硅谷base初创招聘软件工程师
问
TvT或Threejs中报错，Uncaught TypeError: ‘get‘ on proxy: property ‘modelViewMatrix‘ is a read-only and non
问
基于mapbox的风场交互问题
问
Java与Android武汉腾讯招聘要求
问
使用cesium实现对折线的每个点的编辑，按住x,y,z可向三个方向拖动
问
诚聘WebGIS工程师

推荐达人

发呆的石头
发呆的石头
3个答案 0次被采纳
kanz
kanz
2个答案 0次被采纳
JesueLike
JesueLike
3个答案 0次被采纳
何贤
何贤
0个答案 0次被采纳
七个隆咚锵
七个隆咚锵
2个答案 0次被采纳

发布
问题

分享
好友

手机
浏览

扫码手机浏览