Vue(2.9.6) + Cesium(1.66.0) 集成入门示例

本是古典何须时尚 2023-07-09 10:27 42阅读 0赞

# 码云源码 #

https://gitee.com/front-end-project/vue_cesium.git

# 参考教程: #

Vue+Cesium项目环境搭建   https://blog.csdn.net/HeHeDayou/article/details/94727051
    基于Webpack的Cesium+Vue应用  https://blog.csdn.net/m0_37972557/article/details/79768408?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
    
    cesium1.66+vue填坑记录 https://blog.csdn.net/weizhixiang/article/details/104473856

# 1、运行环境介绍 #

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>环境</td> 
   <td style="text-align:center;vertical-align:middle;">操作系统</td> 
   <td style="text-align:center;vertical-align:middle;"> <p>Google Chrom&nbsp;&nbsp;</p> </td> 
   <td> <p style="margin-left:0pt;">Node.js</p> </td> 
   <td style="text-align:center;vertical-align:middle;"> <p style="margin-left:0pt;">Npm</p> </td> 
   <td> <p style="margin-left:0pt;">Webpack</p> </td> 
   <td> <p style="margin-left:0pt;">Vue</p> </td> 
   <td> <p style="margin-left:0pt;">Cesium</p> </td> 
  </tr> 
  <tr> 
   <td>版本</td> 
   <td>Win10&nbsp; x64</td> 
   <td><span style="color:#5f6368;">80.0.3987.122</span></td> 
   <td> <p style="margin-left:0pt;">v12.16.1</p> </td> 
   <td> <p style="margin-left:0pt;">&nbsp;v6.14.1(node 已经集成 无需单独安装)</p> </td> 
   <td> <p style="margin-left:0pt;">v4.41.6</p> </td> 
   <td> <p style="margin-left:0pt;">v2.9.6</p> </td> 
   <td> <p style="margin-left:0pt;">v1.66.0</p> </td> 
  </tr> 
 </tbody> 
</table>

# 2、基础环境安装 #

预先设置 使用taobao的npm镜像 (国外的下载速度 极慢)

npm config set registry https://registry.npm.taobao.org

##   2.1 Node.js 请自行安装 ##

##   2.2 webpack  ##

npm install webpack -g

##   2.3 Vue-cli 脚手架 ##

npm install vue-cli -g

# 3、使用vue-cli 的webpack 模板 生成模板应用 #

vue-cli 官方提供的几个模板

vue-list //使用该命令查看vue 提供的应用模板

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNjUzMjA1_size_16_color_FFFFFF_t_70][]

我们要开始生成模板应用啦！！！

vue init webpack vue_cesium //webpack 为模板名 vue_cesium 即我们要新建的项目名称

之后就是一些需要填写 关于项目的信息 本例填写如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNjUzMjA1_size_16_color_FFFFFF_t_70 1][]

生成完成之后 切入项目目录下 执行命令  **npm run dev** 看到如下画面时，按照指示用浏览器访问 **http://localhost:8080**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNjUzMjA1_size_16_color_FFFFFF_t_70 2][]

模板应用创建成功啦！！！

# 4、安装cesium模块 #

npm install cesium --save    //使用该命令行 安装cesium 模块
    npm install cesium@1.66.0 --save    //安装指定版本的Cesium模块

# 5、配置webpack #

以下以 ***vue\_cesium *** 指代项目根目录

##   5.1 配置 webpack.base.conf.js     ##

位于**vue\_cesium/build/ **目录下  请将该配置文件中标注的1、2、3、4 处配置全部正确配置

'use strict'
    const path = require('path')
    const utils = require('./utils')
    const config = require('../config')
    const vueLoaderConfig = require('./vue-loader.conf')
    
    //1、The path to the CesiumJS source code cesium的源码目录  
    const cesiumSource = '../node_modules/cesium/Source'
    
    function resolve(dir) {
        return path.join(__dirname, '..', dir)
    }
    
    
    
    module.exports = {
        context: path.resolve(__dirname, '../'),
        entry: {
            app: './src/main.js'
        },
        output: {
            path: config.build.assetsRoot,
            filename: '[name].js',
            publicPath: process.env.NODE_ENV === 'production' ?
                config.build.assetsPublicPath : config.dev.assetsPublicPath,
    
            //2、 Needed to compile multiline strings in Cesium
            sourcePrefix: ''
    
        },
        resolve: {
            extensions: ['.js', '.vue', '.json'],
            alias: {
                'vue$': 'vue/dist/vue.esm.js',
                '@': resolve('src'),
    
                //3、 CesiumJS module name 我们就可以在应用程序中引用cesium了 
                cesium: path.resolve(__dirname, cesiumSource)
            }
        },
        module: {
            rules: [{
                    test: /\.vue$/,
                    loader: 'vue-loader',
                    options: vueLoaderConfig
                },
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
                },
                {
                    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: utils.assetsPath('img/[name].[hash:7].[ext]')
                    }
                },
                {
                    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: utils.assetsPath('media/[name].[hash:7].[ext]')
                    }
                },
                {
                    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                    }
                }
            ],
    
            //4、
            unknownContextCritical: false
        },
        node: {
            // prevent webpack from injecting useless setImmediate polyfill because Vue
            // source contains it (although only uses it if it's native).
            setImmediate: false,
            // prevent webpack from injecting mocks to Node native modules
            // that does not make sense for the client
            dgram: 'empty',
            fs: 'empty',
            net: 'empty',
            tls: 'empty',
            child_process: 'empty'
        }
    }

##   5.2 配置webpack.dev.conf.js ##

位于**vue\_cesium/build/ **目录下 请将该配置文件中标注的1、2 处配置全部正确配置

'use strict'
    const utils = require('./utils')
    const webpack = require('webpack')
    const config = require('../config')
    const merge = require('webpack-merge')
    const path = require('path')
    const baseWebpackConfig = require('./webpack.base.conf')
    const CopyWebpackPlugin = require('copy-webpack-plugin')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
    const portfinder = require('portfinder')
    //1、定义源码目录
    const cesiumSource = 'node_modules/cesium/Source'
    const cesiumWorkers = '../Build/Cesium/Workers'
    
    const HOST = process.env.HOST
    const PORT = process.env.PORT && Number(process.env.PORT)
    
    const devWebpackConfig = merge(baseWebpackConfig, {
        module: {
            rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
        },
        // cheap-module-eval-source-map is faster for development
        devtool: config.dev.devtool,
    
        // these devServer options should be customized in /config/index.js
        devServer: {
            clientLogLevel: 'warning',
            historyApiFallback: {
                rewrites: [
                    { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
                ],
            },
            hot: true,
            contentBase: false, // since we use CopyWebpackPlugin.
            compress: true,
            host: HOST || config.dev.host,
            port: PORT || config.dev.port,
            open: config.dev.autoOpenBrowser,
            overlay: config.dev.errorOverlay ? { warnings: false, errors: true } : false,
            publicPath: config.dev.assetsPublicPath,
            proxy: config.dev.proxyTable,
            quiet: true, // necessary for FriendlyErrorsPlugin
            watchOptions: {
                poll: config.dev.poll,
            }
        },
        plugins: [
            new webpack.DefinePlugin({
                'process.env': require('../config/dev.env')
            }),
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
            new webpack.NoEmitOnErrorsPlugin(),
            // https://github.com/ampedandwired/html-webpack-plugin
            new HtmlWebpackPlugin({
                filename: 'index.html',
                template: 'index.html',
                inject: true
            }),
            // copy custom static assets
            new CopyWebpackPlugin([{
                from: path.resolve(__dirname, '../static'),
                to: config.dev.assetsSubDirectory,
                ignore: ['.*']
            }]),
            //2、开始 
            new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),
            new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
            new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),
            new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
            new webpack.DefinePlugin({
                // Define relative base path in cesium for loading assets
                CESIUM_BASE_URL: JSON.stringify('')
            })
            //2 结束
        ]
    })
    
    module.exports = new Promise((resolve, reject) => {
        portfinder.basePort = process.env.PORT || config.dev.port
        portfinder.getPort((err, port) => {
            if (err) {
                reject(err)
            } else {
                // publish the new Port, necessary for e2e tests
                process.env.PORT = port
                    // add port to devServer config
                devWebpackConfig.devServer.port = port
    
                // Add FriendlyErrorsPlugin
                devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
                    compilationSuccessInfo: {
                        messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
                    },
                    onErrors: config.dev.notifyOnErrors ?
                        utils.createNotifierCallback() : undefined
                }))
    
                resolve(devWebpackConfig)
            }
        })
    })

##   5.3 配置webpack.prod.conf.js ##

位于**vue\_cesium/build/ **目录下 请将该配置文件中标注的1、2 处配置全部正确配置

'use strict'
    const path = require('path')
    const utils = require('./utils')
    const webpack = require('webpack')
    const config = require('../config')
    const merge = require('webpack-merge')
    const baseWebpackConfig = require('./webpack.base.conf')
    const CopyWebpackPlugin = require('copy-webpack-plugin')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const ExtractTextPlugin = require('extract-text-webpack-plugin')
    const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    
    const env = require('../config/prod.env')
    //1、
    const cesiumSource = 'node_modules/cesium/Source'
    const cesiumWorkers = '../Build/Cesium/Workers'
    
    
    const webpackConfig = merge(baseWebpackConfig, {
        module: {
            rules: utils.styleLoaders({
                sourceMap: config.build.productionSourceMap,
                extract: true,
                usePostCSS: true
            })
        },
        devtool: config.build.productionSourceMap ? config.build.devtool : false,
        output: {
            path: config.build.assetsRoot,
            filename: utils.assetsPath('js/[name].[chunkhash].js'),
            chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
        },
        plugins: [
            // http://vuejs.github.io/vue-loader/en/workflow/production.html
            new webpack.DefinePlugin({
                'process.env': env
            }),
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: {
                        warnings: false
                    }
                },
                sourceMap: config.build.productionSourceMap,
                parallel: true
            }),
            // extract css into its own file
            new ExtractTextPlugin({
                filename: utils.assetsPath('css/[name].[contenthash].css'),
                // Setting the following option to `false` will not extract CSS from codesplit chunks.
                // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
                // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
                // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
                allChunks: true,
            }),
            // Compress extracted CSS. We are using this plugin so that possible
            // duplicated CSS from different components can be deduped.
            new OptimizeCSSPlugin({
                cssProcessorOptions: config.build.productionSourceMap ?
                    { safe: true, map: { inline: false } } :
                    { safe: true }
            }),
            // generate dist index.html with correct asset hash for caching.
            // you can customize output by editing /index.html
            // see https://github.com/ampedandwired/html-webpack-plugin
            new HtmlWebpackPlugin({
                filename: config.build.index,
                template: 'index.html',
                inject: true,
                minify: {
                    removeComments: true,
                    collapseWhitespace: true,
                    removeAttributeQuotes: true
                        // more options:
                        // https://github.com/kangax/html-minifier#options-quick-reference
                },
                // necessary to consistently work with multiple chunks via CommonsChunkPlugin
                chunksSortMode: 'dependency'
            }),
            // keep module.id stable when vendor modules does not change
            new webpack.HashedModuleIdsPlugin(),
            // enable scope hoisting
            new webpack.optimize.ModuleConcatenationPlugin(),
            // split vendor js into its own file
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                minChunks(module) {
                    // any required modules inside node_modules are extracted to vendor
                    return (
                        module.resource &&
                        /\.js$/.test(module.resource) &&
                        module.resource.indexOf(
                            path.join(__dirname, '../node_modules')
                        ) === 0
                    )
                }
            }),
            // extract webpack runtime and module manifest to its own file in order to
            // prevent vendor hash from being updated whenever app bundle is updated
            new webpack.optimize.CommonsChunkPlugin({
                name: 'manifest',
                minChunks: Infinity
            }),
            // This instance extracts shared chunks from code splitted chunks and bundles them
            // in a separate chunk, similar to the vendor chunk
            // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
            new webpack.optimize.CommonsChunkPlugin({
                name: 'app',
                async: 'vendor-async',
                children: true,
                minChunks: 3
            }),
    
            // copy custom static assets
            new CopyWebpackPlugin([{
                from: path.resolve(__dirname, '../static'),
                to: config.build.assetsSubDirectory,
                ignore: ['.*']
            }]),
    
            //2、开始
            new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),
            new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
            new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),
            new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
            new webpack.DefinePlugin({
                // Define relative base path in cesium for loading assets 注意和dev中略有不同 '' 变成了'./'
                CESIUM_BASE_URL: JSON.stringify('./')
            })
            //2、结束
        ]
    })
    
    if (config.build.productionGzip) {
        const CompressionWebpackPlugin = require('compression-webpack-plugin')
    
        webpackConfig.plugins.push(
            new CompressionWebpackPlugin({
                asset: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp(
                    '\\.(' +
                    config.build.productionGzipExtensions.join('|') +
                    ')$'
                ),
                threshold: 10240,
                minRatio: 0.8
            })
        )
    }
    
    if (config.build.bundleAnalyzerReport) {
        const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
        webpackConfig.plugins.push(new BundleAnalyzerPlugin())
    }
    
    module.exports = webpackConfig

##   5.4 配置 index.js ##

位于**vue\_cesium/config/ **目录下  请将该配置文件中标注的1、2 处配置全部正确配置

'use strict'
    // Template version: 1.3.1
    // see http://vuejs-templates.github.io/webpack for documentation.
    
    const path = require('path')
    
    module.exports = {
        dev: {
    
            // Paths
            assetsSubDirectory: 'static',
            //1、 此处由'/' 修改为 ''
            assetsPublicPath: '',
            proxyTable: {},
    
            // Various Dev Server settings
            host: 'localhost', // can be overwritten by process.env.HOST
            port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
            autoOpenBrowser: false,
            errorOverlay: true,
            notifyOnErrors: true,
            poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    
    
            /**
             * Source Maps
             */
    
            // https://webpack.js.org/configuration/devtool/#development
            devtool: 'cheap-module-eval-source-map',
    
            // If you have problems debugging vue-files in devtools,
            // set this to false - it *may* help
            // https://vue-loader.vuejs.org/en/options.html#cachebusting
            cacheBusting: true,
    
            cssSourceMap: true
        },
    
        build: {
            // Template for index.html
            index: path.resolve(__dirname, '../dist/index.html'),
    
            // Paths
            assetsRoot: path.resolve(__dirname, '../dist'),
            assetsSubDirectory: 'static',
            assetsPublicPath: '/',
    
            /**
             * Source Maps
             */
    
            productionSourceMap: true,
            // https://webpack.js.org/configuration/devtool/#production
            devtool: '#source-map',
    
            // Gzip off by default as many popular static hosts such as
            // Surge or Netlify already gzip all static assets for you.
            // Before setting to `true`, make sure to:
            // npm install --save-dev compression-webpack-plugin
            productionGzip: false,
            productionGzipExtensions: ['js', 'css'],
    
            // Run the build command with an extra argument to
            // View the bundle analyzer report after build finishes:
            // `npm run build --report`
            // Set to `true` or `false` to always turn it on or off
            bundleAnalyzerReport: process.env.npm_config_report
        }
    }

# 6、引用Cesium 开发示例应用 #

##   6.1 在main.js中引入cesium   ##

位于 **vue\_cesium/src/** 目录下

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    //新版本的cesium 不支持以前的import 方式导入  这是个坑
    var Cesium = require('cesium/Cesium');
    var widgets = require('cesium/Widgets/widgets.css');
    
    //此处将cesium 赋给全局
    Vue.prototype.Cesium = Cesium
    Vue.prototype.widgets = widgets
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
        el: '#app',
        router,
        components: { App },
        template: '<App/>'
    })

##   6.2  在components目录下  新建vue组件 CesiumViewer.vue ##

位于 **vue\_cesium/src/components**目录下

<template>
      <div class="container">
        <div id="cesiumContainer"></div>
      </div>
    </template>
     
    <script>
    export default {
      name: "cesiumviewer",
      data() {
        return {};
      },
      mounted() {
        var Cesium = this.Cesium;
        var cesiumContainer = document.getElementById("cesiumContainer");
        var viewer = new Cesium.Viewer("cesiumContainer", {
          //加载在线谷歌地图
          imageryProvider: new Cesium.UrlTemplateImageryProvider({
            url: "http://www.google.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}"
          }),
          animation: false,
          baseLayerPicker:false,
          geocode:false,
          homeButton:false,
          infoBox: false,
          sceneModelPicker: true,
          timeline: false,
          navigationHelpButton: false,
          navigationInstructionsInitiallyVisible:false,
          navigation:false
        });
    
        //去除掉 版权信息
        viewer._cesiumWidget._creditContainer.style.display = "none";
      }
    };
    </script>
     
    
    <style scoped>
    .container {
      width: 100%;
      height: 100%;
    }
    
    html,body,#cesiumContainer {
      width: 100%;
      height: 100%;
      position:absolute;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    
    .cesium-widget-credits {
      display: none !important;
      visibility: hide !important;
    }
    </style>

##   6.3  配置路由 ##

位于 **vue\_cesium/src/router** 目录下

import Vue from 'vue'
    import Router from 'vue-router'
    import CesiumViewer from '@/components/CesiumViewer'
    
    Vue.use(Router)
    
    export default new Router({
        routes: [{
            path: '/',
            name: 'CesiumViewer',
            component: CesiumViewer
        }]
    })

##   6.4 App.vue ##

位于 **vue\_cesium/src/ **目录下

<template>
      <div id="app">
        <router-view/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
    }
    </style>

# 7. 翻滚吧！Cesium ... #

在项目根目录下 使用命令行 执行 **npm run dev** 成功后 再次访问**http://localhost:8080**

**  当你看到如下 画面时说明 你已经集成成功了...**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNjUzMjA1_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNjUzMjA1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200229133100460.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNjUzMjA1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNjUzMjA1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200229133631429.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNjUzMjA1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNjUzMjA1_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200229135948466.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNjUzMjA1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNjUzMjA1_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200229144650143.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNjUzMjA1,size_16,color_FFFFFF,t_70