CSS极坐标的实例代码

前言

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

上面示例，下面echarts示例

二、设计步骤

1.纬度
几个div，设置圆角
2.经度
多条0.5px的边框，通过旋转实现

1. lines: [
2.         {
3.           id: 1,
4.           transform: "translateX(-50%) rotateZ(0deg) scaleX(0.4)",
5.           borderStyle: "solid",
6.           borderColor: "#333",
7.         },
8.         {
9.           id: 2,
10.           transform: "translateX(-50%) rotateZ(45deg) scaleX(0.4)",
11.           borderStyle: "dashed",
12.           borderColor: "#91cc75",
13.         },
14.         {
15.           id: 3,
16.           transform: "translateX(-50%) rotateZ(90deg) scaleX(0.4)",
17.           borderStyle: "solid",
18.           borderColor: "#333",
19.         },
20.         {
21.           id: 4,
22.           transform: "translateX(-50%) rotateZ(135deg) scaleX(0.4)",
23.           borderStyle: "dashed",
24.           borderColor: "#91cc75",
25.         },
26.       ],

复制代码

3.卫星（点）
后台的数据只有经度和纬度。纬度很好做，按照90°的比例进行定位。经度用到旋转，注意不是直接在点上旋转，否则只是盒子旋转，需要在点外边套一个div进行旋转，如果需要美化，可以使点反方向旋转该角度达到编号是一个正的效果。
三、代码实现

代码是以vue的组件来写的，satellites就是极坐标的数据接口。

1. <template>
2.   <div class="polar">
3.     <div class="polar-main">
4.       <div class="polar-1">
5.         <div class="polar-2">
6.           <div class="polar-3">
7.             <p
8.               v-for="item in latitudes"
9.               :key="item.id"
10.               class="latitude"
11.               :style="{
12.                 top: item.location.top,
13.                 transform: item.location.transform,
14.               }"
15.             >
16.               {{ item.value }}
17.             </p>
18.             <div class="polar-center">
19.               <div class="satellites">
20.                 <div v-for="item in satellites" :key="item.name">
21.                   <p
22.                     v-for="ele in item.distribution"
23.                     :key="ele.id"
24.                     class="satellite-box"
25.                     :style="{
26.                       transform: rotate(ele.long),
27.                     }"
28.                   >
29.                     <el-tooltip
30.                       class="item"
31.                       effect="dark"
32.                       :content="`经度：${ele.long} 纬度：${ele.lati}`"
33.                       placement="top-start"
34.                     >
35.                       <span
36.                         class="satellite"
37.                         :style="{
38.                           backgroundColor: ele.color,
39.                           top: top(ele.lati),
40.                           transform: rotate(-1 * ele.long),
41.                         }"
42.                         >{{ ele.id }}</span
43.                       >
44.                     </el-tooltip>
45.                   </p>
46.                 </div>
47.               </div>
48.             </div>
49.           </div>
50.         </div>
51.       </div>
52.       <p
53.         v-for="item in lines"
54.         :key="item.id"
55.         class="line"
56.         :style="{
57.           transform: item.transform,
58.           borderStyle: item.borderStyle,
59.           borderColor: item.borderColor,
60.         }"
61.       ></p>
62.       <p
63.         v-for="item in longitudes"
64.         :key="item.id"
65.         class="longitude"
66.         :style="{
67.           top: item.location.top,
68.           left: item.location.left,
69.           transform: item.location.transform,
70.         }"
71.       >
72.         {{ item.value }}
73.       </p>
74.     </div>
75.     <div class="satellite-name"></div>
76.   </div>
77. </template>
78. <script>
79. export default {
80.   data() {
81.     return {
82.       lines: [
83.         {
84.           id: 1,
85.           transform: "translateX(-50%) rotateZ(0deg) scaleX(0.4)",
86.           borderStyle: "solid",
87.           borderColor: "#333",
88.         },
89.         {
90.           id: 2,
91.           transform: "translateX(-50%) rotateZ(45deg) scaleX(0.4)",
92.           borderStyle: "dashed",
93.           borderColor: "#91cc75",
94.         },
95.         {
96.           id: 3,
97.           transform: "translateX(-50%) rotateZ(90deg) scaleX(0.4)",
98.           borderStyle: "solid",
99.           borderColor: "#333",
100.         },
101.         {
102.           id: 4,
103.           transform: "translateX(-50%) rotateZ(135deg) scaleX(0.4)",
104.           borderStyle: "dashed",
105.           borderColor: "#91cc75",
106.         },
107.       ],
108.       longitudes: [
109.         {
110.           id: 5,
111.           value: "90°",
112.           location: {
113.             top: "50%",
114.             left: "100%",
115.             transform: "translateY(-50%)",
116.           },
117.         },
118.         {
119.           id: 6,
120.           value: "180°",
121.           location: {
122.             top: "100%",
123.             left: "50%",
125.             transform: "translateX(-50%)",
126.           },
127.         },
128.         {
129.           id: 7,
130.           value: "270°",
131.           location: {
132.             top: "50%",
133.             left: "0",
135.             transform: "translateX(-100%) translateY(-50%)",
136.           },
137.         },
138.         {
139.           id: 8,
140.           value: "360°",
141.           location: {
142.             top: "0",
143.             left: "50%",
144.             transform: "translateX(-50%) translateY(-100%)",
145.           },
146.         },
147.       ],
148.       latitudes: [
149.         {
150.           id: 1,
151.           value: "90°",
152.           location: {
153.             top: "50%",
154.             left: "0",
155.             transform: "translateY(-50%) translateX(50%)",
156.           },
157.         },
158.         {
159.           id: 2,
160.           value: "60°",
161.           location: {
162.             top: "0",
163.             left: "0",
164.             transform: "translateY(-50%) translateX(50%)",
165.           },
166.         },
167.         {
168.           id: 3,
169.           value: "30°",
170.           location: {
171.             top: "-50%",
172.             left: "0",
173.             transform: "translateY(-50%) translateX(50%)",
174.           },
175.         },
176.       ],
177.       satellites: [
178.         {
179.           name: "Below Mask",
180.           distribution: [
181.             {
182.               id: "10",
183.               long: 46.397128,
184.               lati: 56.397128,
185.               color: "#409eff",
186.             },
187.             {
188.               id: "08",
189.               long: 76.397128,
190.               lati: 32.916527,
191.               color: "#409eff",
192.             },
193.           ],
194.         },
195.         {
196.           name: "Unhealthy",
197.           distribution: [
198.             {
199.               id: "25",
200.               long: 156.397128,
201.               lati: 62.916527,
202.               color: "#f56c6c",
203.             },
204.             {
205.               id: "25",
206.               long: 316.397128,
207.               lati: 12.916527,
208.               color: "#f56c6c",
209.             },
210.           ],
211.         },
212.         {
213.           name: "Missing",
214.           distribution: [
215.             {
216.               id: "07",
217.               long: 256.397128,
218.               lati: 22.916527,
219.               color: "#118452",
220.             },
221.             {
222.               id: "18",
223.               long: 56.397128,
224.               lati: 27.916527,
225.               color: "#118452",
226.             },
227.             {
228.               id: "12",
229.               long: 66.397128,
230.               lati: 27.916527,
231.               color: "#118452",
232.             },
233.             {
234.               id: "16",
235.               long: 196.397128,
236.               lati: 67.916527,
237.               color: "#118452",
238.             },
239.           ],
240.         },
241.       ],
242.     };
243.   },
244.   methods: {
245.     top(lati) {
246.       return ((90 - lati) / 90) * -90 - 10 + "px";
247.     },
248.     rotate(long) {
249.       let z = (long / 360) * 360;
250.       return `rotateZ(${z}deg)`;
251.     },
252.   },
253.   //   filters: {},
254. };
255. </script>
256. <style scoped lang='scss'>
257. $polarPiameter: 180px;
258. .polar-main {
259.   width: $polarPiameter;
260.   height: $polarPiameter;
261.   position: relative;
262.   p {
263.     margin: 0;
264.   }
265.   .polar-1 {
266.     width: $polarPiameter;
267.     height: $polarPiameter;
268.     border-style: solid;
269.     .polar-2 {
270.       width: $polarPiameter * 2/3;
271.       height: $polarPiameter * 2/3;
272.       border-style: dashed;
273.       .polar-3 {
274.         width: $polarPiameter/3;
275.         height: $polarPiameter/3;
276.         border-style: dashed;
277.         .polar-center {
278.           width: 1px;
279.           height: 1px;
280.           background-color: #333;
281.         }
282.       }
283.     }
284.   }
285.   .line {
286.     height: $polarPiameter;
287.     border-right-color: #333;
288.     border-right-width: 1px;
289.     border-right-style: solid;
290.     position: absolute;
291.     left: 50%;
292.     cursor: pointer;
293.   }
294.   .longitude,
295.   .latitude {
296.     height: 14px;
297.     line-height: 14px;
298.     font-size: 12px;
299.     color: #868585;
300.     position: absolute;
301.     cursor: pointer;
302.   }
303. }
304. .polar-1,
305. .polar-2,
306. .polar-3,
307. .polar-center {
308.   border-radius: 50%;
309.   position: absolute;
310.   top: 0;
311.   left: 0;
312.   right: 0;
313.   bottom: 0;
314.   margin: auto;
315.   border-color: #91cc75;
316.   border-width: 1px;
317.   box-sizing: border-box;
318.   cursor: pointer;
319. }
320. .polar-1:hover {
321.   border-width: 2px;
322. }
323. .polar-2:hover{
324.   border-width: 2px;
325. }
326. .satellite-box {
327.   position: absolute;
328.   width: 1px;
329.   height: 1px;
330.   border-radius: 50%;
331.   background-color: transparent;
332.   .satellite {
333.     position: absolute;
334.     left: -10px;
335.     width: 20px;
336.     height: 20px;
337.     line-height: 20px;
338.     text-align: center;
339.     border-radius: 50%;
340.     font-size: 14px;
341.     color: #fff;
342.     cursor: pointer;
343.     z-index: 999;
344.     opacity: 0.6;
345.     transition: 0.6s;
346.   }
347.   .satellite:hover {
348.     background-color: #333 !important;
349.   }
350. }
351. </style>

复制代码

总结

示例图：

到此这篇关于CSS极坐标的实例代码的文章就介绍到这了,更多相关CSS极坐标内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章，希望大家以后多多支持中国红客联盟！