使用墨卡托投影坐标绘制地图的时候,如何让HTML文字大小也能适配且不卡顿?
我使用了墨卡托投影坐标来绘制3D地图,地图上区域的名称,我是直接使用CSS+HTML渲染
上去的,这里我用到了threeJS的CSS3DObject、CSS3DRenderer。如果直接使用经纬度坐
标去绘制的话还好,文字就按正常的前端开发字体去设置是正常的。但是一旦将转化成墨
卡托坐标文字直接就看不见了,因为墨卡托坐标的数值太大了,我也试着通过css缩放去调
整大小,但是不知道为什么页面会特别的卡,我猜测的直接原因就是缩放比例太大了,但
是具体我也不知道为什么,我现在就想知道怎么处理这种问题,希望大佬指点
getDiv ({position ,text }) {
const { CSS3DObject } = this
const div = document.createElement('div');
const mapSize = 5039104;//包围盒y方向尺寸来表征地图大小
div.innerText = text;
div.style.color = '#fff';
div.style.fontSize = `${12}px`;
div.style.position = 'absolute';
div.style.backgroundColor = 'transparent';
const label = new CSS3DObject(div);
div.style.pointerEvents = 'none';
label.position.copy(position);
//缩放CSS3DObject模型对象
label.scale.set(0.005 * mapSize,0.005 * mapSize, 0.005 * mapSize)
return label
},
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论