CSS画极坐标的实际示例是怎样的 代码是哪些
|
很多朋友都对“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画极坐标的实际示例是怎样的，代码是什么”的介绍了，感谢各位的阅读。 （编辑：汽车网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
