CSS极坐标的实例代码


Posted in HTML / CSS onJune 03, 2021

前言

项目有图表方面的需求,其中有做卫星定位的图形,需要制作极坐标来显示当前北半球或南半球的卫星分布情况。第一时间想到了echarts的极坐标,找到示例,虽然满足了部分需求,但是极坐标是由canvs画的,卫星有自己的编号,所以难以辨析每个点对应的卫星编号。于是就想到了自己去用CSS画极坐标

提示:以下是本篇文章正文内容,下面案例可供参考

一、示例

上面示例,下面echarts示例

CSS极坐标的实例代码

二、设计步骤

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极坐标的实例代码的文章就介绍到这了,更多相关CSS极坐标内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
css height属性中的calc方法详解
Jun 03 #HTML / CSS
html+css实现文字折叠特效实例
html+css实现分层金字塔的实例
html+css实现赛博朋克风格按钮
HTML+CSS制作心跳特效的实现
浅谈CSS不规则边框的生成方案
May 25 #HTML / CSS
详解CSS故障艺术
You might like
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
详解php中反射的应用
2016/03/15 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
python批量修改xml属性的实现方式
2020/03/05 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
毕业生多媒体设计求职信
2013/10/12 职场文书
单位领导证婚词
2014/01/14 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
2014年变电站工作总结
2014/12/19 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
Golang 实现WebSockets
2022/04/24 Golang