svg数据可视化地图开发中遇到的问题总结

简介: svg数据可视化地图开发中遇到的问题总结

SVG是一种图像文件格式,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形。它是基于XML(Extensible Markup Language),由World Wide Web Consortium(W3C)联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像,可以用任何文字处理工具打开SVG图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器来观看。


在项目开发中svg的功能是一个逐步了解和熟悉的过程,现就地图数据化开发做以总结:


1.代码过多:svg多个区域时,每个区域都有单独的path代码;

2.定位麻烦:插入图片和文字时,需要根据xy坐标定位,但是如果svg图片有调整时,尤其是在AI中有调整位置时,已有的定位可能全部作废。严重影响开发效率!

3.无法自适应窗口:自适应就需要改变svg的长宽,意味着坐标的自适应改变;

4.无法放大:当区域面积小,需要放大效果时,暂时无法做到;

5.区域面积无填充色:使用fill="none"时,鼠标滑过无法精准定位;

6.阴影效果:阴影只能使用高斯模糊属性,区域本身颜色SourceGraphic或黑色阴影SourceAlpha;


需要学习确认的功能:


1.svg可以做下钻地图开发;

2.svg可以和threejs结合,开发3D效果;

3.svg可以多路径动画;

4.svg可以解决自定义区域的边界轮廓,而echarts对乡镇级别以下或自定义的geojson获取难度较大;


Done!


相关文章
|
数据可视化 定位技术
svg数据可视化地图实战笔记
svg数据可视化地图实战笔记
279 0
|
5月前
|
数据可视化 前端开发 JavaScript
Echarts+JS实现数据分析可视化大屏!!附源码!!
Echarts+JS实现数据分析可视化大屏!!附源码!!
|
5月前
|
数据可视化
为什么不建议大家冲一冲Echarts数据可视化,不要太香了
为什么不建议大家冲一冲Echarts数据可视化,不要太香了
|
5月前
|
数据可视化
为什么Echarts数据可视化大屏不好做?
为什么Echarts数据可视化大屏不好做?
|
5月前
|
数据可视化
Echarts数据可视化开发| 智慧数据平台
Echarts数据可视化开发| 智慧数据平台
|
5月前
|
数据可视化
动漫形象平台 Echarts数据可视化大屏
动漫形象平台 Echarts数据可视化大屏
|
8月前
|
数据采集 存储 数据可视化
python数据分析——数据可视化(图形绘制基础)
为了绘制好数据可视化图形,需要掌握数据分析的基础知识,例如数据类型、数据预处理、统计方法等。同时,还需要了解绘图工具的使用,例如Excel、Tableau、Python中的Matplotlib和Seaborn等。掌握数据可视化的基础知识和工具,可以帮助我们更好地理解数据和数据之间的关系,从而做出更加准确的决策和预测。
194 1
|
8月前
|
数据可视化 前端开发 JavaScript
探秘D3.js:数据可视化交互式图表与效果
数据可视化已经成为如今大数据时代的重要工具之一。它不仅可以更直观地呈现数据,还可以帮助人们更好地理解数据背后的含义。而D3.js则作为目前最流行的数据可视化库之一,其强大的功能和灵活性广受开发者青睐。本文将介绍如何使用D3.js创建交互式图表和可视化效果,以及如何利用其强大的API来进行个性化定制。
479 0
|
数据可视化 定位技术
漏刻有时数据可视化Echarts组件开发(22):echarts高端地图交互美化
漏刻有时数据可视化Echarts组件开发(22):echarts高端地图交互美化
270 0
漏刻有时数据可视化Echarts组件开发(22):echarts高端地图交互美化
|
数据可视化
第5章 数据可视化——5.1 图形绘制
第5章 数据可视化——5.1 图形绘制