D3.js在svg地图上标点

最新推荐文章于 2025-06-01 16:35:06 发布
最新推荐文章于 2025-06-01 16:35:06 发布
阅读量5.7k 收藏 3
点赞数 1
CC 4.0 BY-SA版权
分类专栏： html5 文章标签： path d3 地图 d3.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/star535X/article/details/51557382
本文介绍如何在SVG格式的世界地图上利用D3.js库，根据给定的经纬度坐标点进行标注。地图由SVG的path元素绘制，通过设置墨卡托投影，转换经纬度为对应SVG坐标，并将标注点绘制到地图上。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

需要实现的需求就是在一张世界地图上将给定的经纬度坐标点绘制出来。
地图如下：
这里写图片描述
地图使用的是svg格式，而不是d3推荐的GeoJSON格式或TopoJSON格式的地图数据。地图是使用svg格式使用path路径绘制而成。
在地图上会点，首先设置墨卡托投影：

//translate设置投影转换的偏移值d3.geo.graticule()获取经纬网
var projection = d3.geo.mercator().translate([480, 490]).rotate([x_rotate,0,0]),
    graticule = d3.geo.graticule();

然后获取该投影下的路径


                

                
                
        

    

    
  


        

            

                      
                        最低0.47元/天 解锁文章
                        

                          
200万优质内容无限畅学

                          
                        

                      
            

        


    



                



	

		

			

				
					
echarts依据svg作为地图并实现打点

				
			

			

				

					qq_43086723的博客
				

				

					04-10
					
					1877
					
				

			

		

		

			
				
echarts依据svg作为地图并实现打点

			
		

	



                

            
              



	

		

			

				
					
svg  js  在多个同心圆上标点

				
			

			

				

					ChunKitAu的博客
				

				

					09-21
					
					568
					
				

			

		

		

			
				
效果图：

代码：
function initMark( rad) {
    var center = {x:200,y:200}; //圆心坐标
    var radius = getRad(rad); //半径

    var mun = Math.floor(Math.random() * 360 + 1);//1-360度
    var hudu = (2*Math.PI / 36...

			
		

	



              


  
              

                


	

		

			

				
					
SVG图打点

				
			

			

				

					weixin_42666124的博客
				

				

					06-15
					
					1495
					
				

			

		

		

			
				
在平时的工作中 ，我们可能会遇到需要在SVG图上或是某个DOM上打点的需求，下面实现了在SVG图上打点的功能，如果需要在其他DOM上打点也可以参照此方法。
说一下思路：
一、如何在SVG图片里再插入图片

要想在SVG图上打点，首先想着怎么在SVG图片里插入图片，创建一个SVG的image标签

const svgImgDom = document.createElementNS(
    'http://www.w3.org/2000/svg',
    'image',
  );


然后引入图片，设置

			
		

	





	

		

			

				
					
JavaScript实现的欧洲SVG地图详解

					
最新发布

				
			

			

				

					weixin_36184718的博客
				

				

					06-01
					
					1064
					
				

			

		

		

			
				
可缩放矢量图形（Scalable Vector Graphics, SVG）是一种使用XML格式定义图形的开放标准矢量图形语言。SVG允许我们使用文本文件来创建矢量图形，这些图形可以被缩放、旋转、动画化，而不会损失图像质量。SVG图形直接嵌入HTML页面中，能够被所有的现代浏览器所支持。SVG文件的结构通常包含了以下几个基本组成部分：根元素（<svg>），定义了SVG图像的宽度和高度。基本图形元素，如<circle><rect><ellipse><line>

			
		

	



		

			
		



	

		

			

				
					
D3地图上如何标注坐标点

				
			

			

				

					Mobile的专栏
				

				

					06-11
					
					5227
					
				

			

		

		

			
				
原文地址 http://blog.csdn.net/lzhlzz/article/details/46385299，部分引用，重点关注坐标点的投影转换。


1. 标注是什么


标注，是指地图上只需要一个坐标即可表示的元素。例如，在经纬度(116, 39)处画一个圆，在(108, 30)处画一个符号，这些都属于标注，也可以将标注理解为“点元素”。

我们知道，只知道经纬度是不能直

			
		

	





	

		

			

				
					
Svg图像显示的坐标规则

				
			

			

				

					旅途
				

				

					11-11
					
					5701
					
				

			

		

		

			
				
作者：cyqian来源：cynest.cn介绍：Cyqian BLOG上的一篇日志，作者在该日志上讲解了他对SVG坐标系统的理解,如果你也有这方面经验，建议跟贴说明哦．　　想用SVG做GIS服务，至今却还是遥遥无期，路漫漫不知有多远。数据转换都没有彻底搞定，数据本身和它的显示存在微妙却不可忽略的差异。下面就讲讲SVG图像显示的略显杂乱的坐标规则。svg的坐标系统　　所有的渲染都是在某个矩形（视口，

			
		

	





	

		

			

				
					
使用D3.js绘制地图并打点

				
			

			

				

					weixin_30527423的博客
				

				

					05-25
					
					1495
					
				

			

		

		

			
				
本篇简单介绍一下使用D3.js绘制地图，并更具经纬度在地图打点。最后根据点生成voronoi图及其三角网。
下载地图geoJson文件
去网上下载要绘制地图的geoJson文件。
使用d3.json()加载地图文件，这里为了方便加载我把geoJson文件放在了js文件里。

绘制地图

<!DOCTYPE html>
<html>

    <head>
   ...

			
		

	





	

		

			

				
					
【 D3.js 高级系列 — 7.0 】 标注地点

					
热门推荐

				
			

			

				

					十二月咖啡馆工作室
				

				

					06-06
					
					1万+
					
				

			

		

		

			
				
有时需要告诉用户地图上的一些目标，如果该目标是只需要一个坐标就能表示的，称其为“标注”。1. 标注是什么标注，是指地图上只需要一个坐标即可表示的元素。例如，在经纬度(116, 39)处画一个圆，在(108, 30)处画一个符号，这些都属于标注，也可以将标注理解为“点元素”。我们知道，只知道经纬度是不能直接在地图上作图的，需要先用投影函数将其转换成像素坐标。例如，如果要在中国地图上标出“北京”的位置

			
		

	





	

		

			

				
					
decent-patterns:使用单个unicode字符的非常简单的SVG模式

				
			

			

				

					05-09
				

			

		

		

			
				
JavaScript库如Snap.svg或D3.js通常用于操作SVG元素，但“decent-patterns”项目可能展示了一种更简洁、更直接的方法，即通过Unicode字符直接生成SVG。这种方式可能更加轻量级，同时也挑战了我们对SVG图形生成的传统...

			
		

	





	

		

			

				
					
vue中使用echarts地图

				
			

			

				

					qq_40974879的博客
				

				

					12-03
					
					7712
					
				

			

		

		

			
				
前言
数据可视化肯定少不了地图，所以近期也在看vue中如何使用地图。目前考虑的方法有两种。d3 和echarts。这两个的区别是d3是生成svg标签。对于大量数据的情况下dom操作可能会好一些。echarts是生成了canvas标签。这篇文章主要介绍echarts地图的使用，直接上代码！
准备工作
npm i echarts -S 
// echarts安装版本4.9.0
// vue 版本2.6.11
// 自己从https://datav.aliyun.com/tools/atlas/下载所需要区域的g

			
		

	





	

		

			

				
					
使用svg 放如png图片 并在png图片上边标注点

				
			

			

				

					weixin_56381842的博客
				

				

					12-09
					
					1018
					
				

			

		

		

			
				
使用svg 放如png图片 并在png图片上边标注点

			
		

	





	

		

			

				
					
svg 折线实现地图点击画线标记

				
			

			

				

					weixin_43294560的博客
				

				

					03-22
					
					1091
					
				

			

		

		

			
				
思路:
	将坐标转换成svg面板内的坐标
	鼠标按下获取坐标并生成圆标记->鼠标移动动态获取坐标并给折线,实现线随鼠标移动->设置右键点击事件取消绘图即取消之前两种事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name...

			
		

	





	

		

			

				
					
基于SVG的, 可缩放，可拖动，可点击的地图控件

				
			

			

				

					SOLO的博客
				

				

					01-14
					
					3796
					
				

			

		

		

			
				
序言
闲来无事写了个地图控件，基于SVG。可以缩放，可拖动，可点击。SVG具有体积小，不失真的优点。而且由于保存的是路径信息，可以做到复杂图形的点击判断功能。还是很香的。
效果

实现
原理，SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。在xml中定义了路径，只需要将路径解析保存到path中。再绘制出来就行了。
svg地图的获取
使用如下地址(需要科学上网)
Pixel Map
首页是这样的，支持世界上所有国家

下载中国地图

下载以

			
		

	





	

		

			

				
					
svg 地图_一秒带你制作出全国各省市区县地图

				
			

			

				

					weixin_39754603的博客
				

				

					12-05
					
					2450
					
				

			

		

		

			
				
有时候，一张好的地图可以让我们的PPT有更好的展示效果。现在社会文字信息到处充盈着，人们对于信息的接收却更加偏向于简洁、直白。今天，为大家介绍几款比较好的地图工具。1、dataV网址：http://datav.aliyun.com/tools/atlas/#&lat=32.36140331527543&lng=89.384765625&zoom=4这个网站属于阿里云里面的一...

			
		

	





	

		

			

				
					
【D3.js】2.1-使用 SVG Circles 创建散点图

				
			

			

				

					GDBBader的博客
				

				

					12-02
					
					432
					
				

			

		

		

			
				
【D3.js】2.1-使用 SVG Circles 创建散点图前面的章节主要是介绍如何通过D3制作出条形图，接下来将学习如何通过D3制作散点图。

			
		

	





	

		

			

				
					
经常用在签名设计上的SVG脚本字体太个性了

				
			

			

				

					llhf688的博客
				

				

					05-08
					
					676
					
				

			

		

		

			
				
一套适用于苹果电脑的字体应用——SVG脚本字体，个性独特的字体为您的特殊设计增添了独特的魅力！非常适合你的各种主题设计，邀请函，海报，网站徽标，品牌，标识，贺卡，卡片，T恤，包装设计等等。

字体介绍

你好朋友。这种新字体更加突破了界限。使用SVG技术来实现最大的真实感。字体保留原始工具的纹理和透明度。

它非常适合签名或设计，婚礼邀请和卡片，

包括：

SVG脚本

常规脚本

大写和小写
...

			
		

	





	

		

			

				
					
Highmaps 经纬度转换为svg图上坐标

				
			

			

				

					cxytomo的博客
				

				

					12-19
					
					3530
					
				

			

		

		

			
				
Highmaps手动加点，Highcharts Error #22错误解决帮办法

			
		

	





	

		

			

				
					
js 实现 地图经纬度之间的转化

				
			

			

				

					Missbelover的博客
				

				

					07-02
					
					2220
					
				

			

		

		

			
				
地图经纬度之间的转化
火星坐标（gcj02）转化为百度坐标
var location= {
	lon:"经度"
    lat:"纬度"
}
transform(location);
// 坐标转换
function transform(mars_point) {
    x_pi = 3.14159265358979324 * 3000.0 / 180.0;
    var baidu_point = {lon: 0, lat: 0};
    var x = mars_point.lon;
    va

			
		

	





	

		

			

				
					
6.SVG坐标系转换

				
			

			

				

					五石之瓠 以为大樽 浮于江湖 悠笑人生
				

				

					10-11
					
					2297
					
				

			

		

		

			
				
Chapter 6. Transforming The Coordinate System
到目前为止，所有图形都准确地绘制在它们属性所定义的地方。有时候，你想将一个图形进行旋转，缩放或移动到一个新的位置。为了完成这些任务，你将
transform 属性添加到到适当的 SVG 元素中。本章研究这些转换的细节。
The translate Transformation  平移转换
在第 5 章中，你见识了你可以使用 <use> 元素的 x 和 y 属性将一组图形对象(a group of grap

			
		

	





	

		

			

				
					
D3.js中SVG图形的放大、平移与拖拽控制技巧

				
			

			

				

					
				

			

		

		

			
				
在D3.js中，zoom功能是通过定义一个zoom行为，并将其应用到选定的SVG元素上实现的。Zoom行为是一个函数，它在用户进行缩放或拖拽操作时改变SVG元素的变换（transform）属性，从而改变视图中的元素位置和大小。  ### ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值