精华内容
下载资源
问答
  • 使用Echarts实现地图3D效果
    千次阅读
    2022-04-15 14:44:39

    1.安装echarts

    2.获取坐标数据

    可以在该网站中选择对应的城市,获取json数据

    3.引入坐标json数据,初始化echarts并注册地图

    <div id="main" style="width: 600px; height: 500px;"></div>
    
    import jiangsu from "./jiangsu.json" // 引入地图json数据
    import echarts from "echarts"
    export default {
      name: "app",
      data(){
    	  return {}
      },
      mounted(){
    	  let chart = echarts.init(document.getElementById('main')); // 初始化echarts
    	  echarts.registerMap('JS',jiangsu); // 注册地图
      }
    }

    3. 使用geo属性生成地图

    data(){
    	  return {
    		  option:{
    			  geo:[
    				  {
    					map:'JS',
    					label:{
    						show:true,
    						color: '#eee'
    					},
    					itemStyle:{
    						color:'#2075B8', // 背景
    						borderWidth:'1', // 边框宽度
    						borderColor:'#fff', // 边框颜色
    					}
    				  }				  
    			  ]
    		  }
    	  }
      },
      mounted(){
    	  let chart = echarts.init(document.getElementById('main'));
    	  echarts.registerMap('JS',jiangsu);
    	  chart.setOption(this.option)
      }

    至此,一个简单的地图生成 ,效果如下:

     

     4.使用geo的top和zlevel属性来实现地图的堆叠效果

    *geo属性可以是一个数组,构建多个相同的map,根据实际效果调整top值来实现堆叠效果,zlevel值越大,图层则越往上

    data() {
    			return {
    				option: {
    					geo: [{
    							map: 'JS',
    							zlevel:5,
    							label: {
    								show: true,
    								color: '#eee'
    							},
    							itemStyle: {
    								color: '#2075B8', // 背景
    								borderWidth: '1', // 边框宽度
    								borderColor: '#fff', // 边框颜色
    							}
    						},
    						{
    							map: 'JS',
    							top:'11%',
    							zlevel:4,
    							itemStyle: {
    								color: '#3C5FA1', // 背景
    								borderWidth: '1', // 边框宽度
    								borderColor: '#3C5FA1', // 边框颜色
    							}
    						},
    						{
    							map: 'JS',
    							top:'12%',
    							zlevel:3,
    							itemStyle: {
    								color: '#163F6C', // 背景
    								borderWidth: '1', // 边框宽度
    								borderColor: '#163F6C', // 边框颜色
    							}
    						},
    						{
    							map: 'JS',
    							top:'13%',
    							zlevel:2,
    							itemStyle: {
    								color: '#31A0E6', // 背景
    								borderWidth: '1', // 边框宽度
    								borderColor: '#31A0E6', // 边框颜色
    								shadowColor: '#fff',  // 外部阴影 
    								shadowBlur:'10'
    							}
    						}
    					]
    				}
    			}
    		}

     效果如下:

     

     

    更多相关内容
  • 3DFP-家庭助理的3D平面图 我正在做一个为Home Assistant实施交互式3D平面图的项目。 计划是能够在一个仪表板中查看我的智能家居的完整概览,并以直观的方式轻松控制基本功能,例如打开灯和电器。 3D 模型是用 ...
  • echart.js实现动态3D效果,酷炫的效果,值得研究看看哈
  • 基于计算机视觉的平面3D效果显示.pdf
  • -- 3D柱状 --> <template> <div id="bar" style="width:800px;height:800px"></div> </template> <script> import * as echarts from 'echarts/core'; import { L..

    参考文档 https://www.jb51.net/article/221784.htm

    注意实现版本

     代码如下

    <!-- 3D柱状图 -->
    <template>
    	<div id="bar" style="width:800px;height:800px"></div>
    </template>
    
    <script>
    import * as echarts from 'echarts/core';
    import { LegendComponent } from 'echarts/components';
    import { CustomChart } from 'echarts/charts';
    echarts.use([LegendComponent, CustomChart]);
    let colorList = ['#33b56a', '#fdcf5c', '#4c90ff', '#fe7b7a', '#69ccf6', '#a38bf8', '#ff9561', '#8cb0ea', '#fe81b4', '#ffb258']
    export default {
    	name: "Bar3D",
    	data() {
    		return {
    			data: [],
    			option: {},
    
    		}
    	},
    	mounted() {
    		this.data = [
    			{ name: '京哈高速', value: 10 },
    			{ name: '京哈高速1', value: 20 },
    			{ name: '京哈高速2', value: 30 },
    			{ name: '京哈高速3', value: 40 },
    			{ name: '京哈高速4', value: 50 },
    			{ name: '京哈高速5', value: 60 },
    			{ name: '京哈高速6', value: 70 },
    			{ name: '京哈高速7', value: 80 },
    			{ name: '京哈高速8', value: 90 },
    			{ name: '京哈高速9', value: 100 },
    			{ name: '京哈高速10', value: 110 },
    			{ name: '京哈高速11', value: 120 }
    		];
    		// 拼轴显示和数据的数组
    		let xAxisText = [];
    		let dataList = [];
    		this.data.forEach(item => {
    			xAxisText.push(item.name);
    			dataList.push(item.value)
    		})
    		// 从这里开始 创建自定义图形 —— 长方体的正面
    		let MyCubeRect = echarts.graphic.extendShape({
    			shape: {
    				x: 0,
    				y: 0,
    				width: 180,      // 长方体宽度
    				zWidth: 8,      // 阴影折角宽
    				zHeight: 4      // 阴影折角高
    			},
    			buildPath: function (ctx, shape) {
    				console.log(ctx, shape);
    				const api = shape.api;
    				const xAxisPoint = api.coord([shape.xValue, 0]);
    				const p0 = [shape.x, shape.y];
    				const p1 = [shape.x - shape.width / xAxisText.length, shape.y];
    				const p4 = [shape.x + shape.width / xAxisText.length, shape.y];
    				const p2 = [xAxisPoint[0] - shape.width / xAxisText.length, xAxisPoint[1]];
    				const p3 = [xAxisPoint[0] + shape.width / xAxisText.length, xAxisPoint[1]];
    
    				ctx.moveTo(p0[0], p0[1]); //0
    				ctx.lineTo(p1[0], p1[1]); //1
    				ctx.lineTo(p2[0], p2[1]); //2
    				ctx.lineTo(p3[0], p3[1]); //3
    				ctx.lineTo(p4[0], p4[1]); //4
    				ctx.lineTo(p0[0], p0[1]); //0
    				ctx.closePath();
    			}
    		})
    		// 创建第二个自定义图形 —— 长方体的上面和侧面
    		let MyCubeShadow = echarts.graphic.extendShape({
    			shape: {
    				x: 0,
    				y: 0,
    				width: 180,
    				zWidth: 8,
    				zHeight: 4
    			},
    			buildPath: function (ctx, shape) {
    				const api = shape.api;
    				const xAxisPoint = api.coord([shape.xValue, 0]);
    				//   const p0 = [shape.x, shape.y];
    				const p1 = [shape.x - shape.width / xAxisText.length, shape.y];
    				const p4 = [shape.x + shape.width / xAxisText.length, shape.y];
    				const p6 = [shape.x + shape.width / xAxisText.length + shape.zWidth, shape.y - shape.zHeight];
    				const p7 = [shape.x - shape.width / xAxisText.length + shape.zWidth, shape.y - shape.zHeight];
    				const p3 = [xAxisPoint[0] + shape.width / xAxisText.length, xAxisPoint[1]];
    				const p5 = [xAxisPoint[0] + shape.width / xAxisText.length + shape.zWidth, xAxisPoint[1] - shape.zHeight];
    
    				ctx.moveTo(p4[0], p4[1]); //4
    				ctx.lineTo(p3[0], p3[1]); //3
    				ctx.lineTo(p5[0], p5[1]); //5
    				ctx.lineTo(p6[0], p6[1]); //6
    				ctx.lineTo(p4[0], p4[1]); //4
    
    				ctx.moveTo(p4[0], p4[1]); //4
    				ctx.lineTo(p6[0], p6[1]); //6
    				ctx.lineTo(p7[0], p7[1]); //7
    				ctx.lineTo(p1[0], p1[1]); //1
    				ctx.lineTo(p4[0], p4[1]); //4
    				ctx.closePath();
    			}
    		});
    		echarts.graphic.registerShape('MyCubeRect', MyCubeRect);
    		echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow);
    		this.option = {
    			color: ['#33b56a', '#fdcf5c', '#4c90ff', '#fe7b7a', '#69ccf6', '#a38bf8', '#ff9561', '#8cb0ea', '#fe81b4', '#ffb258'],
    			title: {
    				text: '验算路线排行榜',
    				left: 20,
    				top: 20
    			},
    			legend: {
    				show: true,
    				top: 25
    			},
    			grid: {
    				left: '3%',
    				right: '4%',
    				top: '15%',
    				bottom: '3%',
    				containLabel: true
    			},
    			xAxis: {
    				type: 'category',
    				data: xAxisText,
    				// boundaryGap: true,
    				interval: 0,
    				axisLabel: {
    					color: '#333',
    					//  让x轴文字方向为竖向
    					// interval: 0,
    					// formatter: function (value) {
    					// 	return value.split('').join('\n')
    					// }
    				}
    			},
    			yAxis: {
    				type: 'value'
    			},
    			tooltip: {
    				trigger: 'axis',
    				axisPointer: {
    					type: 'shadow'
    				},
    			},
    			series: [
    				{
    					name: '次数',
    					type: 'custom',
    					renderItem: (params, api) => {
    						let location = api.coord([api.value(0), api.value(1)]);
    						return {
    							type: 'group',
    							children: [{
    								type: 'MyCubeRect',
    								shape: {
    									api,
    									xValue: api.value(0),
    									yValue: api.value(1),
    									x: location[0],
    									y: location[1]
    								},
    								style: {
    									fill: colorList[params.dataIndex % colorList.length]
    								},      // api.style()——继承原本的样式
    							}, {
    								type: 'MyCubeShadow',
    								shape: {
    									api,
    									xValue: api.value(0),
    									yValue: api.value(1),
    									x: location[0],
    									y: location[1]
    								},
    								style: {
    									fill: colorList[params.dataIndex % colorList.length],
    									text: ''            // 继承原本样式的基础上将label清空 如果不清空生成的图上会显示两个重叠的label
    								}
    							}]
    						}
    					},
    					// stack: '总量1',
    					label: {
    						show: true,
    						position: 'top',
    						color: '#333',
    						formatter: `{c}次`,
    						fontSize: 16,
    						distance: 15
    					},
    					itemStyle: {
    						color: (params) => {
    							// 使每根柱子颜色都不一样 
    							return colorList[params.dataIndex % colorList.length]
    						}
    					},
    					data: dataList
    				}]
    		}
    		this.initEcharts();
    	},
    	methods: {
    		initEcharts() {
    			let myChart = echarts.init(document.getElementById('bar'))
    			myChart.setOption(this.option)
    		}
    	}
    }
    
    </script>

     git地址 echarts集合git地址https://gitee.com/zhangjinhao/echarts

    展开全文
  • web3D构建,根据房间二维平面图构建了三维空间图,可实现房间开关门,移动,旋转,可各个角度观察房屋,使用了threejs库
  • 平面图片制作3D模型【3DsMax】

    千次阅读 2020-07-20 10:06:56
    先在网上找一张简单的素材图片,如所示。(图片最好背景颜色和图形颜色2种颜色) 02 用AI软件打开素材图片,如所示。 03 在点【对象】菜单中,点【图像描摹】,选择【建立并扩展】,如所示。 图像路径就...

    01

    先在网上找一张简单的素材图片,如图所示。(图片最好背景颜色和图形颜色2种颜色)

    02

    用AI软件打开素材图片,如图所示。

    03

    在点【对象】菜单中,点【图像描摹】,选择【建立并扩展】,如图所示。

    图像路径就出来了。

    04

    在【文件】菜单中点【存储为】,如图所示。

    选择保存路径,命名文件名,保存类型为AI,点击保存,如图所示。

    选择版本文件的保存为Illustrator 3,点击确定,如图所示。(保存文件的版本越低越好)

    05

    打开3dsmax软件,点击【导入】如图所示。

    选择刚保存的ai文件,如图所示。

    勾选【合并对象到当前场景】确定,如图所示。

    勾选【多个对象】确定,如图所示。

    06

    导入到3dsmax后,观察路径多出的边框没有左右需要删除,在修改面板中,选择【样条线】层级,在视图中选择边框按delete键删除,如图所示。

    07

    在可编辑样条线下,点击【附件多个】,在弹出的附件多个对话框中,选中所有的对象,附加在一起,如图所示。(注意图片的框中的附加是错误的,正确的是附件多个)

    08

    添加【挤出】修改器,设置数量为0.5,如图所示。

    09

    最终效果如图所示


    文章推荐阅读 【 学习企鹅圈:1072172722 】 :

    3D游戏建模前景如何?是做什么的?大牛分享月薪2万教程工具笔记【自提】

    次世代3D游戏究竟有什么不同,看人物建模与场景搭建,第一眼就有答案!

    什么是次世代游戏?科普次世代游戏角色制作过程

    游戏行业很赚钱?那是你不了解次世代游戏建模师这个职业!

    学习建模很困难?资深3D建模师教你如何轻松过万

    一个新人想要从零基础成为次世代游戏设计师,需要哪些阶段呢?

    展开全文
  • 一般的平面效果,通过改变水平和垂直坐标就能实现,再加上深度,就能在视觉上的产生3D(三维)的效果
  • 用Jpgraph类库制作统计功能及其强大,不仅可以绘制平面图形,而且可以绘制具有3D效果的图形。直接使用GD2函数库可以绘制出各种图形,当然也包括3D饼图,但使用GD2函数绘制3D图形要花费大量的时间,而且相对复杂,...
  • 3d地图实例js

    2018-07-24 20:05:35
    javascript的3d效果地图,全球的地图,很炫酷;javascript的3d效果地图,全球的地图,很炫酷
  • echarts 3d饼图资源

    2021-05-12 15:45:55
    echarts 3d饼图资源
  • 平面图像跟踪对图像有一定的要求,纹理细节丰富,纹理不是简单重复,长宽比不能太大。 官方提供了图像检测工具,将图像上传到指定地址,可以知道可识别度。 地址:https://www.easyar.cn/targetcode.html 平面图像...

    总体说明

    平面图像跟踪对图像有一定的要求,纹理细节丰富,纹理不是简单重复,长宽比不能太大。 官方提供了图像检测工具,将图像上传到指定地址,可以知道可识别度。

    地址:https://www.easyar.cn/targetcode.html

    图像检测

    平面图像跟踪主要是ImageTracker和ImageTarget这两个游戏对象,每个ImageTarget对应一个被跟踪的图像,场景中也可以同时出现多个ImageTracker。

    总体结构

    ImageTracker游戏对象相关

    • 【enable】属性可以用于获取当前跟踪器状态,也可以用于启用/禁用当前跟踪器从而实现启用/禁用平米图像识别的功能。
    • 【Tracker Mode】选项设置跟踪的时候是质量优先还是性能优先,默认是质量优秀(Prefer Quality)。
    • 【Simultaneous Target Number】设置指定当前的跟踪器同时跟踪目标的最大数量。一个场景中,能同时被跟踪的图像数量是所有ImageTracker的Simultaneous Target Number属性值的和。

    ImageTarget游戏对象相关

    • 【Tracker】设置, 每个ImageTarget游戏对象必须指定一个ImageTracker游戏对象才能被跟踪,可以通过修改该设置实现对图像的加载和卸载。
    • 【Active Control】选项用于设置ImageTarget游戏对象是否激活和激活方式。
    • 【Source Type】选项用于设置跟踪类型,除了可以直接跟踪图片“Image File”,还可以跟踪只包含关键信息文件大小小很多的“Target Data File”。
      “Target”则是用来获取云识别的结果的。
    • 【事件】ImageTargetController类提供了4个事件,分别是图像被识别“TargetFound”,被识别图像从视野消失“TargetLost”,图像加载完成“TargetLoad”和图像卸载完成“TargetUnload”。

    单个图像跟踪

    新建一个场景,设置场景中的Main Camera的Clear Flags属性为Solid Color。

    单个图像跟踪

    将EasyAR_ImageTracker-1预制件拖到场景中。

    单个图像跟踪

    将ImgaeTarget预制件拖到场景中。

    单个图像跟踪

    设置利用图片文件进行跟踪,设置Source Type属性为Image File,设置Path Type为StreamingAssets,设置Paht为“bus.jpg”,即跟踪图像相对路径,设置Scale属性为“0.2”。

    注意,这里的Scale的大小是指图像在被跟踪的时候,在现实空间的宽度,单位为米。

    单个图像跟踪

    在ImageTarget游戏对象下添加要显示的3D模型。

    单个图像跟踪

    运行效果如下:

    在这里插入图片描述

    EasyAR还可以利用Data文件进行跟踪。点击菜单EasyAR–Image Target Data,在弹出窗口中,设置Generate From为Image。将要跟踪的图像拖到Image Path中。设置Name和Scale属性,然后点击Generate按钮。点击之后,默认会在项目的SteamingAssets目录下生成“.etd”文件。

    单个图像跟踪

    设置Source Type属性为Target Data File,设置Path Type为StreamingAsset】,设置Paht为“birds.etd”,即跟踪数据文件相对路径。

    单个图像跟踪

    同时跟踪多个图像

    在上面的例子中,修改Simultaneous Target Number值,将其从默认1改为2即可。

    同时跟踪多个图像

    运行效果如下:

    当视野中的图像数量小于等于跟踪数量的时候,则所有图像都会被跟踪。当视野中的图像数量大于跟踪数量的时候,最先被跟踪的图像会被跟踪。

    在这里插入图片描述

    EasyAR还可以使用多个Tracker进行跟踪

    在这里插入图片描述

    运行效果如下:

    在这里插入图片描述

    EasyAR也可以同时跟踪同一图像的多个副本

    在这里插入图片描述

    运行效果如下:

    在这里插入图片描述

    平面图像跟踪程序控制

        public ImageTrackerFrameFilter tracker;
        public ImageTargetController targetController;
    
        void Awake()
        {
            if (targetController)
            {
                targetController.TargetFound += () =>
                {
                    Debug.LogFormat(...);	//当图像被跟踪到
                };
                targetController.TargetLost += () =>
                {
                    Debug.LogFormat(...);	//当图像从视野消失
                };
                targetController.TargetLoad += (Target target, bool status) =>
                {
                    Debug.LogFormat(...);	//加载图像
                };
                targetController.TargetUnload += (Target target, bool status) =>
                {
                    Debug.LogFormat(...);	//卸载图像
                };
            }
        }
        public void SetTracker(bool status)
        {
            tracker.enabled = status;	//设置是否跟踪
        }
        public void SetTarget(bool status)
        {
            if (status)
            {
                targetController.Tracker = tracker; //加载图像
            }
            else
            {
                targetController.Tracker = null;    //卸载图像
            }
        }
    

    视频版地址:

    https://www.bilibili.com/video/BV1VZ4y147kj/

    展开全文
  • 3Dmax建筑效果图教程_-_平面设计教程
  • 地图为3D地图(平面地图原理也是一样的), 效果酷炫,,地图可旋转,缩放,鼠标悬停到地图区域和点上有提示信息, 但动态线条未能实现鼠标悬停提示效果(在平面地图中能实现, 在3D地图中不生效), 有知道的亲请留言评论告诉...
  • 3d效果图一般制作步骤

    千次阅读 2021-06-27 06:50:26
    3d效果图一般制作步骤3D效果图就是立体的模拟...一、导入CAD平面图在效果图制作中,经常会先导入CAD平面图,再根据导入的平面图的准确尺寸在3ds中建立造型。DWG格式是标准的AutoCAD绘图格式。单击菜单栏中的(文件...
  • 带阴影的3d效果饼图

    2014-04-30 10:13:41
    VC2010下用QT编写的带阴影的3d效果饼图画法小程序,双击可移出饼角,可改变饼角的颜色。附件是源码及说明,可执行程序请自行编译。
  • DWG格式的效果平面图

    2013-06-15 11:34:55
    dwg格式的平面图3d效果图一起下载。
  • 手把手教你制作炫酷的PCB板3D效果图

    千次阅读 2021-07-13 17:03:02
    下面和大家讲解用AD+keyshot软件制作高逼格的3D电路板效果图效果图 1、制作贴图 1、打开AD软件,进入PCB的3D视图。 2、在3D视图下,按下B键调出视图配置文件,关闭3D视图显示。由于在渲染软件中只是渲染出效果图...
  • CSS3 3D动画效果的柱状图表,这个图表是用来统计步数的,不过用于其它数据统计当然也行了。初始化时候,一切都是平面的,当鼠标有点击运作的时候,图表立即慢慢变成3维状态,图片也变成三维的了,周边自动生成阴影...
  • 【Unity3D平面绘图——GL与GUI

    万次阅读 2017-05-09 15:48:25
    在Unity3D中绘制一个平面图形可不容易,可别惯性思维觉得,嗯,这引擎3D的事情都能解决了,2D的不叫事情。其实除去布置UI,在Unity3D中绘制一个2D平面图形是很蛋疼的一件事情。不然的话,也不会有大量的平面图形绘制...
  • 2D、3D弧形轮播

    热门讨论 2017-09-13 12:09:14
    主要处理循环替换显示问题 (如:12张图组成一个圆弧,但总共有120张图需要呈现,如何在滑动中进行显示块的替换,并毫无卡顿),效果参考:http://blog.csdn.net/u013224722/article/details/77004123
  • 学会用CSS3的3D效果制作一个正方体,有助于增强我们对3D场景的旋转和位移属性的理解。下面的动态就是利用3D旋转位移,结合动画效果制作的。感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加各种动画...
  • Cover Commander中文版是一款简单易用的包装盒3D效果图制作软件,Cover Commander可以让你不需要专业的设计能力就可以制作出看起来非常专业三维包装效果,它非常适合于网络发布或者打印的模拟产品包装效果以及...
  • 给网站添加访问地图3d版,平面

    千次阅读 2022-01-01 16:36:31
    平面版 实现 打开 https://clustrmaps.com/site/1bf58,创建一个小部件 输入你要统计的网站地址 选择你要那个版本的 3D版,右边那个 点进去有相应的js代码,复制就行了 比如我的代码是,效果是最开始说明...
  • 手把手教你如何用AI绘制3D效果形象 来源:网易UEDC(公众号)作者:祖琳萌萌小兔来袭 这只粉红小兔子形象是国外设计师通过3D软件渲染而成,本文是通过使用2D矢量工具illustrator去模拟逼真的3D效果。经常使用AI的小...
  • 平面阵列天线的3D方向的Python综合

    千次阅读 2019-10-30 19:26:23
    概要 我的前面一篇博客阵列天线方向乘积定理的Python实现已经介绍了怎么用Python实现任意直线阵的综合。接下来,我将用Python实现任意平面阵的综合。和HFSS综合的结果基本完全一致。
  • 这篇博客将学习利用 calib3d 模块在图像中创建一些 3D 效果3D坐标轴,3D立方体)。
  • Unity 2D图片的3D效果(1)——阴影

    千次阅读 2019-12-02 23:33:17
    所以才有了“把2d图片展现出3d效果”的需求。 最终花了一个礼拜的时间把这个功能搞出来。这算是我写的第一个“有点东西”的Shader,兴奋之余,也觉得这是一个值得记录下来的功能。 3d效果有阴影和透视两个需求,透视...
  • vue+mapbox实现地图3D地图展示效果

    千次阅读 2020-10-07 20:07:39
    其中包括了mapbox各种插件的使用包括了全模式,定位,地图遮挡层,鹰眼地图,地图标注,测量距离、面积。具体代码示例如下: <template> <el-container> <el-header> <el-row class=...
  • 平面形式的轮播展示照片集略显单调,将图片组合排列成3D 球状,螺旋状或者任意自定义的字母文字形式排布,会让效果显得更立体。 效果动图:https://blog.csdn.net/l17768346260/article/details/105032134

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,528
精华内容 12,611
关键字:

平面图3d效果