精华内容
下载资源
问答
  • 下载3d地图
    2022-07-01 17:14:09


    前言

    之前我们已经成功在 vue2 中渲染了 echarts3D 地图,那么这次我们直接进阶成 vue3渲染 geo3D地图,并且承接上一章末尾许下的小彩蛋,我们在 3D 地图上加入, 3D 柱状图,和热力图!

    本文框架基于 vue3.x setup + vite + TypeScript


    一、echarts是什么?

    “ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。”

    二、使用步骤

    1.引入echarts库,3d地图必须安装echarts-gl依赖

    npm install echarts --save
    npm install echarts-gl --save
    

    2.制作地图JSON文件

    在渲染3d地图之前,我们还需要到<<DATAV.GeoAltas地理小工具系列>>网站下载我们需要的json数据,这里我用浙江地图做示例下载好了json文件
    请添加图片描述

    “zhejiang.json”

    3.引入到vue组件中

    因为本篇文章是进阶版,所以就不做过多的教程步骤教程了!那么直接上全部代码(如果想要了解详细步骤原理请查看上一篇文章内容哦~)

    <template>
      <div class="map" id="mapEchart" style="width:100%;height:100vh"></div>
    </template>
    
    <script setup>
    // 引入工具
    import geoJson from "./zhejiang.json"; //该文件路径改成自己项目中的文件路径即可
    import * as echarts from "echarts";
    import "echarts-gl"; //3D地图插件
    import { onMounted } from "vue";
    
    // 定义echarts方法
    const chartMap = () => {
      var myChart = echarts.init(document.getElementById("mapEchart"));
      // 重点:不要遗漏这句代码!!
      echarts.registerMap("zhejiang", geoJson);
      // 图表配置项
      let option = {
        tooltip: {
          show: true,
        },
        //热力图配置项
        visualMap: [
          {
            type: "continuous",
            text: ["xxx"],
            calculable: true,
            max: 250,
            inPange: {
              color: ["#87aa66", "#eba438", "#d94d4c"],
            },
          },
        ],
        //3D地图配置项
        geo3D: {
          map: "zhejiang",
          roam: true,
          itemStyle: {
            color: "#007aff",
            opacity: 0.8,
            borderWidth: 0.4,
            borderColor: "#000",
            // areaColor: '#fff'
          },
          viewControl: {
            autoRotate: true,
            autoRotateAfterStill: 3,
            distance: 120,
            minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
            maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
            minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
            maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
            animation: true, // 是否开启动画。[ default: true ]
            animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
            animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
          },
    
          emphasis: {
            disabled: true, //是否可以被选中
            label: {
              //移入时的高亮文本
              show: true,
              color: "#333", //显示字体颜色变淡
              fontSize: 18, //显示字体变大
            },
            itemStyle: {
              color: "#ff7aff", //显示移入的区块变粉色
            },
          },
          label: {
            show: true,
            position: "top",
            color: "#111", //地图初始化区域字体颜色
            fontSize: 14,
            lineHeight: 16,
          },
          shading: "lambert",
          light: {
            //光照阴影
            main: {
              // color: "#fff", //光照颜色
              intensity: 1, //光照强度
              //shadowQuality: 'high', //阴影亮度
              shadow: true, //是否显示阴影
              shadowQuality: "medium", //阴影质量 ultra //阴影亮度
              alpha: 55,
              beta: 10,
            },
            ambient: {
              intensity: 0.7,
            },
          },
        },
        series: [
        //3D柱状图配置项
          {
            name: "xxx",
            type: "bar3D",
            coordinateSystem: "geo3D",
            barSize: 3,
            shading: "lambert",
            opacity: 1,
            bevelSize: 0.2,
            label: {
              show: false,
              formatter: "{a}",
            },
            //自定义的data数组 value中数组的含义:[杭州的经度or纬度,要展示的3d柱状图数值大小]
            data: [
              { name: "杭州", value: [120.161693, 30.280059, 643] },
              { name: "温州", value: [120.705869, 28.001095, 98] },
              { name: "湖州", value: [120.094566, 30.899015, 72] },
              { name: "嘉兴", value: [120.762045, 30.750912, 131] },
              { name: "绍兴", value: [120.586673, 30.036519, 116] },
              { name: "丽水", value: [119.929503, 28.472979, 40] },
              { name: "衢州", value: [118.880768, 28.941661, 22] },
              { name: "金华", value: [119.654027, 29.084455, 156] },
              { name: "台州", value: [121.426996, 28.662297, 110] },
              { name: "宁波", value: [121.556686, 29.880177, 163] },
              { name: "舟山", value: [122.214339, 29.991092, 20] },
            ],
          },
        ],
      };
      myChart.setOption(option);
      //让可视化地图跟随浏览器大小缩放
      window.addEventListener("resize", () => {
        charts.resize();
      });
    };
    
    onMounted(() => {
      // 挂载echart
      chartMap();
    });
    </script>
    
    <style lang="less" scoped>
    </style>
    
    

    总结

    请添加图片描述

    在vue3中引入3d地图echarts是不是也非常简单呢!

    更多相关内容
  • 谷歌卫星地图下载器破解版 谷歌3d卫星地图下载,欢迎下载,1111
  • echarts3D地图数据(含全国和省js以及全国、省、地市级json).zip
  • unity3D 野外地图资源

    2020-12-18 21:05:09
    unity3D 野外地图资源
  • (注:Bigemap 3D地球是一个三维地图浏览功能,是基于高程数据进行的实时渲染,无法进行下载标注等,如需三维城市、创建三维地图模型等,可通过右侧【联系我们】进行咨询。另:3D地球浏览城市时无3D效果) 3D地球...

    更多示例代码:http://www.bigemap.com/offlinemaps/gl.html

    bigemap3d地球

    3D地球依据高程数据等对地表进行渲染,实现地表的起伏,模拟出真实的三维场景,让你有如身临其境般的感觉。

    (注:Bigemap 3D地球是一个三维地图浏览功能,是基于高程数据进行的实时渲染,无法进行下载标注等,如需三维城市、创建三维地图模型等,可通过右侧【联系我们】进行咨询。另:3D地球浏览城市时无3D效果)

    3D地球使用详解

    1、打开Bigemap地图下载器,点击左下角【3D】地图小图标即可进入3D地球模式

    切换3D.gif

    2、进入3D模式后,滚动鼠标滚轮放大地球,找到自己想查看的区域,或使用【地名查找】功能输入地名进行查找

    地点查找.gif

    3、按住鼠标左键,拖动地图到野外有山的地方(注:城市无3D效果,如需三维城市、创建三维地图模型等,可通过右侧【联系我们】进行咨询),然后摁下鼠标滚轮并摁住不放,前后左右滑动鼠标就可以发现3D效果出来了,同时可以360°调整观察视角。

    bigemap3d地球

    4、在软件左上角区域,点击【地名查找】,可搜索全球任意地点进行浏览

    bigemap3d地球

    另外,你也可以试试无限缩小地球,如以下图↓↓

    微信图片_20180802102837.gif

    无限缩小之后你会发现星空开始向中间聚拢

    微信图片_20180802103112.gif

    缩放地球到一定大小并调整角度还能看到太阳月亮也出来了

    微信图片_20180802103104.gif

    微信图片_20180802103705.gif

    注:Bigemap-3D地球是一个三维地图浏览功能,是基于高程数据进行的实时渲染,无法进行下载标注等,如需三维城市、创建三维地图模型等,可通过右侧【联系我们】进行咨询

    展开全文
  • 仿谷歌3d地图.zipIOS应用例子源码下载仿谷歌3d地图.zipIOS应用例子源码下载 1.适合学生学习研究参考 2.适合个人学习研究参考 3.适合公司开发项目技术参考
  • 利用ros3djs实现 turtlebot3 在web 端3d显示但不包含键盘控制也不包含后端只是前端代码。上传的代码我已经验证过了,严格按照步骤一步一步做,先把 自己 turtlebot3 仿真搭起来跑通。技术支持需要另外收费; 注意...
  • 一个园区的obj模型,并附有部分纹理. 同时还有高德地图加载3dobj模型实例
  • html3D地图

    2012-08-15 18:46:18
    html3D地图,下载下来直接可以使用观看,3D效果非常好。
  • FlightAirMap支持地图、空域、METAR、PDO 和 ADS-B。 浏览基于特定飞机、航空公司或机场的数据...卫星可以显示在 3D 地图上。 在 12 月,您可以跟踪圣诞老人的航班。 对于船只,AIS 是受支持的来源,因此船只可以在
  • 3d地图背景经典幻灯片模板下载,关键词:红色背景幻灯片模板,3d地图PPT背景图片,经典幻灯片模板,商务PPT模板,PPT格式; 3d地图背景经典幻灯片模板下载,关键词:红色背景幻灯片模板,3d地图PPT背景图片,经典...
  • 它看起来像一个城市的3D模型。您可以放大和缩小,旋转 90 度并四处移动。使用搜索框查找地球上的位置。单击"打开较大的地图"按钮时,地图将在外部网站上打开。我们创建了这个扩展,以规划您的下一个假期在流行的城市和...
  • 下载好的josn文件重命名,简短点. 一共就三个文件 第一个就是json文件, 第二个是myMap.js (function(root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an ...

    在这里插入图片描述
    先看效果图:
    在这里插入图片描述
    1,获取相当于的json文件,推荐一个获取各个市县的json文件地址点击前往
    将下载好的josn文件重命名,简短点.
    一共就三个文件
    第一个就是json文件,

    第二个是myMap.js

    (function(root, factory) {
      if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
      } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
      } else {
        // Browser globals
        factory({}, root.echarts);
      }
    })(this, function(exports, echarts) {
      var log = function(msg) {
        if (typeof console !== 'undefined') {
          console && console.error && console.error(msg);
        }
      };
      if (!echarts) {
        log('ECharts is not Loaded');
        return;
      }
      if (!echarts.registerMap) {
        log('ECharts Map is not loaded');
        return;
      }
    
      // 获取地图数据,这个json就刚刚下载的那个json文件
      let json = require('./shenzhen.json');
      
      // 注册地图,第一个参数就是最后一个文件里面相应的的参数
      echarts.registerMap('广东深圳', json);
    });
    
    

    第三个文件,组件页面

    <template>
       <div id="myMap"></div>
    </template>
    import '@/util/myMap.js'; //引入注册地图的js
    let myChartMap = null;//地图
    export default {
    	data() {
    		return {
    			optionMap:{
    				geo: {
    				map: '广东深圳',
    				roam: true,
    				zoom: 1.2,
    				scaleLimit: {  //缩放级别限制
    					min: 1,
    					// max: 12
    				},
    				aspectScale: 1.1, //地图的长宽比
    				itemStyle: {
    					borderWidth: 2,
    					borderColor: '#0090fe', //边框颜色
    					areaColor: '#003399', //地图区域颜色
    					shadowColor: '#182f68',
    					shadowOffsetX: 0,
    					shadowOffsetY: 15
    				},
    				label: {
    					color: '#fff',
    					fontWeight: 'bold',
    					show: true,
    				},
    				emphasis: {
    					itemStyle: {
    						show: 'true',
    						borderWidth: 4,
    						borderColor: '#b2163c', //边框颜色
    						areaColor: '#531f67', //鼠标移上去的颜色
    					},
    					label: {
    						color: '#fff',
    						fontWeight: 'bold',
    						show: true,
    					}
    				},
    			  },
    		      series: [{
    		          type: 'scatter',
    		          coordinateSystem: 'geo',
    		          data:[],
    		          symbolSize: '20',
    		          symbol: 'circle',
    		          itemStyle: { color: "orange"}
    		       }],
    			}
    		}
    	},
    	methods:{
    	  secaorange() {
      		myChartMap = echarts.init(document.getElementById('myMap'));
    	    myChartMap.setOption(this.optionMap);
    		window.addEventListener("resize",()=> {
    			myChartMap.resize();
    		});
          }
        }
    }
    

    到这就可以成功引入地图了,下面进行其他需求
    加点
    函数里面改下就可以了,调接口获取[{}]格式的数据进行处理

        secaorange() {
          myChartMap = echarts.init(document.getElementById('myMap'));
          organizationQueryWithPage().then(data=>{
            var dataObj = {}
            data.result.records.map(v=>{
              dataObj = {
                name:v.name,
                value:[Number(v.longitude),Number(v.latitude),v.id],
              }
              this.optionMap.series[0].data.push(dataObj);
            })
            this.optionMap.series[0].data = JSON.parse(JSON.stringify(this.optionMap.series[0].data))
            window.addEventListener("resize",()=> {
              myChartMap.resize();
            });
            myChartMap.setOption(this.optionMap);
          })
        },
    

    给点添加点击事件
    添加一个click就可以了.

    myChartMap.on('click', (data) => {
    	// console.log(data);
    });
    

    📢没了,结束了,是不是很简单呐,如有问题,欢迎留言。
    📢如果此篇博文对您有帮助,还请动动小手点赞 👍 收藏 ⭐留言 📝呐~,谢谢 ~ ~

    展开全文
  • 下载如有问题,可私信博主。下载前建议先查看博客内容,其地址为:https://blog.csdn.net/QQ98281642/article/details/122306496
  • IOS应用源码之仿谷歌3d地图 .rar
  • 3d地图】vue中使用echarts geo3D

    千次阅读 2022-06-24 10:54:56
    想必对于一个前端来说,大家对echarts并不陌生,本次文章主要记录了我在使用echarts 渲染3d地图过程中的一点心得,本文代码包含详细的配置项注释~


    前言

    想必对于一个前端来说,大家对echarts并不陌生,本次文章主要记录了我在vue2中使用echarts 渲染3d地图过程中的一点心得,本文代码包含详细的配置项注释~


    一、echarts是什么?

    “ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。”

    二、使用步骤

    1.引入echarts库,3d地图必须安装echarts-gl依赖

    npm install echarts --save
    npm install echarts-gl --save
    

    2.制作地图JSON文件

    在渲染3d地图之前,我们还需要到<<DATAV.GeoAltas地理小工具系列>>网站下载我们需要的json数据,这里我用浙江地图做示例下载好了json文件
    请添加图片描述

    “zhejiang.json”

    3.引入到vue组件中

    我们可以创建一个组件,创建一个Charts.vue文件,来渲染我们的3D地图
    请添加图片描述

    为了演示方便,我们可以在组件中局部引入echarts的依赖。
    当然在项目中,因为需要重复使用我们也可以在vue中配置全局引入(此文章不做全局引入教程)

    局部引入方式代码如下:

    import geoJson from "./zhejiang.json"; //省份的json格式
    
    import * as echarts from 'echarts'; 
    import "echarts-gl" //3D地图插件
    

    4.创建一个有固定宽高大小的div元素

    那么把依赖引入到vue组件后,我们就可以准备在html中创建一个有高度和宽度的div容器来放置echarts地图的canvas(注意这个div一定要宽高才可以渲染出地图)

    html代码如下:

    <template>
      <div class="map">
        <div class="map-container">
          <div class="map-container-title">xxx标题</div>
          <div class="map-chart" id="mapEchart"></div>
        </div>
      </div>
    </template>
    

    css代码如下:

    <style lang="less" scoped>
    .map {
      display: flex;
      justify-content: center;
      width: 100%;
      height: 100vh;
      .map-container {
        width: 100%;
        height: 100%;
        background: #fff;
        position: relative;
        .map-container-title {
          margin: 56px 0 16px;
          font-size: 24px;
          font-weight: 700;
          color: #333;
          line-height: 30px;
          display: flex;
          justify-content: center;
        }
    
        .map-chart {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 5;
          height: 100%;
          width: 100%;
        }
      }
    }
    </style>
    

    5.配置echarts参数

    接下来我们可以在methods中配置echarts参数来渲染地图了!
    代码如下:

    chartMap() {
         var myChart = echarts.init(document.getElementById("mapEchart"));
          echarts.registerMap("zhejiang", geoJson);
          myChart.hideLoading();
          // 图表配置项
          let option = {
            geo3D: {
              map: "zhejiang",
              roam: true,
              itemStyle: {
                color: "#007aff",
                opacity: 0.8,
                borderWidth: 0.4,
                borderColor: "#000"
                // areaColor: '#fff'
              },
              viewControl: {
                autoRotate: true,
                autoRotateAfterStill: 3,
                distance: 120,
                minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
                animation: true, // 是否开启动画。[ default: true ]
                animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                animationEasingUpdate: "cubicInOut" // 过渡动画的缓动效果。[ default: cubicInOut ]
              },
    
              emphasis: {
                disabled: true, //是否可以被选中
                label: {
                  //移入时的高亮文本
                  show: true,
                  color: "#333", //显示字体颜色变淡
                  fontSize: 18 //显示字体变大
                },
                itemStyle: {
                  color: "#ff7aff" //显示移入的区块变粉色
                }
              },
              label: {
                show: true,
                position: "top",
                color: "#111", //地图初始化区域字体颜色
                fontSize: 14,
                lineHeight: 16
                // textStyle: {
                //   color: "#fff", //地图初始化区域字体颜色
                //   fontSize: 12,
                //   opacity: 1,
                //   backgroundColor: "rgba(0,23,11,0)",
                // },
              },
              shading: "lambert",
              light: {
                //光照阴影
                main: {
                  // color: "#fff", //光照颜色
                  intensity: 1, //光照强度
                  //shadowQuality: 'high', //阴影亮度
                  shadow: true, //是否显示阴影
                  shadowQuality: "medium", //阴影质量 ultra //阴影亮度
                  alpha: 55,
                  beta: 10
                },
                ambient: {
                  intensity: 0.7
                }
              }
            },
          };
          myChart.setOption(option);
        }
    

    6.挂载到mounted钩子,并且组件销毁时释放内存

    最后一步,我们再monuted钩子上挂载配置好的echarts方法
    重点如果我们有多级页面可以互相路由跳转,为了防止内存泄露,我们可以在beforeDestroy钩子上清除我们的echarts方法,释放内存提升项目性能!

      mounted() {
        this.chartMap();
      },
      beforeDestroy() {
        // 防止内存泄露
        if (!this.myChart) {
          return;
        }
        this.myChart.dispose();
        this.myChart = null;
      },
    

    总结

    请添加图片描述
    在vue2中引入3d地图echarts是不是非常简单呢!下一期会带来3d地图3d柱状图,3d散点图和热力图的渲染方法

    展开全文
  • 奥维3D地图

    2013-08-27 14:35:25
    一个强大的在线,离线地图软件,可以选择各种地图,可以下载离线地图,可以导入轨迹导航。
  • 这是一张精美的,3d立体设计的,世界地图PPT素材,第一PPT模板网提供免费下载; 关键词:PPT素材下载,幻灯片插图素材,世界地图PPT背景图片,.PPTX格式;
  • 尽管主要致力于创建AR体验,但是PlanetaryXR还具有虚拟现实(VR)模式,该模式将通过提供位置数据和轻量级地图界面在3D行星模型上建立。 AR和VR应用程序目前都处于非常早期的开发阶段。资源资源图像学分如下: 星图...
  • 使用GDAL / QGIS / webGL制作3D地图 2015年5月3日,日本气象厅发布了箱根火山警报,箱根是外国游客最喜欢的目的地,并限制了其距大涌谷300米区域的访问。 该机构的新闻稿就是这样。 显然,他们有深度数据。 我...
  • vue中Echarts实现伪3D地图

    千次阅读 2021-10-21 10:56:50
    1.需求3d切面地图,颜色渐变,选中阴影,可切换地市,点击时展示地理数据,由于echarts 3d地图无法渐变,地图比例大小效果不好改成理想效果,所以通过伪3d方式实现。最终实现如下图: 2.代码 <template> &...
  • echars 3D地图为区域自定义颜色

    多人点赞 热门讨论 2021-08-24 10:50:43
    echars 3D地图为区域自定义颜色问题延伸解决问题 问题 根据项目需求,我们要将下面省级地图中的个别市进行高亮(不同颜色)展示 延伸 首先跟大家介绍这个地图的展示方式: 采用的是Vue框架中运用echarts 地图采用...
  • 3D地图图表效果如下: 具体代码如下: 铜仁市3D地图(点击地图区域跳转到相应页面) 想要使用Echarts的3D地图,除了需要 echarts.js 之外,还需要 echarts-gl.js (WebGL 的扩展包,提供了丰富的三维...
  • Rappelz 3D 地图查看器这是一个 3D 地图查看器,它允许查看地图(nfm 文件)。 打开地图后(按钮“打开地图”),您可以使用以下键进入: E/向上箭头:前进D/向下箭头:后退S/左箭头:左F/右箭头:右C : 下来空格键...
  • echarts3D地图数据(含全国和省js以及全国、省、地市json), echarts3目前已经不支持下载地图数据,此附件中包含了js和json两种数据格式,以及调用示例。 js格式,直接调用简单直接,但是数据只有全国概览和各省的数据...
  • 这是一张精美的,3d立体设计的,世界地图PPT素材,第一PPT模板网提供免费下载; 关键词:PPT素材下载,幻灯片插图素材,世界地图PPT背景图片,.PPTX格式; 这是一张精美的,3d立体设计的,世界地图PPT素材,第一PPT...
  • ECharts3D地图

    千次阅读 2020-03-23 18:40:16
    效果图: 代码: <!DOCTYPE html> <html> <head> ...铜仁市3D地图(点击地图区域跳转到相应页面)</title> <script type="text/javascript" src="js/jquery...
  • vue+echarts+3D地图 制作大屏

    千次阅读 热门讨论 2022-02-18 15:10:57
    基于3d地图做的一些效果,首先看下效果图 用户不直接操作地图,因为是大屏,只做展示使用,右边列表有两种模式,如果列表数据没有撑开盒子,每3秒轮播高亮,高亮到那个地区,地图上就高亮那一块区域,且显示对应...
  • 那么本篇文件中我就教大家如何实现实现一个3D地图显示到面板上。 并实现一个地图中常用的功能,轨迹回放,这在路线规划,车辆导航中非常使用。结合其他的功能也能实现酷炫的效果。下面详细介绍一个这两个案例。 3d...
  • 提供个性化地图瓦片下载,可自定义地图样式,提供2D/3D多种方式离线数据下载

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,789
精华内容 7,915
关键字:

下载3d地图