使用D3渲染中国地图

小咪咪 2021-12-14 08:11 429阅读 0赞

//1、先在页面中初始化一个svg标签
    		var w = 1000,h = 1000;
    		var svg = d3.select('body')
    					.append('svg')
    					.attr('width',w)
    					.attr('height',h)
    					.attr('transform','translate(0,0)');
    		//d3.geo  是d3中一些地图相关的方法
    		var projection =d3.geo.mercator()//投影的方法
    					.center([107,31])//经纬度
    					.scale(550)//放大的倍数
    					.translate([w/2,h/2]);//投影在某个位置
    		//坐标的转换	把相应经纬度的点 转换成 svg里面d属性相应的要去画的  坐标点
    		var path = d3.geo.path()
    					.projection(projection);
    		//d3中做服务器请求的  方法来的	
    		d3.json('./data/china_diaoyudao.json',function (err,root) {
    			//root  是用d3请求回来的数据
    			console.log(root.features);//数组  34个
    			d3.select('svg').selectAll('path')
    							.data(root.features)
    							.enter()
    							.append('path')
    							.attr('stroke','gray')
    							.attr('stroke-width','1')
    							.attr('d',function (data,index) {
    								return path(data);
    							})
    							.attr('fill',function (data,index) {
    								return color();
    							})
    							.on('mouseover',function () {
    								//this dom对象
    								d3.select(this)
    								.attr('fill','yellow')
    							})
    							.on('mouseout',function () {
    								d3.select(this)
    								.attr('fill',color())
    							})
    		})
    		//返回一个随机16进制的 颜色
    		function color(){
    		    return '#'+Math.floor(Math.random()*0xffffff).toString(16);
    		}

发表评论取消回复

表情：

评论列表（有 0 条评论，429人围观）

还没有评论，来说两句吧...

相关阅读

相关 Unity3D 渲染操作

步骤：第一步：先创建【纹理文件夹“Textures”】和【渲染文件夹“Material”】，并且存放纹理图片 ![在这里插入图片描述][watermar...

我会带着你远行/ 2024年04月17日 05:57/ 0 赞/ 32 阅读

相关 vue + echarts 实现以中国为中心的世界3D地图

1.预期效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

╰+攻爆jí腚メ/ 2023年10月05日 11:47/ 0 赞/ 11 阅读

相关 3D渲染--OpenGL

1、图形硬件 ![d0a783728c6be114ea3d0ee23dc918fe.png][] GPU（Graphics Processing Unit）：像素和帧

迷南。/ 2022年12月27日 14:15/ 0 赞/ 237 阅读

相关 [cesium] | 3d特效渲染

![20210701105002320.gif][] ![20210701155200353.gif][] ![20210701155217750.gif][] ![20

谁践踏了优雅/ 2022年10月11日 13:47/ 0 赞/ 196 阅读

相关 echarts 中国地图散点图渲染

准备 [echarts][] 中国地图的json（在最后） [GitHub的demo地址，可以直接拉下来][GitHub_demo] 先注册地图

比眉伴天荒/ 2022年09月16日 06:06/ 0 赞/ 389 阅读

相关 3D软件渲染教程：渲染实体

添加RenderText.java / @author yangshuohao / public class Rende

布满荆棘的人生/ 2022年09月04日 15:58/ 0 赞/ 168 阅读

相关 3D软件渲染教程

3D软件渲染教程系列通过Java编程语言从零到一实现一个软渲染器，从而学习3D软件渲染相关的知识。本次开发采用的IDE是NetBeans，大家可以去[官网][Link

心已赠人/ 2022年09月04日 14:49/ 0 赞/ 167 阅读

相关 3d地图迁徙类

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

刺骨的言语ヽ痛彻心扉/ 2022年09月03日 00:26/ 0 赞/ 180 阅读

相关使用D3渲染中国地图

//1、先在页面中初始化一个svg标签 var w = 1000,h = 1000; var svg = d3.select('body')

小咪咪/ 2021年12月14日 08:11/ 0 赞/ 430 阅读

相关 Echarts3实例 map地图值渲染

前言 Echarts Map中的地图需要按照区域所绑定的值进行渲染，以展示不同区域的属性值。实现效果 ![在这里插入图片描述][watermark_ty

Bertha 。/ 2021年09月17日 09:24/ 0 赞/ 450 阅读