基于vue的3D地图代码

最新推荐文章于 2024-10-25 09:58:37 发布

原创最新推荐文章于 2024-10-25 09:58:37 发布 · 1.1k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #智慧城市 #前端

数据可视化大屏同时被 2 个专栏收录

35 篇文章

订阅专栏

vue

9 篇文章

订阅专栏

主要文件介绍

| 文件 | 作用/功能 |

| ------------------- | --------------------------------------------------------------------- |

| main.js | 主目录文件，引入 Echart/DataV 等文件 |

| utils | 工具函数与 mixins 函数等 |

| views/ index.vue | 项目主结构 |

| views/其余文件 | 界面各个区域组件（按照位置来命名） |

| assets | 静态资源目录，放置 logo 与背景图片 |

| assets / style.scss | 通用 CSS 文件，全局项目快捷样式调节 |

| assets / index.scss | Index 界面的 CSS 文件 |

| components/echart | 所有 echart 图表（按照位置来命名） |

| common/... | 全局封装的 ECharts 和 flexible 插件代码（适配屏幕尺寸，可定制化修改） |

整体结构：

这是一个 Vue 组件的代码，包含了模板（<template>）、脚本（<script>）和样式（<style>）部分。

模板部分：

定义了一个带有 class="content" 的 div 元素，内部包含一个具有 ref="myMap" 且设置了宽度和高度为 100% 的 div 元素，用于展示地图。

脚本部分：

引入了 echarts 和 echarts-gl 库。
定义了组件的名称、数据、挂载钩子和方法。
- 在 mounted 钩子中调用 initMap 方法来初始化地图。
- initMap 方法中：
  - 加载了特定的地图数据 xinyang.json 。
  - 初始化了 echarts 图表，并进行了加载状态的显示和隐藏处理。
  - 注册了地图。
  - 配置了详细的地图选项，包括提示工具（tooltip）、系列（series）中的地图 3D 配置（如中心位置、选择模式、区域高度、视图控制、标签样式、元素样式、强调样式、光照等）。
  - 为窗口添加了 resize 事件监听，以便在窗口大小变化时调整图表大小。

样式部分：

为 .app-container 定义了宽度和高度。
为 .content 定义了宽度、高度、相对定位、溢出处理等样式，以确保地图的展示效果和布局。

引入对应的json文件

json文件可以在这里下载：

DataV.GeoAtlas地理小工具系列 (aliyun.com)

说明一下，由于版本的问题

10% building 2/5 modules 3 active ...loader\index.js??ref--14-0!C:\Users\zjl15\Desktop\基于Vue+Echart框智实现的慧城市\src\main.jsnode:internal/crypto/hash:69
this[kHandle] = new _Hash(algorithm, xofLen);
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:69:19)
at Object.createHash (node:crypto:133:10)
at module.exports (C:\Users\zjl15\Desktop\基于Vue+Echart框智实现的慧城市\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\zjl15\Desktop\基于Vue+Echart框智实现的慧城市\node_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (C:\Users\zjl15\Desktop\基于Vue+Echart框智实现的慧城市\node_modules\webpack\lib\NormalModule.js:471:10)
at C:\Users\zjl15\Desktop\基于Vue+Echart框智实现的慧城市\node_modules\webpack\lib\NormalModule.js:503:5
at C:\Users\zjl15\Desktop\基于Vue+Echart框智实现的慧城市\node_modules\webpack\lib\NormalModule.js:358:12
at C:\Users\zjl15\Desktop\基于Vue+Echart框智实现的慧城市\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Users\zjl15\Desktop\基于Vue+Echart框智实现的慧城市\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at Array.<anonymous> (C:\Users\zjl15\Desktop\基于Vue+Echart框智实现的慧城市\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (C:\Users\zjl15\Desktop\基于Vue+Echart框智实现的慧城市\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
at C:\Users\zjl15\Desktop\基于Vue+Echart框智实现的慧城市\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
at C:\Users\zjl15\Desktop\基于Vue+Echart框智实现的慧城市\node_modules\graceful-fs\graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.20.0

会报错

输入下面的代码

set NODE_OPTIONS=--openssl-legacy-provider

在启动就行了

完整代码：

<template>
  <div class="content">
    <div ref="myMap" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import 'echarts-gl'
export default {
  name: 'Index',
  data () {
    return {}
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      // json地图数据-需要根据需求下载引入对应名称文件
      let mapJson = require('../../../common/map/xinyang.json')
      let myChart = echarts.init(this.$refs.myMap)
      myChart.showLoading()
      myChart.hideLoading()
      echarts.registerMap('myMap', mapJson)
      var option = {
        tooltip: {
          // 自定义代码
        },
        series: [
          {
            type: 'map3D',
            name: '地图',
            // 相对于父容器比例
            center: ['150%', '150%'],
            selectedMode: 'single', // 地图高亮单选
            regionHeight: 4, // 地图高度
            map: 'myMap',
            viewControl: {
              // 缩放大小，数值越大，地图越小
              distance: 120,
              // 上下倾斜角度
              alpha: 50,
              // rotateSensitivity: [1, 1],
              // 左右倾斜角度
              beta: -30
            },
            label: {
              show: true, // 是否显示名字
              color: '#fff', // 文字颜色
              fontSize: 18, // 文字大小
              fontWeight: 'bold' // 文字大小
            },
            itemStyle: {
              color: '#4389ED', // 地图背景颜色
              borderWidth: 2, // 分界线wdith
              borderColor: '#61CFF8', // 分界线颜色
              opacity: 0.92
            },
            emphasis: {
              label: {
                show: true, // 是否显示高亮
                textStyle: {
                  color: '#fff' // 高亮文字颜色
                }
              },
              itemStyle: {
                color: '#007EE8', // 地图高亮颜色
                borderWidth: 50, // 分界线wdith
                borderColor: '#6BECF5' // 分界线颜色
              }
            },
            light: {
              main: {
                color: '#fff',
                intensity: 1,
                shadow: true,
                shadowQuality: 'high',
                alpha: 25, //
                beta: 2
              },
              ambient: {
                color: '#fff',
                intensity: 0.6
              }
            }
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        console.log('myChart.resize()', myChart.resize())
        myChart.resize()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  width: 200%;
  height: 1080px; 
}
.content {  
  width: 200%; /* 占据父容器的全部宽度 */  
  height: 60vh; /* 使用视口高度（viewport height）的100%，或者您可以设置为固定像素值 */  
  position: relative; /* 如果需要的话，可以添加定位 */  
  overflow: hidden; /* 防止内部内容溢出 */  
}  
</style>