CSS极坐标的实例代码
发布时间:2021-06-03 16:57:51 作者:阿阿啊啊阿阿豪 我要评论
项目有图表方面的需求,其中有做卫星定位的图形,需要制作极坐标来显示当前北半球或南半球的卫星分布情况,本文主要介绍了CSS极坐标的实例代码,分享给大家,感兴趣的可以了解一下
前言
项目有图表方面的需求,其中有做卫星定位的图形,需要制作极坐标来显示当前北半球或南半球的卫星分布情况。第一时间想到了echarts的极坐标,找到示例,虽然满足了部分需求,但是极坐标是由canvs画的,卫星有自己的编号,所以难以辨析每个点对应的卫星编号。于是就想到了自己去用CSS画极坐标
提示:以下是本篇文章正文内容,下面案例可供参考
一、示例
上面示例,下面echarts示例
二、设计步骤
1.纬度
几个div,设置圆角
2.经度
多条0.5px的边框,通过旋转实现
lines: [ { id: 1, transform: "translateX(-50%) rotateZ(0deg) scaleX(0.4)", borderStyle: "solid", borderColor: "#333", }, { id: 2, transform: "translateX(-50%) rotateZ(45deg) scaleX(0.4)", borderStyle: "dashed", borderColor: "#91cc75", }, { id: 3, transform: "translateX(-50%) rotateZ(90deg) scaleX(0.4)", borderStyle: "solid", borderColor: "#333", }, { id: 4, transform: "translateX(-50%) rotateZ(135deg) scaleX(0.4)", borderStyle: "dashed", borderColor: "#91cc75", }, ],
3.卫星(点)
后台的数据只有经度和纬度。纬度很好做,按照90°的比例进行定位。经度用到旋转,注意不是直接在点上旋转,否则只是盒子旋转,需要在点外边套一个div进行旋转,如果需要美化,可以使点反方向旋转该角度达到编号是一个正的效果。
三、代码实现
代码是以vue的组件来写的,satellites就是极坐标的数据接口。
<template> <div class="polar"> <div class="polar-main"> <div class="polar-1"> <div class="polar-2"> <div class="polar-3"> <p v-for="item in latitudes" :key="item.id" class="latitude" :style="{ top: item.location.top, transform: item.location.transform, }" > {{ item.value }} </p> <div class="polar-center"> <div class="satellites"> <div v-for="item in satellites" :key="item.name"> <p v-for="ele in item.distribution" :key="ele.id" class="satellite-box" :style="{ transform: rotate(ele.long), }" > <el-tooltip class="item" effect="dark" :content="`经度:${ele.long} 纬度:${ele.lati}`" placement="top-start" > <span class="satellite" :style="{ backgroundColor: ele.color, top: top(ele.lati), transform: rotate(-1 * ele.long), }" >{{ ele.id }}</span > </el-tooltip> </p> </div> </div> </div> </div> </div> </div> <p v-for="item in lines" :key="item.id" class="line" :style="{ transform: item.transform, borderStyle: item.borderStyle, borderColor: item.borderColor, }" ></p> <p v-for="item in longitudes" :key="item.id" class="longitude" :style="{ top: item.location.top, left: item.location.left, transform: item.location.transform, }" > {{ item.value }} </p> </div> <div class="satellite-name"></div> </div> </template> <script> export default { data() { return { lines: [ { id: 1, transform: "translateX(-50%) rotateZ(0deg) scaleX(0.4)", borderStyle: "solid", borderColor: "#333", }, { id: 2, transform: "translateX(-50%) rotateZ(45deg) scaleX(0.4)", borderStyle: "dashed", borderColor: "#91cc75", }, { id: 3, transform: "translateX(-50%) rotateZ(90deg) scaleX(0.4)", borderStyle: "solid", borderColor: "#333", }, { id: 4, transform: "translateX(-50%) rotateZ(135deg) scaleX(0.4)", borderStyle: "dashed", borderColor: "#91cc75", }, ], longitudes: [ { id: 5, value: "90°", location: { top: "50%", left: "100%", transform: "translateY(-50%)", }, }, { id: 6, value: "180°", location: { top: "100%", left: "50%", transform: "translateX(-50%)", }, }, { id: 7, value: "270°", location: { top: "50%", left: "0", transform: "translateX(-100%) translateY(-50%)", }, }, { id: 8, value: "360°", location: { top: "0", left: "50%", transform: "translateX(-50%) translateY(-100%)", }, }, ], latitudes: [ { id: 1, value: "90°", location: { top: "50%", left: "0", transform: "translateY(-50%) translateX(50%)", }, }, { id: 2, value: "60°", location: { top: "0", left: "0", transform: "translateY(-50%) translateX(50%)", }, }, { id: 3, value: "30°", location: { top: "-50%", left: "0", transform: "translateY(-50%) translateX(50%)", }, }, ], satellites: [ { name: "Below Mask", distribution: [ { id: "10", long: 46.397128, lati: 56.397128, color: "#409eff", }, { id: "08", long: 76.397128, lati: 32.916527, color: "#409eff", }, ], }, { name: "Unhealthy", distribution: [ { id: "25", long: 156.397128, lati: 62.916527, color: "#f56c6c", }, { id: "25", long: 316.397128, lati: 12.916527, color: "#f56c6c", }, ], }, { name: "Missing", distribution: [ { id: "07", long: 256.397128, lati: 22.916527, color: "#118452", }, { id: "18", long: 56.397128, lati: 27.916527, color: "#118452", }, { id: "12", long: 66.397128, lati: 27.916527, color: "#118452", }, { id: "16", long: 196.397128, lati: 67.916527, color: "#118452", }, ], }, ], }; }, methods: { top(lati) { return ((90 - lati) / 90) * -90 - 10 + "px"; }, rotate(long) { let z = (long / 360) * 360; return `rotateZ(${z}deg)`; }, }, // filters: {}, }; </script> <style scoped lang='scss'> $polarPiameter: 180px; .polar-main { width: $polarPiameter; height: $polarPiameter; position: relative; p { margin: 0; } .polar-1 { width: $polarPiameter; height: $polarPiameter; border-style: solid; .polar-2 { width: $polarPiameter * 2/3; height: $polarPiameter * 2/3; border-style: dashed; .polar-3 { width: $polarPiameter/3; height: $polarPiameter/3; border-style: dashed; .polar-center { width: 1px; height: 1px; background-color: #333; } } } } .line { height: $polarPiameter; border-right-color: #333; border-right-width: 1px; border-right-style: solid; position: absolute; left: 50%; cursor: pointer; } .longitude, .latitude { height: 14px; line-height: 14px; font-size: 12px; color: #868585; position: absolute; cursor: pointer; } } .polar-1, .polar-2, .polar-3, .polar-center { border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border-color: #91cc75; border-width: 1px; box-sizing: border-box; cursor: pointer; } .polar-1:hover { border-width: 2px; } .polar-2:hover{ border-width: 2px; } .satellite-box { position: absolute; width: 1px; height: 1px; border-radius: 50%; background-color: transparent; .satellite { position: absolute; left: -10px; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; font-size: 14px; color: #fff; cursor: pointer; z-index: 999; opacity: 0.6; transition: 0.6s; } .satellite:hover { background-color: #333 !important; } } </style>
总结
示例图:
到此这篇关于CSS极坐标的实例代码的文章就介绍到这了,更多相关CSS极坐标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章
- link标签是用于样式表、图标与外部资源的关联,有很多属性,本文就详细的介绍 一下HTML中link标签属性的具体用法,感兴趣的可以了解一下2023-05-05
- 在浏览器中提交表单后,浏览器一般会提示“是否需要记住密码”,自动填充密码很不安全,本文就介绍了html解决浏览器记住密码输入框的问题,具有一定的参考价值,感兴趣的可2023-04-28
- 本文主要介绍了Html获取登陆用户名的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-02-13
- 表格是日常常用的工具,很多时候需要用到单元合并,本文主要介绍了HTML表格合并的具体实现方式, 具有一定的参考价值,感兴趣的可以了解一下2023-01-05
- 这篇文章给大家分享HTML页面点击按钮关闭页面的几种方式,实现思路非常简单,有不带任何方式的关闭窗口,提示之后关闭页面,点击关闭本页面并跳转到其他页面等等,每种方式2022-11-22
- 本文主要介绍了html网页引入svg图片的4种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2022-08-03
- 本文主要介绍了HTML静态页面获取url参数和UserAgent的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一2022-08-02
- 本文主要介绍了HTML实现仿Windows桌面主题特效的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学2022-06-27
- 本文主要介绍了html中两种获取标签内的值的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习2022-06-09
- 本文主要介绍了HTML页面中使两个div并排显示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习2022-05-13
最新评论