1 echarts与map相遇

news2024/10/6 18:21:47

echarts与map

版本

    "echarts": "^5.1.2",
    "echarts-gl": "^2.0.9",

效果

在这里插入图片描述

基本方法

echarts中地图大多是以地理坐标为主，数据格式使用geojson数据格式。geojson是GIS数据格式中第二常用格式，使用GIS软件都能实现数据转换。

步骤

1数据准备

从上图中可以看出，地图包括深蓝色底图、青色厚度、 地图定位坐标点、插图部分。插图的图框也是很绘制的包含插图的外包矩形，也是地理数据。

  • 深蓝地图和青色厚度是相同的地图，只是渲染方式不一样。面类型数据
  • 地图定位坐标点采用的经纬度，点类型数据
  • 插图图框是边界矩形，插图内容是面状群岛分布
    数据来源大部分来自阿里datav,一小部分数据自己制作。
https://datav.aliyun.com/portal/school/atlas/area_selector

2开发准备

地图部分单独写组件，新建vue组件，编写模板，样式等

  <div id="map" class="chartBox" />

组件引用等

3注册地图

import hainan from '@/api/gis/provinces_hn.json' //底图
import sansha from '@/api/gis/ss.json'  //插图
import boundry from '@/api/gis/chatuboundry.json' //插图框
      echarts.registerMap('hn', hainan)
      echarts.registerMap('ss', sansha)
      echarts.registerMap('boundry', boundry)

4 配置项

底图

底图是放了两个hn图层，上面hn图层设置了透明度，渲染填充和边界，并增加鼠标移入事件，可进行放大、缩小、移动。作为厚度的图层其缩放、移动跟随第一个图层变化。两个底图定位中心一样，长宽比一样。

          {
            map: 'hn', //注册底图
            zlevel: 5, //层次顺序
            roam: true,  //缩放平移
            aspectScale: 1.1, //长宽比
            center: [109.786246, 18.464193], //定位中心
            zoom: 0.8, //初始缩放级别
            scaleLimit: { //最大最小缩放级别
              min: 0.2,
              max: 50
            },
            label: {   //底图文字标注
              show: true,
              color: '#ffffff',
              shadowColor: '#134ae6',
              shadowOffsetX: 15,
              shadowOffsetY: 15,
              textBorderColor: '#134ae6',
              textBorderType: 'solid',
              textBorderWidth: 2

            },
            itemStyle: {  //不同市的渲染
              color: '#153294', // 背景
              opacity: 0.9,
              borderWidth: '1', // 边框宽度
              borderColor: 'rgba(255,255,255,0.3)' // 边框颜色

            },
            emphasis: { //鼠标移入后
              label: {  //底图文字标注
                show: true,
                color: '#ffffff',
                shadowColor: '#134ae6',
                shadowOffsetX: 15,
                shadowOffsetY: 15,
                textBorderColor: '#134ae6',
                textBorderType: 'solid',
                textBorderWidth: 2

              },
              itemStyle: { //不同市的渲染
                areaColor: '#0CBFFF',
                opacity: 0.9

              }
            }
          },
          {
            map: 'hn',
            top: '12%',
            silent: true,
            aspectScale: 1.1,
            zlevel: 4,
            center: [109.786246, 18.464193],
            zoom: 0.8,
            itemStyle: {
              color: '#01EAF8', // 背景
              opacity: 1,
              borderWidth: '1', // 边框宽度
              borderColor: '#3C5FA1' // 边框颜色
            }
          },

三沙群岛

 {
            map: 'ss',
            zlevel: 6,
            roam: false,
            aspectScale: 0.7,
            center: [14.87585417960884, 4.8374873458189995],
            zoom: 0.148,

            label: {
              show: true,
              color: '#ffffff',
              shadowColor: '#2074FF',
              shadowOffsetX: 15,
              shadowOffsetY: 15,
              textBorderColor: '#134ae6',
              textBorderType: 'solid',
              textBorderWidth: 2

            },
            itemStyle: {
              color: '#ffffff', // 背景
              opacity: 1,
              borderWidth: 1, // 边框宽度
              borderColor: 'rgba(255,255,255,0.3)' // 边框颜色
              // borderopacity: 0.6
            },
            emphasis: {
              itemStyle: {
                color: '#153294',
                opacity: 0.9

              },
              label: {
                show: true,
                color: '#ffffff',
                shadowColor: '#2074FF',
                shadowOffsetX: 15,
                shadowOffsetY: 15,
                textBorderColor: '#134ae6',
                textBorderType: 'solid',
                textBorderWidth: 2

              }
            }
          },

插图图框

 {
            map: 'boundry',
            zlevel: 6,
            roam: false,
            aspectScale: 0.7,
            center: [14.87585417960884, 4.8374873458189995],
            zoom: 0.148,
            label: {
              show: false
            },
            itemStyle: {
              color: '#153294', // 背景
              opacity: 0.2,
              borderWidth: 2, // 边框宽度
              borderColor: '#01EAF8' // 边框颜色
            },
            tooltip: {
              // show: false
            }

          }

定位点

定位点是自己采集的经纬度数据，格式如下

{
    "location" :
    [
        {
            "name": "某某某地方",
            "X": "110.386274",
            "Y": "20.026688"
        }
    ]
}

定位点主要采用series方式添加到底图上

          {
            name: 'jcy',
            type: 'scatter',
            map: 'hn',
            zlevel: 10,
            coordinateSystem: 'geo',
            geoIndex: 0,
            symbolSize: [30, 60],
            symbol: `image://${that.images}`,
            data: that.cityInfo.location.map(d => {
              return {
                name: d.name,
                value: [parseFloat(d.X),
                  parseFloat(d.Y)]
              }
            }),
            tooltip: {
              backgroundColor: 'rgba(0,0,0,0.5)',
              borderColor: 'rgba(0,0,0,0)',
              extraCssText: 'box-shadow: 0 0 0 rgba(255, 255, 255, 0.7);',
              zIndex: 400,
              formatter: function(params) {
                let html = ''
                var title = `<div style="color:#ffffff;margin-bottom: 12px; font-size: 14px">${params.name}</div>`
                html = title
                const item = that.jcyInfo.find(t => t.name === params.name)

                if (item) {
                  const info = `<div style=" line-height: 30px;color:#7BE6FF;font-size:10px;">
                      <span style="display:inline-block;margin-right:4px;width:8px;height:8px;border-radius:50%;"></span>
                      <span style="margin-right:30px;color:#7BE6FF">进行中的个案总数：</span>
                      <span style="float:right;color:#7BE6FF">${item.num}</span>
                    </div>`
                  html += info
                }

                return html
              }
            }
          },

三沙群岛也有定位点，在插图上同样也可以添加

  {
            name: 'scjcy',
            type: 'scatter',
            map: 'ss',
            zlevel: 500,
            coordinateSystem: 'geo',
            geoIndex: 3,
            symbolSize: [30, 60],
            symbol: `image://${that.images}`,
            data: [{
              name: '三沙市三沙群岛某某',
              value: [114.375028, 10.547062]
            },
            {
              'name': '三沙市某某某',
              value: [112.345028, 16.837062]

            }
            ],
            tooltip: {
              backgroundColor: 'rgba(0,0,0,0.5)',
              borderColor: 'rgba(0,0,0,0)',
              extraCssText: 'box-shadow: 0 0 0 rgba(255, 255, 255, 0.7);',
              zIndex: 500,
              formatter: function(params) {
                console.log(params)
                let html = ''
                var title = `<div style="color:#ffffff;margin-bottom: 12px; font-size: 14px">${params.name}</div>`
                html = title
                const item = that.jcyInfo.find(t => t.name === params.name)

                if (item) {
                  const info = `<div style=" line-height: 30px;color:#7BE6FF;font-size:10px;">
                      <span style="display:inline-block;margin-right:4px;width:8px;height:8px;border-radius:50%;"></span>
                      <span style="margin-right:30px;color:#7BE6FF">进行中的个案总数：</span>
                      <span style="float:right;color:#7BE6FF">${item.num}</span>
                    </div>`
                  html += info
                }

                return html
              }
            }
          }

注意这里定位图标用本地图片没成功，看api说需要使用一个在线地址，或者base64 但是要加上image://${that.images}

5 底图移动事件

      this.myChart.on('georoam', function(params) {
        var option = that.myChart.getOption()// 获得option对象

        if (params.zoom != null && params.zoom !== undefined) { // 捕捉到缩放时
          option.geo[1].zoom = option.geo[0].zoom // 下层geo的缩放等级跟着上层的geo一起改变
          option.geo[1].center = option.geo[0].center// 下层的geo的中心位置随着上层geo一起改变
        } else { // 捕捉到拖曳时
          option.geo[1].center = option.geo[0].center// 下层的geo的中心位置随着上层geo一起改变
          // option.geo[2].center = option.geo[0].center
          // option.geo[3].center = option.geo[0].center
        }
        that.myChart.setOption(option)// 设置option
      })

6 初始化

      this.myChart = echarts.init(document.getElementById('map')) // 这里是为了获得容器所在位置
      this.myChart.setOption(option)

完整代码

<template>
  <div class="grid-echarts__wrapper">
    <div id="map" class="chartBox" />
  </div>
</template>
<script>
import * as echarts from 'echarts'
import 'echarts-gl'
import hainan from '@/api/gis/provinces_hn.json'
import sansha from '@/api/gis/ss.json'
import boundry from '@/api/gis/chatuboundry.json'
import { getHelpMapData } from '@/api/bigScreenNew/help.js'

export default {
  name: 'GL',
  data() {
    return {
      option: null,

      images: 'data:image/png;base64,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',
      cityInfo: require('@/api/gis/jcy.json'),
      jcyInfo: []
    }
  },

  mounted() {
    this.getData()
  },

  beforeDestroy() {

  },

  methods: {
    getData() {
      getHelpMapData().then(res => {
        if (res.code === 200) {
          this.jcyInfo = res.data
        }
        this.initCharts()
      })
    },
    initCharts() {
      const that = this
      const option = {
        animation: false,
        tooltip: {},
        series: [
          {
            name: 'jcy',
            type: 'scatter',
            map: 'hn',
            zlevel: 10,
            coordinateSystem: 'geo',
            geoIndex: 0,
            symbolSize: [30, 60],
            symbol: `image://${that.images}`,
            data: that.cityInfo.location.map(d => {
              return {
                name: d.name,
                value: [parseFloat(d.X),
                  parseFloat(d.Y)]
              }
            }),
            tooltip: {
              backgroundColor: 'rgba(0,0,0,0.5)',
              borderColor: 'rgba(0,0,0,0)',
              extraCssText: 'box-shadow: 0 0 0 rgba(255, 255, 255, 0.7);',
              zIndex: 400,
              formatter: function(params) {
                let html = ''
                var title = `<div style="color:#ffffff;margin-bottom: 12px; font-size: 14px">${params.name}</div>`
                html = title
                const item = that.jcyInfo.find(t => t.name === params.name)

                if (item) {
                  const info = `<div style=" line-height: 30px;color:#7BE6FF;font-size:10px;">
                      <span style="display:inline-block;margin-right:4px;width:8px;height:8px;border-radius:50%;"></span>
                      <span style="margin-right:30px;color:#7BE6FF">进行中的个案总数：</span>
                      <span style="float:right;color:#7BE6FF">${item.num}</span>
                    </div>`
                  html += info
                }

                return html
              }
            }
          },
          {
            name: 'scjcy',
            type: 'scatter',
            map: 'ss',
            zlevel: 500,
            coordinateSystem: 'geo',
            geoIndex: 3,
            symbolSize: [30, 60],
            symbol: `image://${that.images}`,
            data: [{
              name: '三沙市三沙群岛人民检察院',
              value: [114.375028, 10.547062]
            },
            {
              'name': '三沙市人民检察院',
              value: [112.345028, 16.837062]

            }
            ],
            tooltip: {
              backgroundColor: 'rgba(0,0,0,0.5)',
              borderColor: 'rgba(0,0,0,0)',
              extraCssText: 'box-shadow: 0 0 0 rgba(255, 255, 255, 0.7);',
              zIndex: 500,
              formatter: function(params) {
                console.log(params)
                let html = ''
                var title = `<div style="color:#ffffff;margin-bottom: 12px; font-size: 14px">${params.name}</div>`
                html = title
                const item = that.jcyInfo.find(t => t.name === params.name)

                if (item) {
                  const info = `<div style=" line-height: 30px;color:#7BE6FF;font-size:10px;">
                      <span style="display:inline-block;margin-right:4px;width:8px;height:8px;border-radius:50%;"></span>
                      <span style="margin-right:30px;color:#7BE6FF">进行中的个案总数：</span>
                      <span style="float:right;color:#7BE6FF">${item.num}</span>
                    </div>`
                  html += info
                }

                return html
              }
            }
          }
        ],
        geo: [
          {
            map: 'hn',
            zlevel: 5,
            roam: true,
            aspectScale: 1.1,
            center: [109.786246, 18.464193],
            zoom: 0.8,
            scaleLimit: {
              min: 0.2,
              max: 50
            },
            label: {
              show: true,
              color: '#ffffff',
              shadowColor: '#134ae6',
              shadowOffsetX: 15,
              shadowOffsetY: 15,
              textBorderColor: '#134ae6',
              textBorderType: 'solid',
              textBorderWidth: 2

            },
            itemStyle: {
              color: '#153294', // 背景
              opacity: 0.9,
              borderWidth: '1', // 边框宽度
              borderColor: 'rgba(255,255,255,0.3)' // 边框颜色

            },
            emphasis: {
              label: {
                show: true,
                color: '#ffffff',
                shadowColor: '#134ae6',
                shadowOffsetX: 15,
                shadowOffsetY: 15,
                textBorderColor: '#134ae6',
                textBorderType: 'solid',
                textBorderWidth: 2

              },
              itemStyle: {
                areaColor: '#0CBFFF',
                opacity: 0.9

              }
            }
          },
          {
            map: 'hn',
            top: '12%',
            silent: true,
            aspectScale: 1.1,
            zlevel: 4,
            center: [109.786246, 18.464193],
            zoom: 0.8,
            itemStyle: {
              color: '#01EAF8', // 背景
              opacity: 1,
              borderWidth: '1', // 边框宽度
              borderColor: '#3C5FA1' // 边框颜色
            }
          },
          {
            map: 'ss',
            zlevel: 6,
            roam: false,
            aspectScale: 0.7,
            center: [14.87585417960884, 4.8374873458189995],
            zoom: 0.148,

            label: {
              show: true,
              color: '#ffffff',
              shadowColor: '#2074FF',
              shadowOffsetX: 15,
              shadowOffsetY: 15,
              textBorderColor: '#134ae6',
              textBorderType: 'solid',
              textBorderWidth: 2

            },
            itemStyle: {
              color: '#ffffff', // 背景
              opacity: 1,
              borderWidth: 1, // 边框宽度
              borderColor: 'rgba(255,255,255,0.3)' // 边框颜色
              // borderopacity: 0.6
            },
            emphasis: {
              itemStyle: {
                color: '#153294',
                opacity: 0.9

              },
              label: {
                show: true,
                color: '#ffffff',
                shadowColor: '#2074FF',
                shadowOffsetX: 15,
                shadowOffsetY: 15,
                textBorderColor: '#134ae6',
                textBorderType: 'solid',
                textBorderWidth: 2

              }
            }
          },
          {
            map: 'boundry',
            zlevel: 6,
            roam: false,
            aspectScale: 0.7,
            center: [14.87585417960884, 4.8374873458189995],
            zoom: 0.148,
            label: {
              show: false
            },
            itemStyle: {
              color: '#153294', // 背景
              opacity: 0.2,
              borderWidth: 2, // 边框宽度
              borderColor: '#01EAF8' // 边框颜色
            },
            tooltip: {
              // show: false
            }

          }

        ]

      }
      this.myChart = echarts.init(document.getElementById('map')) // 这里是为了获得容器所在位置
      echarts.registerMap('hn', hainan)
      echarts.registerMap('ss', sansha)
      echarts.registerMap('boundry', boundry)
      this.myChart.setOption(option)

      this.myChart.on('georoam', function(params) {
        var option = that.myChart.getOption()// 获得option对象

        if (params.zoom != null && params.zoom !== undefined) { // 捕捉到缩放时
          option.geo[1].zoom = option.geo[0].zoom // 下层geo的缩放等级跟着上层的geo一起改变
          option.geo[1].center = option.geo[0].center// 下层的geo的中心位置随着上层geo一起改变
        } else { // 捕捉到拖曳时
          option.geo[1].center = option.geo[0].center// 下层的geo的中心位置随着上层geo一起改变
          // option.geo[2].center = option.geo[0].center
          // option.geo[3].center = option.geo[0].center
        }
        that.myChart.setOption(option)// 设置option
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@bigScreen/styles/mixins";

.wrapper {
  height: 100%;
  overflow: hidden;
}

.chartBox {
  width: 100%;
  height: 100%;
}
</style>

.geo[1].zoom = option.geo[0].zoom // 下层geo的缩放等级跟着上层的geo一起改变
option.geo[1].center = option.geo[0].center// 下层的geo的中心位置随着上层geo一起改变
} else { // 捕捉到拖曳时
option.geo[1].center = option.geo[0].center// 下层的geo的中心位置随着上层geo一起改变
// option.geo[2].center = option.geo[0].center
// option.geo[3].center = option.geo[0].center
}
that.myChart.setOption(option)// 设置option
})
}
}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/569508.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

英文论文（sci）解读复现【NO.11】一种先进的基于深度学习模型的植物病害检测：近期研究综述

英文论文（sci）解读复现【NO.11】一种先进的基于深度学习模型的植物病害检测：近期研究综述

此前出了目标检测算法改进专栏&#xff0c;但是对于应用于什么场景&#xff0c;需要什么改进方法对应与自己的应用场景有效果&#xff0c;并且多少改进点能发什么水平的文章&#xff0c;为解决大家的困惑&#xff0c;此系列文章旨在给大家解读发表高水平学术期刊中的 SCI论文&a…
阅读更多...
简单个人电话号码查询系统

简单个人电话号码查询系统

系列文章 任务19 简单个人电话号码查询系统 文章目录 系列文章一、实践目的与要求1、目的2、要求 二、课题任务三、总体设计1.存储结构及数据类型定义2.程序结构3.所实现的功能函数 四、小组成员及分工五、 测试文件读取添加联系人删除联系人修改联系人查询联系人退出 六、源代…
阅读更多...
(三) PID控制中的噪声过滤

(三) PID控制中的噪声过滤

在前面的章节里&#xff0c;我们谈到了积分环节由于执行器的物理限制导致的积分项Wind-up&#xff0c;通过设置饱和限幅器&#xff0c;选择性关闭积分环节来完成Wind-up问题。 今天我们要解决的问题就是微分环节可能存在的问题。通过传感器我们可以观测出一个被控量的大小&…
阅读更多...
奇偶校验位

奇偶校验位

原理 奇偶校验位有两种类型&#xff1a;偶校验位与奇校验位。 以偶校验位来说&#xff0c;如果一组给定数据位中1的个数是奇数&#xff0c;补一个bit为1&#xff0c;使得总的1的个数是偶数。例&#xff1a;0000001, 补一个bit为1, 00000011。 以奇校验位来说&#xff0c;如果给…
阅读更多...
电子科技大学编译原理复习笔记（二）：数据类型

电子科技大学编译原理复习笔记（二）：数据类型

目录 前言 重点一览 引言 内部类型 内部类型的特点 内部类型的优越性 用户定义类型 ⭐超重点&#xff1a;六种数据类型聚合方式 ⭐抽象数据类型&#xff08;重点、考点&#xff09; 类型操作 类型检查 类型转换 类型等价 实现模型 本章小结 前言 本复习笔记基于…
阅读更多...
Spark 3：Spark Core RDD持久化

Spark 3：Spark Core RDD持久化

RDD 的数据是过程数据 RDD 的缓存 # coding:utf8 import timefrom pyspark import SparkConf, SparkContext from pyspark.storagelevel import StorageLevelif __name__ __main__:conf SparkConf().setAppName("test").setMaster("local[*]")sc SparkC…
阅读更多...
flask实现简易图书管理系统

flask实现简易图书管理系统

项目结构 技术选型 flask 做后端, 提供数据和渲染html 暂时没有提供mysql, 后续会更新操作mysql和样式美化的版本 起一个flask服务 flask是python的一个web框架, 下面演示如何提供http接口, 并返回json数据 main.py # flask创建http接口 from flask import Flask, request, jso…
阅读更多...
Linux 的软件生态 软件包管理器（yum）编译器 - vim

Linux 的软件生态 软件包管理器（yum）编译器 - vim

Linux的软件生态 在 手机 ipad 笔记本等等我们使用的产品当中&#xff0c;会有应用商店等等可以下载软件的 软件包管理器&#xff0c;当我们想要下载某一款软件的时候&#xff0c;就去这个应用商店当中搜索&#xff0c;或者是去寻找&#xff0c;找到之后&#xff0c;进行下载&a…
阅读更多...
Linux Kernel源码阅读： x86-64 系统调用实现细节（超详细）

Linux Kernel源码阅读： x86-64 系统调用实现细节（超详细）

0、前言 本文采用Linux 内核 v3.10 版本 本文不涉及调试、跟踪及异常处理的细节 一、系统调用简介 系统调用是用户空间程序与内核交互的主要机制。系统调用与普通函数调用不同&#xff0c;因为它调用的是内核里的代码。使用系统调用时&#xff0c;需要特殊指令以使处理器权限转…
阅读更多...
初识Linux操作系统及常用的Linux命令

初识Linux操作系统及常用的Linux命令

Linux是一种自由和开放源码的类UNIX操作系统&#xff0c;也是一种基于POSIX和Unix的多用户、多任务、支持多线程和多CPU的操作系统。伴随互联网的发展&#xff0c;企业对服务器速度和安全的要求越来越高&#xff0c;Linux系统由于具有性能稳定、防火墙组件性能高效、配置简单等…
阅读更多...
Java内存模型的抽象结构 JMM

Java内存模型的抽象结构 JMM

并发编程模型的两个关键问题 线程之间如何通信及线程之间如何同步。 线程之间如何通信&#xff1a;共享内存&#xff0c;消息传递线程之间如何同步通信是指线程之间以何种机制来 交换信息同步是指程序中用于控制不同线程间 操作发生相对顺序 的机制在共享内存的并发模型里&a…
阅读更多...
Maven 详细教程（万字长文）

Maven 详细教程（万字长文）

目录 一、Maven的简介二、Maven安装与配置三、Maven POM四、创建 Maven 项目五、Maven项目的构建与测试六、Maven依赖七、Maven仓库&#xff08;本地仓库远程仓库&#xff09;八、Maven生命周期&#xff08;cleansitedefault&#xff09;九、Maven常用插件十、Maven 版本号约定…
阅读更多...
大模型时代的prompt学习(持续更新)

大模型时代的prompt学习(持续更新)

目录 为什么要学prompt基本原则prompt撰写框架Base Prompt FrameworkCRISPE Prompt Framework 场景撰写文案文档竞品分析产品设计数据分析 chain of thoughtzero shotin context learning(few shot)Self-Consistency Program-Aidedprompt tipsTo Do and Not To Doadd examples引…
阅读更多...
水下图像0

水下图像0

d_r_1_.jpg 一个拖着电线的水下六足机器人在海水中作业 A robot is exploring the reef on the sea floor A hexapod robot works next to reef at the bottom of the sea A rectangular deep-sea robot swims past a patch of reef An underwater robot is detecting coral …
阅读更多...
神经网络视觉AI“后时代”自瞄实现与对抗

神经网络视觉AI“后时代”自瞄实现与对抗

通俗一点来说&#xff0c;自瞄是在FPS射击游戏中最为常见的作弊手段之一&#xff0c;当下最火爆的CSGO也深受其扰&#xff0c;在此我说些我自己的看法&#xff0c;欢迎大家在下方留言讨论&#xff1b; &#xff08;1&#xff09;软件层面 在神经网络方面的视觉AI应用流行之前&…
阅读更多...
面试官：工作三年，还来面初级软件测试？恐怕你的软件测试工程师的头衔要加双引号...

面试官：工作三年，还来面初级软件测试？恐怕你的软件测试工程师的头衔要加双引号...

相信身为测试工程师的你可能经历过这些&#xff1a; 已经工作三年了&#xff0c;每个项目都会加班加点全力以赴去完成&#xff0c;薪资增长幅度却不如人意。 听说年后离职的老同事&#xff0c;金三刚拿下高薪offer&#xff0c;年薪直奔50万了。 由于现在的公司接触不到新技术&…
阅读更多...
docker（一）安装部署卸载以及基础命令使用

docker（一）安装部署卸载以及基础命令使用

文章目录 1、安装1.1、安装插件1.2、设置源&#xff1a;1.3、安装docker卸载docker&#xff1a;1.4、配置国内源 2、基础命令3、提交某个镜像为新的镜像4、docker 存档 1、安装 机器配置: 1.1、安装插件 [rootdophin ~]# yum -y install yum-utils1.2、设置源&#xff1a; …
阅读更多...
Spring相关面试题（Spring核心）

Spring相关面试题（Spring核心）

Spring相关面试题 谁定义了bean的生命周期IOC初始化 IOC启动阶段 (Spring容器的启动流程)Spring-IOC是什么IOC是什么DI是什么 依赖注入 DI的三种方式Spring-AOP是什么OOPAOPAOP实现方式动JDK动态代理和CGLIB动态代理 JDK动态代理和CGLIB动态代理IOC 和 AOP 的联系和区别 BeanFa…
阅读更多...
【2023 · CANN训练营第一季】应用开发（初级）第五章——媒体数据处理

【2023 · CANN训练营第一季】应用开发（初级）第五章——媒体数据处理

1.媒体数据处理 受网络结构和训练方式等因素的影响&#xff0c;绝大多数神经网络模型对输入数据都有格式上的限制。在计算机视觉领域&#xff0c;这个限制大多体现在图像的尺寸、色域、归一化参数等。如果源图或视频的尺寸、格式等与网络模型的要求不一致时&#xff0c;我们需…
阅读更多...
LLMs开源模型们和数据集简介

LLMs开源模型们和数据集简介

本篇文章整理下目前常用的LLMs模型们和数据集简介。 BackBones ​https://github.com/FreedomIntelligence/LLMZoo 可以看到目前被广泛用来作为LLMs的backbone的模型有以下特点&#xff1a; Backbone&#xff1a;基于某个开源backbone&#xff0c;如GLM、LLaMA、BLOOMZ&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023