'init'

+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"]
+}

+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}

+# mybox
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
+
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})

+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  const warnings = []
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+
+    console.log()
+    process.exit(1)
+  }
+}

+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+
+  return output
+}
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split('!').pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}

+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+const sourceMapEnabled = isProduction
+  ? config.build.productionSourceMap
+  : config.dev.cssSourceMap
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}

+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  externals: {
+    'mapbox-gl': 'mapboxgl',
+},
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+    }
+  },
+  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]')
+        }
+      }
+    ]
+  },
+  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'
+  }
+}

+'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')
+
+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: ['.*']
+      }
+    ])
+  ]
+})
+
+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)
+    }
+  })
+})

+'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')
+
+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: ['.*']
+      }
+    ])
+  ]
+})
+
+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

+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})

+'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',
+    assetsPublicPath: '/',
+    proxyTable: {
+      // '/api':{
+      //   target: 'http://support.supermap.com.cn:8090', //源地址 
+      //   changeOrigin: true, //改变源 
+      //   pathRewrite: { 
+      //     '^/api': 'http://support.supermap.com.cn:8090' //路径重写 
+      //     }
+      // }
+    },
+
+    // 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
+  }
+}

+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>SuperMap Mapbox GL VUE示例</title>
+    <script src="./static/js/mapbox-gl-enhance.js"></script>
+    <script src="./static//js/styles.js"></script>
+    <link href='./static/css/mapbox-gl.css' rel='stylesheet' />
+  </head>
+  <body style="padding: 0px; margin: 0px;">
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

+{
+  "name": "mybox",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "leone",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "serve": "npm run dev",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "@mapbox/mapbox-gl-draw": "^1.1.2",
+    "@supermap/iclient-mapboxgl": "^10.0.0",
+    "ant-design-vue": "^1.4.10",
+    "jquery": "^3.4.1",
+    "mapbox-gl": "^1.6.0",
+    "mapbox-gl-compare": "^0.3.0",
+    "vue": "^2.5.2",
+    "vue-router": "^3.0.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "chalk": "^2.0.1",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.28.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^1.1.4",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "node-notifier": "^5.1.2",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "ora": "^1.2.0",
+    "portfinder": "^1.0.13",
+    "postcss-import": "^11.0.0",
+    "postcss-loader": "^2.0.8",
+    "postcss-url": "^7.2.1",
+    "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^13.3.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.5.2",
+    "webpack": "^3.6.0",
+    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-dev-server": "^2.9.1",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 6.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

+<!--
+ * @Author: jiangbotao
+ * @Date: 2019-12-12 17:40:15
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-12 17:51:38
+ * @FilePath: \mymapbox\src\App.vue
+ -->
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
+
+<style>
+#app {
+
+}
+</style>

+<!--
+ * @Author: jiangbotao
+ * @Date: 2019-12-09 23:17:48
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-10 17:42:21
+ * @FilePath: \mymapbox\src\components\Map3857.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import { Logo } from '@supermap/iclient-mapboxgl';
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
+
+export default {
+    name: 'RasterTiles',
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var iServerUrl = "http://iclient.supermap.io/iserver/services/map-city/rest/maps/city/tileFeature.mvt?_cache=false&returnAttributes=true&compressTolerance=-1&width=512&height=512&viewBounds={bbox-epsg-3857}";
+
+        var buildingLayer, heightField = "floor", ratio = 15, layerId = "buildings",
+            center = [106.540545, 29.531714];
+
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: mapboxgl.supermap.map.getDefaultVectorTileStyle(iServerUrl),
+            pitch: 60,
+            bearing: 290,
+            center: center,
+            zoom: 12
+        });
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>
\ No newline at end of file

+<!--
+ * @Author: jiangbotao
+ * @Date: 2019-12-09 23:17:48
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-12 16:31:06
+ * @FilePath: \mymapbox\src\components\Map3857.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import { Logo, MapService } from '@supermap/iclient-mapboxgl';
+export default {
+    name: 'HelloWorld',
+
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var map, host = "http://support.supermap.com.cn:8090";
+        var url = host + "/iserver/services/map-world/rest/maps/World";
+
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": 'attribution',
+                        "type": "raster",
+                        "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "simple-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }]
+            },
+            center: [-74.50, 40],
+            maxZoom: 18,
+            zoom: 2
+        });
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+
+        map.on('load', function () {
+            mapService();
+        });
+
+        function mapService() {
+            var getMapStatusService = new SuperMap.MapService(url, {
+                serverType: SuperMap.ServerType.ISERVER,
+                eventListeners: {
+                    processCompleted: callback
+                },
+            });
+            getMapStatusService.processAsync();
+        }
+
+        function callback(serviceResult) {
+            var result = serviceResult.result;
+            var innerHTML = '';
+            innerHTML += "Bounds:" + JSON.stringify(result.bounds) + "<br>";
+            new mapboxgl.Popup({closeOnClick: false})
+                .setLngLat([-96, 37.8])
+                .setHTML(innerHTML + "</br>")
+                .addTo(map);
+        }
+    }
+}
+</script>
+
+<style scoped>
+#map {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: white
+}
+</style>
\ No newline at end of file

+<!--
+ * @Author: jiangbotao
+ * @Date: 2019-12-09 23:17:48
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-12 18:37:31
+ * @FilePath: \mymapbox\src\components\Map3857.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { message } from'ant-design-vue';
+Vue.use(message)
+
+import mapboxgl from 'mapbox-gl';
+import { Logo, MeasureService } from '@supermap/iclient-mapboxgl';
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+export default {
+    name: 'HelloWorld',
+    data () {
+        return {
+            msg: 'aaa'
+        }
+    },
+    mounted(){ 
+        var map, host = "http://support.supermap.com.cn:8090";
+        var url = host + "/iserver/services/map-world/rest/maps/World";
+
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": 'attribution',
+                        "type": "raster",
+                        "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "simple-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }]
+            },
+            center: [110.143, 30.236],
+            maxZoom: 18,
+            zoom: 4
+        });
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+
+        var draw = new MapboxDraw({
+            displayControlsDefault: false,
+            controls: {
+                line_string: true,
+                polygon: true,
+                trash: true
+            }
+        });
+        map.addControl(draw, "top-left");
+
+        function measure(e) {
+            const type = e.features[0].geometry.type;
+            var param = new SuperMap.MeasureParameters(e.features[0]);
+            if(type === 'LineString'){
+                new MeasureService(url).measureDistance(param, function (serviceResult) {
+                    var distance = serviceResult.result.distance;
+                    var unit = serviceResult.result.unit;
+                    message.info('当前长度: '+ distance+" "+unit);
+                });
+            }else{
+                new MeasureService(url).measureArea(param, function (serviceResult) {
+                    var area = serviceResult.result.area;
+                    var unit = serviceResult.result.unit;
+                    var rounded_area = Math.round(area * 100) / 100;
+                    message.info('当前面积: '+ rounded_area+" 平方"+unit);
+                });
+            }
+        }
+
+        function removeMsg() {
+        }
+
+        map.on('draw.create', measure);
+        map.on('draw.delete', removeMsg);
+    }
+}
+</script>
+
+<style scoped>
+#map {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: white
+}
+</style>
\ No newline at end of file

+<!--
+ * @Author: jiangbotao
+ * @Date: 2019-12-09 23:17:48
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-10 16:43:29
+ * @FilePath: \mymapbox\src\components\Map3857.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import { Logo } from '@supermap/iclient-mapboxgl';
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
+
+export default {
+    name: 'MVT',
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var map = new mapboxgl.Map({
+            container: 'map',
+            attributionControl: false,
+            style: 'http://support.supermap.com.cn:8090/iserver/services/map-mvt-China/rest/maps/China/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
+            center: [110.143, 30.236], // starting position
+            zoom: 3 // starting zoom
+        });
+        map.addControl(new Logo(), 'bottom-right');
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+        map.addControl(new mapboxgl.ScaleControl({}));
+        map.addControl(new mapboxgl.FullscreenControl(),'top-right');
+        map.addControl(new mapboxgl.GeolocateControl({
+            positionOptions: {
+                enableHighAccuracy: true
+            },
+            trackUserLocation: true
+        }),'top-left');
+        map.addControl(new mapboxgl.AttributionControl({compact: true}));
+        var Draw = new MapboxDraw();
+        map.addControl(Draw,'top-left');
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>
\ No newline at end of file

+<!--
+ * @Author: jiangbotao
+ * @Date: 2019-12-09 23:17:48
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-10 17:42:07
+ * @FilePath: \mymapbox\src\components\Map3857.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import { Logo } from '@supermap/iclient-mapboxgl';
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
+
+export default {
+    name: 'RasterTiles',
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var map, host = "http://support.supermap.com.cn:8090";
+        var url = host + "/iserver/services/map-world/rest/maps/World";
+        var map = new mapboxgl.Map({
+            container: 'map',
+            attributionControl: false,
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": 'SuperMap Mapbox GL',
+                        "type": "raster",
+                        "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
+                        "tileSize": 256
+                    }
+                },
+                "layers": [{
+                    "id": "simple-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }]
+            },
+            center: [110.143, 30.236], // starting position
+            zoom: 3 // starting zoom
+        });
+        map.addControl(new Logo(), 'bottom-right');
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+        map.addControl(new mapboxgl.ScaleControl({}));
+        map.addControl(new mapboxgl.FullscreenControl(),'top-right');
+        map.addControl(new mapboxgl.GeolocateControl({
+            positionOptions: {
+                enableHighAccuracy: true
+            },
+            trackUserLocation: true
+        }),'top-left');
+        map.addControl(new mapboxgl.AttributionControl({compact: true}));
+        var Draw = new MapboxDraw();
+        map.addControl(Draw,'top-left');
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>
\ No newline at end of file

+<!--
+ * @Author: jiangbotao
+ * @Date: 2019-12-09 23:17:48
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-10 16:24:38
+ * @FilePath: \mymapbox\src\components\Map3857.vue
+ -->
+<template>
+    <div >
+        <div id='before' class='map'></div>
+        <div id='after' class='map'></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import Compare from 'mapbox-gl-compare';
+import { Logo, MapService } from '@supermap/iclient-mapboxgl';
+export default {
+    name: 'HelloWorld',
+
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var host = "http://support.supermap.com.cn:8090",
+        chinaUrl = host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}',
+        chinaDarkUrl = host + '/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}',
+        attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
+            " with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
+            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
+        var beforeMap = new mapboxgl.Map({
+            container: 'before',
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": attribution,
+                        "type": "raster",
+                        "tiles": [chinaUrl],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "before",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }],
+            },
+            center: [0, 0],
+            zoom: 0
+        });
+        beforeMap.addControl(new mapboxgl.NavigationControl(), 'top-left');
+        var afterMap = new mapboxgl.Map({
+            container: 'after',
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "type": "raster",
+                        "tiles": [chinaDarkUrl],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "after",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }],
+            },
+            center: [0, 0],
+            zoom: 0
+        });
+
+        //mapbox 卷帘（对比）控件
+        var map = new mapboxgl.Compare(beforeMap, afterMap, {
+            // Set this to enable comparing two maps by mouse movement:
+            // mousemove: true
+        });
+    }
+}
+</script>
+
+<style scoped>
+.map {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: white
+}
+</style>
\ No newline at end of file

+<!--
+ * @Author: jiangbotao
+ * @Date: 2019-12-10 14:16:04
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-10 16:53:43
+ * @FilePath: \mymapbox\src\components\Map_filter_sql.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import { Logo, FeatureService, QueryService } from '@supermap/iclient-mapboxgl';
+export default {
+    name: 'HelloWorld',
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var map, host = "http://support.supermap.com.cn:8090";
+        var url = host + "/iserver/services/map-world/rest/maps/World";
+        var dataUrl = host + "/iserver/services/data-world/rest/data";
+
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": 'attribution',
+                        "type": "raster",
+                        "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "simple-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }],
+            },
+            center: [110.143, 30.236],
+            maxZoom: 18,
+            zoom: 2
+        });
+        map.addControl(new Logo(), 'bottom-right');
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+        map.on('load', function () {
+            query();
+        });
+
+        function query() {
+            var sw = new mapboxgl.LngLat(0, 0);
+            var ne = new mapboxgl.LngLat(60, 30);
+            var lngLatBounds = new mapboxgl.LngLatBounds(sw, ne);
+
+            var boundsParam = new SuperMap.GetFeaturesByBoundsParameters({
+                datasetNames: ["World:Capitals"],
+                bounds: lngLatBounds
+            });
+
+            new FeatureService(dataUrl).getFeaturesByBounds(boundsParam, function (serviceResult) {
+                map.addSource("queryDatas", {
+                    "type": "geojson",
+                    "data": serviceResult.result.features
+                });
+                map.addLayer({
+                    "id": "queryDatas",
+                    "type": "circle",
+                    "source": "queryDatas",
+                    "paint": {
+                        "circle-radius": 6, /* 圆的直径，单位像素 */
+                        "circle-color": "blue", /* 圆的颜色 */
+                        "circle-opacity": 0.5  /* 圆的颜色 */
+                    },
+                });
+            });
+        }
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>

+<!--
+ * @Author: jiangbotao
+ * @Date: 2019-12-10 14:16:04
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-12 18:25:00
+ * @FilePath: \mymapbox\src\components\Map_filter_sql.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import { Logo, FeatureService, QueryService } from '@supermap/iclient-mapboxgl';
+export default {
+    name: 'HelloWorld',
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var map, host = "http://support.supermap.com.cn:8090";
+        var url = host + "/iserver/services/map-world/rest/maps/World";
+        var dataUrl = host + "/iserver/services/data-world/rest/data";
+
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": 'attribution',
+                        "type": "raster",
+                        "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "simple-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }],
+            },
+            center: [0, 0],
+            maxZoom: 18,
+            zoom: 2
+        });
+        map.addControl(new Logo(), 'bottom-right');
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+
+        map.on('load', function () {
+            var queryBufferGeometry = {
+                "type": "Polygon",
+                "coordinates": [[[-20, 20], [-20, -20], [20, -20], [20, 20], [-20, 20]]]
+            };
+            map.addLayer({
+                "id": "queryPolygon",
+                "type": "fill",
+                "source": {
+                    "type": "geojson",
+                    "data": {
+                        "type": "Feature",
+                        "geometry": queryBufferGeometry
+                    }
+                },
+                "paint": {
+                    "fill-color": "rgba(0, 0, 255, 0.1)",
+                    'fill-outline-color': "red",
+                },
+            });
+            query(queryBufferGeometry);
+        });
+
+        function query(queryBufferGeometry) {
+            var bufferParam = new SuperMap.GetFeaturesByBufferParameters({
+                datasetNames: ["World:Capitals"],
+                bufferDistance: 30,     // 30度
+                geometry: queryBufferGeometry
+            });
+            new mapboxgl.Popup().setText(' = 30').setLngLat([0, 0]).addTo(map);
+            new FeatureService(dataUrl).getFeaturesByBuffer(bufferParam, function (serviceResult) {
+                map.addSource("queryDatas", {
+                    "type": "geojson",
+                    "data": serviceResult.result.features
+                });
+                map.addLayer({
+                    "id": "queryDatas",
+                    "type": "circle",
+                    "source": "queryDatas",
+                    "paint": {
+                        "circle-radius": 6, /* 圆的直径，单位像素 */
+                        "circle-color": "blue", /* 圆的颜色 */
+                        "circle-opacity": 0.5  /* 圆的颜色 */
+                    },
+                });
+            });
+        }
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>

+<!--
+ * @Author: jiangbotao
+ * @Date: 2019-12-10 14:16:04
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-10 17:03:22
+ * @FilePath: \mymapbox\src\components\Map_filter_sql.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import { Logo, FeatureService, QueryService } from '@supermap/iclient-mapboxgl';
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
+
+export default {
+    name: 'HelloWorld',
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var map, host = "http://support.supermap.com.cn:8090";
+        var url = host + "/iserver/services/map-world/rest/maps/World";
+        var dataUrl = host + "/iserver/services/data-world/rest/data";
+
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": 'attribution',
+                        "type": "raster",
+                        "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "simple-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }],
+            },
+            center: [0, 0],
+            maxZoom: 18,
+            zoom: 2
+        });
+        map.addControl(new Logo(), 'bottom-right');
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+        var draw = new MapboxDraw({
+            displayControlsDefault: false,
+            controls: {
+                polygon: true,
+                trash: true
+            }
+        });
+        map.addControl(draw, "top-left");
+        function measure(e) {
+            console.log(e.features[0].geometry);
+            query(e.features[0].geometry);
+        }
+
+        function removeMsg() {
+        }
+
+        map.on('draw.create', measure);
+        map.on('draw.delete', removeMsg);
+
+        function query(queryPolygonGeometry) {
+            var geometryParam = new SuperMap.GetFeaturesByGeometryParameters({
+                datasetNames: ["World:Countries"],
+                geometry: queryPolygonGeometry,
+                spatialQueryMode: "INTERSECT"
+            });
+            new FeatureService(dataUrl).getFeaturesByGeometry(geometryParam, function (serviceResult) {
+                map.addSource("queryDatas", {
+                    "type": "geojson",
+                    "data": serviceResult.result.features
+                });
+                map.addLayer({
+                    "id": "queryDatas",
+                    "type": "fill",
+                    "source": "queryDatas",
+                    "paint": {
+                        "fill-color": "#FF3300", /* 填充的颜色 */
+                        "fill-opacity": 0.6      /* 透明度 */
+                    },
+                });
+            });
+        }
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>

+<!--
+ * @Author: jiangbotao
+ * @Date: 2019-12-10 14:16:04
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-10 17:01:03
+ * @FilePath: \mymapbox\src\components\Map_filter_sql.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import { Logo, FeatureService, QueryService } from '@supermap/iclient-mapboxgl';
+export default {
+    name: 'HelloWorld',
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var map, host = "http://support.supermap.com.cn:8090";
+        var url = host + "/iserver/services/map-world/rest/maps/World";
+        var dataUrl = host + "/iserver/services/data-world/rest/data";
+
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": 'attribution',
+                        "type": "raster",
+                        "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "simple-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }],
+            },
+            center: [0, 0],
+            maxZoom: 18,
+            zoom: 2
+        });
+        map.addControl(new Logo(), 'bottom-right');
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+
+        map.on('load', function () {
+            var queryPolygonGeometry = {
+                "type": "Polygon",
+                "coordinates": [[[0, 0], [-10, 30], [-30, 0], [0, 0]]]
+            };
+            map.addLayer({
+                "id": "queryPolygon",
+                "type": "fill",
+                "source": {
+                    "type": "geojson",
+                    "data": {
+                        "type": "Feature",
+                        "geometry": queryPolygonGeometry
+                    }
+                },
+                "paint": {
+                    "fill-color": "rgba(0, 0, 255, 0.1)",
+                    "fill-outline-color": "red",
+                },
+            });
+            query(queryPolygonGeometry);
+        });
+
+        function query(queryPolygonGeometry) {
+            var geometryParam = new SuperMap.GetFeaturesByGeometryParameters({
+                datasetNames: ["World:Countries"],
+                geometry: queryPolygonGeometry,
+                spatialQueryMode: "INTERSECT"
+            });
+            new FeatureService(dataUrl).getFeaturesByGeometry(geometryParam, function (serviceResult) {
+                map.addSource("queryDatas", {
+                    "type": "geojson",
+                    "data": serviceResult.result.features
+                });
+                map.addLayer({
+                    "id": "queryDatas",
+                    "type": "fill",
+                    "source": "queryDatas",
+                    "paint": {
+                        "fill-color": "#FF3300", /* 填充的颜色 */
+                        "fill-opacity": 0.6      /* 透明度 */
+                    },
+                });
+            });
+        }
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>

+<!--
+ * @Author: jiangbotao
+ * @Date: 2019-12-10 14:16:04
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-10 16:59:00
+ * @FilePath: \mymapbox\src\components\Map_filter_sql.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import { Logo, FeatureService, QueryService } from '@supermap/iclient-mapboxgl';
+export default {
+    name: 'HelloWorld',
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var map, host = "http://support.supermap.com.cn:8090";
+        var url = host + "/iserver/services/map-world/rest/maps/World";
+        var dataUrl = host + "/iserver/services/data-world/rest/data";
+
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": 'attribution',
+                        "type": "raster",
+                        "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "simple-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }],
+            },
+            center: [110.143, 30.236],
+            maxZoom: 18,
+            zoom: 2
+        });
+        map.addControl(new Logo(), 'bottom-right');
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+        map.on('load', function () {
+            query();
+        });
+
+        function query() {
+            // 在数据集 “World:Countries” 中查询 ID 为 247 的地理空间要素
+            var idsParam = new SuperMap.GetFeaturesByIDsParameters({
+                IDs: [247],
+                datasetNames: ["World:Countries"]
+            });
+
+            var service = new FeatureService(dataUrl);
+            service.getFeaturesByIDs(idsParam, function (serviceResult) {
+                map.addSource("queryDatas", {
+                    "type": "geojson",
+                    "data": serviceResult.result.features
+                });
+                map.addLayer({
+                    "id": "queryDatas",
+                    "type": "fill",
+                    "source": "queryDatas",
+                    "paint": {
+                        "fill-color": "#FF3300", /* 填充的颜色 */
+                        "fill-opacity": 0.4      /* 透明度 */
+                    },
+                    "filter": ["==", "$type", "Polygon"]
+                });
+                map.on('click', 'queryDatas', function (e) {
+                    new mapboxgl.Popup()
+                        .setLngLat(e.lngLat)
+                        .setHTML(e.features[0].properties.SMID + "：" + e.features[0].properties.COUNTRY)
+                        .addTo(map);
+                });
+            });
+        }
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>

+<!--
+ * @Author: jiangbotao
+ * @Date: 2019-12-10 14:16:04
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-10 14:56:09
+ * @FilePath: \mymapbox\src\components\Map_filter_sql.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import { Logo, FeatureService, QueryService } from '@supermap/iclient-mapboxgl';
+export default {
+    name: 'HelloWorld',
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var map, host = "http://support.supermap.com.cn:8090";
+        var url = host + "/iserver/services/map-world/rest/maps/World";
+        var dataUrl = host + "/iserver/services/data-world/rest/data";
+
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": 'attribution',
+                        "type": "raster",
+                        "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "simple-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }],
+            },
+            center: [110.143, 30.236],
+            maxZoom: 18,
+            zoom: 2
+        });
+        map.addControl(new Logo(), 'bottom-right');
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+
+        map.on('load', function () {
+            query();
+        });
+
+        function query() {
+            // 指定 SQL 查询即在指定数据集集合中查找符合 SQL 条件的矢量要素
+            // 并在客户端中展示出来
+            var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
+                queryParameter: {
+                    name: "Countries@World",
+                    attributeFilter: "SMID = 247"
+                },
+                datasetNames: ["World:Countries"]
+            });
+
+            new FeatureService(dataUrl).getFeaturesBySQL(sqlParam, function (serviceResult) {
+                map.addSource("queryDatas", {
+                    "type": "geojson",
+                    "data": serviceResult.result.features
+                });
+                map.addLayer({
+                    "id": "queryDatas",
+                    "type": "fill", /* fill类型一般用来表示一个面，一般较大 */
+                    "source": "queryDatas",
+                    "paint": {
+                        "fill-color": "#FF3300", /* 填充的颜色 */
+                        "fill-opacity": 0.6      /* 透明度 */
+                    },
+                });
+                map.on('click', 'queryDatas', function (e) {
+                    new mapboxgl.Popup()
+                        .setLngLat(e.lngLat)
+                        .setHTML(e.features[0].properties.SMID + "：" + e.features[0].properties.COUNTRY)
+                        .addTo(map);
+                });
+            });
+        }
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>

+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import { Logo, QueryByBoundsParameters, QueryService } from '@supermap/iclient-mapboxgl';
+export default {
+    name: 'HelloWorld',
+
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var map, host = "http://support.supermap.com.cn:8090";
+        var url = host + "/iserver/services/map-world/rest/maps/World";
+
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": 'attribution',
+                        "type": "raster",
+                        "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "simple-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }],
+            },
+            center: [0, 0],
+            maxZoom: 18,
+            zoom: 2
+        });
+        map.addControl(new Logo(), 'bottom-right');
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+
+        map.on('load', function () {
+            query();
+        });
+
+        function query() {
+            map.addLayer({
+                'id': 'polygonLayer',
+                'type': 'fill',
+                'source': {
+                    'type': 'geojson',
+                    'data': {
+                        'type': 'Feature',
+                        'geometry': {
+                            'type': 'Polygon',
+                            'coordinates': [[[0, 0], [60, 0], [60, 39], [0, 39], [0, 0]]],
+                        }
+                    }
+                },
+                'paint': {
+                    'fill-outline-color': 'blue',
+                    'fill-color': 'rgba(0, 0, 255, 0.1)'
+
+                }
+            });
+
+            var param = new QueryByBoundsParameters({
+                queryParams: {name: "Capitals@World.1"},
+                bounds: SuperMap.Bounds.fromArray([0, 0, 60, 39])
+            });
+
+            new mapboxgl.supermap.QueryService(url).queryByBounds(param, function (serviceResult) {
+                var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
+                var features = recordsets && recordsets[0] && recordsets[0].features;
+                map.addLayer({
+                    "id": "points",
+                    "type": "circle",
+                    "paint": {
+                        "circle-radius": 6,
+                        "circle-color": "#ff0000",
+                        "circle-opacity": 0.4,
+                        "circle-stroke-width": 2,
+                        "circle-stroke-color": "#007cbf",
+                        "circle-stroke-opacity": 0.5
+                    },
+                    "source": {
+                        "type": "geojson",
+                        "data": features
+                    }
+                });
+
+            });
+        }
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>

+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import { Logo, QueryByBoundsParameters, QueryService } from '@supermap/iclient-mapboxgl';
+export default {
+    name: 'HelloWorld',
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var map, host = "http://support.supermap.com.cn:8090";
+        var url = host + "/iserver/services/map-world/rest/maps/World";
+
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": 'attribution',
+                        "type": "raster",
+                        "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "simple-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }],
+            },
+            center: [121, 3],
+            maxZoom: 18,
+            zoom: 2
+        });
+        map.addControl(new Logo(), 'bottom-right');
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+
+        map.on('load', function () {
+            query();
+        });
+
+        var decodeMarkers = [];
+        function query() {
+            //添加查询中心点
+            var img = new Image();
+            img.src = './static/image/markerbig_select.png';
+            var marker = new mapboxgl.Marker(img).setLngLat([121, 30]);
+            decodeMarkers.push(marker);
+
+            var point = new SuperMap.Geometry.Point(104, 30);
+            var param = new SuperMap.QueryByDistanceParameters({
+                queryParams: {name: "Capitals@World.1"},
+                distance: 10,      // 100度的距离
+                geometry: point
+            });
+
+            var queryService = new QueryService(url);
+            queryService.queryByDistance(param, callback);
+        }
+
+        map.on('load', function () {
+            query();
+        });
+
+        function callback(serviceResult) {
+            var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
+            var features = recordsets && recordsets[0] && recordsets[0].features;
+            console.log(features);
+            decodeMarkers[0].addTo(map);
+            map.addLayer({
+                "id": "results",
+                "type": "circle",
+                "paint": {
+                    "circle-radius": 6,
+                    "circle-color": "#007cbf",
+                    "circle-opacity": 0.1,
+                    "circle-stroke-width": 2,
+                    "circle-stroke-color": "#007cbf",
+                    "circle-stroke-opacity": 0.5
+                },
+                "source": {
+                    "type": "geojson",
+                    "data": features
+                }
+            });
+        }
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>

+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import { Logo, QueryByBoundsParameters, QueryService } from '@supermap/iclient-mapboxgl';
+export default {
+    name: 'HelloWorld',
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var map, host = "http://support.supermap.com.cn:8090";
+        var url = host + "/iserver/services/map-world/rest/maps/World";
+
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": 'attribution',
+                        "type": "raster",
+                        "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "simple-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }],
+            },
+            center: [0, 0],
+            maxZoom: 18,
+            zoom: 2
+        });
+        map.addControl(new Logo(), 'bottom-right');
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+
+        map.on('load', function () {
+            query();
+        });
+
+        function query() {
+            var geo = {
+                'type': 'Feature',
+                'geometry': {
+                    'type': 'Polygon',
+                    'coordinates': [[[0, 0], [-30, 0], [-10, 30], [0, 0]]],
+                }
+            };
+            map.addLayer({
+                'id': 'polygonLayer',
+                'type': 'fill',
+                'source': {
+                    'type': 'geojson',
+                    'data': geo
+                },
+                'paint': {
+                    'fill-outline-color': 'red',
+                    'fill-color': 'rgba(0, 0, 255, 0.1)'
+                }
+            });
+
+            var param = new SuperMap.QueryByGeometryParameters({
+                queryParams: {name: "Capitals@World.1"},
+                geometry: geo
+            });
+
+            var queryService = new QueryService(url).queryByGeometry(param, function (serviceResult) {
+                var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
+                var features = recordsets && recordsets[0] && recordsets[0].features;
+                map.addLayer({
+                    "id": "points",
+                    "type": "circle",
+                    "paint": {
+                        "circle-radius": 6,
+                        "circle-color": "#FF0000",
+                        "circle-opacity": 0.5,
+                        "circle-stroke-width": 2,
+                        "circle-stroke-color": "#007cbf",
+                        "circle-stroke-opacity": 0.5
+                    },
+                    "source": {
+                        "type": "geojson",
+                        "data": features
+                    }
+                });
+            });
+        }
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>

+<!--
+ * @Author: jiangbotao
+ * @Date: 2019-12-10 14:16:04
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-10 14:29:45
+ * @FilePath: \mymapbox\src\components\Map_filter_sql.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import { Logo, QueryByBoundsParameters, QueryService } from '@supermap/iclient-mapboxgl';
+export default {
+    name: 'HelloWorld',
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var map, host = "http://support.supermap.com.cn:8090";
+        var url = host + "/iserver/services/map-world/rest/maps/World";
+
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": 'attribution',
+                        "type": "raster",
+                        "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "simple-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }],
+            },
+            center: [0, 0],
+            maxZoom: 18,
+            zoom: 2
+        });
+        map.addControl(new Logo(), 'bottom-right');
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+
+        map.on('load', function () {
+            query();
+        });
+
+        function query() {
+            var param = new SuperMap.QueryBySQLParameters({
+                queryParams: {
+                    name: "Capitals@World.1",
+                    attributeFilter: "SMID > 100"
+                }
+            });
+            var queryService = new QueryService(url).queryBySQL(param, function (serviceResult) {
+                console.log(serviceResult);
+                var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
+                var features = recordsets && recordsets[0] && recordsets[0].features;
+                map.addLayer({
+                    "id": "points",
+                    "type": "circle",
+                    "paint": {
+                        "circle-radius": 6,
+                        "circle-color": "#007cbf",
+                        "circle-opacity":0.1,
+                        "circle-stroke-width":2,
+                        "circle-stroke-color":"#007cbf",
+                        "circle-stroke-opacity":0.5
+                    },
+                    "source": {
+                        "type": "geojson",
+                        "data": features
+                    }
+                });
+            });
+        }
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>

+<!--
+ * 缓冲区分析
+ * @Author: jiangbotao
+ * @Date: 2019-12-10 14:16:04
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-10 19:58:51
+ * @FilePath: \mymapbox\src\components\Map_filter_sql.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import { Logo, FeatureService, QueryService, SpatialAnalystService } from '@supermap/iclient-mapboxgl';
+export default {
+    name: 'HelloWorld',
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var map, host = "http://support.supermap.com.cn:8090";
+        var baseUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}";
+        var serviceUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
+        var serviceUrl2 = 'http://support.supermap.com.cn:8090/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst/datasets/Road_L@Jingjin/buffer.json?returnContent=true';
+
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": 'attribution',
+                        "type": "raster",
+                        "tiles": [baseUrl],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "simple-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }],
+            },
+            center: [116.28094998209556, 39.897168019388474],
+            maxZoom: 18,
+            zoom: 12
+        });
+        map.addControl(new Logo(), 'bottom-right');
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+
+        map.on('load', function () {
+            bufferAnalystProcess();
+        });
+
+        function bufferAnalystProcess() {
+            map.addLayer({
+                "id": "route",
+                "type": "line",
+                "source": {
+                    "type": "geojson",
+                    "data": {
+                        "type": "Feature",
+                        "geometry": {
+                            "type": "LineString",
+                            "coordinates": [
+                                [116.2143386597, 39.8959419733],
+                                [116.2156351162, 39.8963250173],
+                                [116.2182280292, 39.8968111885],
+                                [116.2740019864, 39.8970124079],
+                                [116.3103285499, 39.8970574832],
+                                [116.3321510064, 39.8970392162],
+                                [116.3377051439, 39.8973437531],
+                                [116.3463089006, 39.8978391816],
+                            ]
+                        }
+                    }
+                },
+                "layout": {
+                    "line-join": "round",
+                    "line-cap": "round"
+                },
+                "paint": {
+                    "line-color": "#888",
+                    "line-width": 8
+                }
+            });
+            //缓冲区分析参数
+            var dsBufferAnalystParameters = new SuperMap.DatasetBufferAnalystParameters({
+                dataset: "Road_L@Jingjin",
+                filterQueryParameter: new SuperMap.FilterParameter({
+                    attributeFilter: "NAME='莲花池东路'"
+                }),
+                bufferSetting: new SuperMap.BufferSetting({
+                    endType: SuperMap.BufferEndType.ROUND,
+                    leftDistance: {value: 300},
+                    rightDistance: {value: 300},
+                    semicircleLineSegment: 10,
+                    radiusUnit: 'METER'
+                })
+            });
+            //缓冲区分析服务
+            new SpatialAnalystService(serviceUrl).bufferAnalysis(dsBufferAnalystParameters, function (serviceResult) {
+                console.log(serviceResult.result);
+                map.addLayer({
+                    "id": "queryDatas",
+                    "type": "fill", /* fill类型一般用来表示一个面，一般较大 */
+                    "source": {
+                        "type": "geojson",
+                        "data": serviceResult.result.recordset.features
+                    },
+                    "paint": {
+                        "fill-color": "red", /* 填充的颜色 */
+                        "fill-opacity": 0.4  /* 透明度 */
+                    },
+                });
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>
\ No newline at end of file

+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import {Logo, QueryByBoundsParameters, QueryService, SuperMap} from '@supermap/iclient-mapboxgl';
+import  $ from 'jquery'
+
+export default {
+    name: 'HelloWorld',
+    data () {
+        return {
+        }
+    },
+    mounted(){ 
+        var host = "http://support.supermap.com.cn:8090";
+        var map, heatMapLayer,
+            url = host + "/iserver/services/map-world/rest/maps/World";
+        var map = new mapboxgl.Map({
+            container: 'map',
+            renderWorldCopies:false,
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": 'attribution',
+                        "type": "raster",
+                        "tiles": [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "simple-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 9
+                }]
+            },
+            center: [0, 0],
+            zoom: 4
+        });
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+        map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
+
+        heatMapLayer = new mapboxgl.supermap.HeatMapLayer(
+            "heatMap",
+            {
+                "map": map,
+                "id": "heatmap",
+                "radius": 45,
+    //            设置图层透明度：（参数方式）
+    //            "opacity": 0.5,
+                //featureWeight指定以哪个属性值为热力权重值创建热力图：
+                "featureWeight": "value",
+            }
+        );
+
+        map.on('load', ()=>{
+            createHeatPoints();
+        });
+
+        function createHeatPoints() {
+            clearHeatPoints();
+            var heatPoints = [];
+            var num = 200
+            var radius = 50
+            var unit = 'px'
+            heatMapLayer.radius = radius;
+            var features = [];
+            for (var i = 0; i < num; i++) {
+                features[i] =
+                    {
+                        "type": "feature",
+                        "geometry": {
+                            "type": "Point",
+                            "coordinates": [
+                                Math.random() * 300 - 180,
+                                Math.random() * 100 - 80]
+                        },
+                        "properties": {
+                            "value": Math.random() * 9,
+                        }
+                    };
+            }
+            var heatPoints = {
+                "type": "FeatureCollection",
+                "features": features
+            };
+            heatMapLayer.addFeatures(heatPoints);
+    //        设置图层透明度：（函数方式）
+    //        heatMapLayer.setOpacity(0.5);
+            map.addLayer(heatMapLayer);
+        }
+
+        function clearHeatPoints() {
+            if (map.getLayer("heatmap")) {
+                map.removeLayer("heatmap");
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    background-color: white
+}
+</style>

+<!--
+ * 点密度专题图用一定大小、形状相同的点表示现象分布范围、数量特征和分布密度。
+ * 点的多少和所代表的意义由地图的内容决定。
+ * 点密度专题图使用点的数目或者密集程度来反映一个区域或范围所对应的专题值。
+ * @Author: jiangbotao
+ * @Date: 2019-12-10 14:16:04
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-10 17:25:54
+ * @FilePath: \mymapbox\src\components\Map_filter_sql.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import { Logo, FeatureService, QueryService, ThemeService } from '@supermap/iclient-mapboxgl';
+export default {
+    name: 'HelloWorld',
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var map, host = "http://support.supermap.com.cn:8090";
+        var url = host + "/iserver/services/map-world/rest/maps/World";
+        var dataUrl = host + "/iserver/services/map-world/rest/maps/World";
+
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": 'attribution',
+                        "type": "raster",
+                        "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "simple-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }],
+            },
+            center: [108.94, 34.34],
+            maxZoom: 18,
+            zoom: 2
+        });
+        map.addControl(new Logo(), 'bottom-right');
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+
+        map.on('load', function () {
+            createTheme();
+        });
+
+        function createTheme() {
+            var themeDotDensity = new SuperMap.ThemeDotDensity({
+                dotExpression: "Pop_1994",
+                value: 5000000,
+                style: new SuperMap.ServerStyle({
+                    markerSize: 3,
+                    markerSymbolID: 12
+                })
+            });
+            var themeParameters = new SuperMap.ThemeParameters({
+                themes: [themeDotDensity],
+                datasetNames: ["Countries"],
+                dataSourceNames: ["World"]
+            });
+
+            var themeService = new ThemeService(dataUrl);
+            themeService.getThemeInfo(themeParameters, function (serviceResult) {
+                var result = serviceResult.result;
+                console.log(result);
+                if (result && result.newResourceID) {
+                    map.addSource("theme", {
+                        "type": 'raster',
+                        "tiles": ['http://support.supermap.com.cn:8090/iserver/services/maps/rest/maps/World/zxyTileImage.png?z={z}&x={x}&y={y}&transparent=true&cacheEnabled=false&noWrap=true&layersID=' + result.newResourceID],
+                        "tileSize": 256,
+                    });
+                    map.addLayer({
+                        "id": "themeLayer",
+                        "type": "raster",
+                        "source": "theme",
+                    });
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>
\ No newline at end of file

+<!--
+ * @Author: jiangbotao
+ * @Date: 2019-12-10 14:16:04
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-10 15:35:38
+ * @FilePath: \mymapbox\src\components\Map_filter_sql.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import { Logo, FeatureService, QueryService, ThemeService } from '@supermap/iclient-mapboxgl';
+export default {
+    name: 'HelloWorld',
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var map, host = "http://support.supermap.com.cn:8090";
+        var url = host + "/iserver/services/map-world/rest/maps/World";
+        var dataUrl = host + "/iserver/services/map-china400/rest/maps/China";
+
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": 'attribution',
+                        "type": "raster",
+                        "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "simple-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }],
+            },
+            center: [108.94, 34.34],
+            maxZoom: 18,
+            zoom: 2
+        });
+        map.addControl(new Logo(), 'bottom-right');
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+
+        map.on('load', function () {
+            createTheme();
+        });
+
+        function createTheme() {
+            var themeGraduatedSymbol = new SuperMap.ThemeGraduatedSymbol({
+                expression: "SMAREA",
+                baseValue: 3000000000000,
+                graduatedMode: SuperMap.GraduatedMode.CONSTANT,
+                flow: new SuperMap.ThemeFlow({
+                    flowEnabled: true
+                }),
+                style: new SuperMap.ThemeGraduatedSymbolStyle({
+                    positiveStyle: new SuperMap.ServerStyle({
+                        markerSize: 50,
+                        markerSymbolID: 0,
+                        lineColor: new SuperMap.ServerColor(255, 165, 0),
+                        fillBackColor: new SuperMap.ServerColor(255, 0, 0)
+                    })
+                })
+            });
+
+            var themeParameters = new SuperMap.ThemeParameters({
+                themes: [themeGraduatedSymbol],
+                datasetNames: ["China_Province_pg"],
+                dataSourceNames: ["China"]
+            });
+
+            new ThemeService(dataUrl).getThemeInfo(themeParameters, function (serviceResult) {
+                var result = serviceResult.result;
+                if (result && result.newResourceID) {
+                    map.addSource("theme", {
+                        "type": 'raster',
+                        "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}&transparent=true&cacheEnabled=false&layersID=' + result.newResourceID],
+                        "tileSize": 256,
+                    });
+                    map.addLayer({
+                        "id": "themeLayer",
+                        "type": "raster",
+                        "source": "theme",
+                    });
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>
\ No newline at end of file

+<!--
+ * @Author: jiangbotao
+ * @Date: 2019-12-10 14:16:04
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-10 15:43:09
+ * @FilePath: \mymapbox\src\components\Map_filter_sql.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import { Logo, FeatureService, QueryService, ThemeService } from '@supermap/iclient-mapboxgl';
+export default {
+    name: 'HelloWorld',
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var map, host = "http://support.supermap.com.cn:8090";
+        var url = host + "/iserver/services/map-world/rest/maps/World";
+        var dataUrl = host + "/iserver/services/map-china400/rest/maps/China";
+
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": 'attribution',
+                        "type": "raster",
+                        "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "simple-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }],
+            },
+            center: [108.94, 34.34],
+            maxZoom: 18,
+            zoom: 2
+        });
+        map.addControl(new Logo(), 'bottom-right');
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+
+        map.on('load', function () {
+            createTheme();
+        });
+
+        function createTheme() {
+            var style1, style2, style3;
+            style1 = new SuperMap.ServerTextStyle({
+                fontHeight: 4,
+                foreColor: new SuperMap.ServerColor(0, 0, 0),
+
+            });
+            style2 = new SuperMap.ServerTextStyle({
+                fontHeight: 4,
+                foreColor: new SuperMap.ServerColor(155, 30, 45),
+            });
+            style3 = new SuperMap.ServerTextStyle({
+                fontHeight: 4,
+                foreColor: new SuperMap.ServerColor(30, 45, 155),
+            });
+            var themeLabelItem1, themeLabelItem2, themeLabelItem3;
+            themeLabelItem1 = new SuperMap.ThemeLabelItem({
+                start: 300,//110000,
+                end: 3508,//350000,
+                style: style1
+            });
+            themeLabelItem2 = new SuperMap.ThemeLabelItem({
+                start: 3508,//350000,
+                end: 5508,//550000,
+                style: style2
+            });
+            themeLabelItem3 = new SuperMap.ThemeLabelItem({
+                start: 5508,//550000,
+                end: 10724,//820000,
+                style: style3
+            });
+
+            var themeLabel = new SuperMap.ThemeLabel({
+                labelExpression: "NAME",
+                rangeExpression: "pop_2014",
+                numericPrecision: 0,
+                items: [themeLabelItem1, themeLabelItem2, themeLabelItem3],
+                background: new SuperMap.ThemeLabelBackground({
+                    backStyle: new SuperMap.ServerStyle({
+                        fillForeColor: new SuperMap.ServerColor(179, 209, 193),
+                        fillOpaqueRate: 60,
+                        lineWidth: 0.1
+                    }),
+                    labelBackShape: "RECT"
+                })
+            });
+            var themeParameters = new SuperMap.ThemeParameters({
+                themes: [themeLabel],
+                datasetNames: ["China_Province_pg"],
+                dataSourceNames: ["China"]
+            });
+
+            new ThemeService(dataUrl).getThemeInfo(themeParameters, function (serviceResult) {
+                var result = serviceResult.result;
+                if (result && result.newResourceID) {
+                    map.addSource("theme", {
+                        "type": 'raster',
+                        "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}&transparent=true&cacheEnabled=false&layersID=' + result.newResourceID],
+                        "tileSize": 256,
+                    });
+
+                    map.addLayer({
+                        "id": "themeLayer",
+                        "type": "raster",
+                        "source": "theme",
+                    });
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>
\ No newline at end of file

+<!--
+ * @Author: jiangbotao
+ * @Date: 2019-12-10 14:16:04
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-10 15:53:23
+ * @FilePath: \mymapbox\src\components\Map_filter_sql.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import { Logo, FeatureService, QueryService, ThemeService } from '@supermap/iclient-mapboxgl';
+export default {
+    name: 'HelloWorld',
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var map, host = "http://support.supermap.com.cn:8090";
+        var url = host + "/iserver/services/map-world/rest/maps/World";
+        var dataUrl = host + "/iserver/services/map-china400/rest/maps/China";
+
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": 'attribution',
+                        "type": "raster",
+                        "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "simple-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }],
+            },
+            center: [108.94, 34.34],
+            maxZoom: 18,
+            zoom: 2
+        });
+        map.addControl(new Logo(), 'bottom-right');
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+
+        map.on('load', function () {
+            createTheme();
+        });
+
+        function createTheme() {
+            var themeRangeItem1, themeRangeItem2, themeRangeItem3, themeRange;
+            themeRangeItem1 = new SuperMap.ThemeRangeItem({
+                start: 0,
+                end: 500000000000,
+                style: new SuperMap.ServerStyle({
+                    fillForeColor: new SuperMap.ServerColor(211, 255, 250),
+                    lineColor: new SuperMap.ServerColor(179, 209, 193),
+                    lineWidth: 0.1
+                })
+            });
+            themeRangeItem2 = new SuperMap.ThemeRangeItem({
+                start: 500000000000,
+                end: 1000000000000,
+                style: new SuperMap.ServerStyle({
+                    fillForeColor: new SuperMap.ServerColor(178, 218, 199),
+                    lineColor: new SuperMap.ServerColor(179, 209, 193),
+                    lineWidth: 0.1
+                })
+            });
+            themeRangeItem3 = new SuperMap.ThemeRangeItem({
+                start: 1000000000000,
+                end: 3000000000000,
+                style: new SuperMap.ServerStyle({
+                    fillForeColor: new SuperMap.ServerColor(58, 178, 166),
+                    lineColor: new SuperMap.ServerColor(179, 209, 193),
+                    lineWidth: 0.1
+                })
+            });
+            themeRange = new SuperMap.ThemeRange({
+                rangeExpression: "SMAREA",
+                rangeMode: SuperMap.RangeMode.EQUALINTERVAL,
+                items: [themeRangeItem1, themeRangeItem2, themeRangeItem3]
+            });
+            var themeParameters = new SuperMap.ThemeParameters({
+                datasetNames: ["China_Province_pg"],
+                dataSourceNames: ["China"],
+                joinItems: null,
+                themes: [themeRange]
+            });
+
+            new ThemeService(dataUrl).getThemeInfo(themeParameters, function (serviceResult) {
+                var result = serviceResult.result;
+                if (result && result.newResourceID) {
+                    map.addSource("theme", {
+                        "type": 'raster',
+                        "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}&noWrap=true&transparent=true&cacheEnabled=false&layersID=' + result.newResourceID],
+                        "tileSize": 256,
+                    });
+
+                    map.addLayer({
+                        "id": "themeLayer",
+                        "type": "raster",
+                        "source": "theme",
+                    });
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>
\ No newline at end of file

+<!--
+ * @Author: jiangbotao
+ * @Date: 2019-12-10 14:16:04
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-10 15:40:38
+ * @FilePath: \mymapbox\src\components\Map_filter_sql.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import { Logo, FeatureService, QueryService, ThemeService } from '@supermap/iclient-mapboxgl';
+export default {
+    name: 'HelloWorld',
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var map, host = "http://support.supermap.com.cn:8090";
+        var url = host + "/iserver/services/map-world/rest/maps/World";
+        var dataUrl = host + "/iserver/services/map-china400/rest/maps/China";
+
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: {
+                "version": 8,
+                "sources": {
+                    "raster-tiles": {
+                        "attribution": 'attribution',
+                        "type": "raster",
+                        "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
+                        "tileSize": 256,
+                    },
+                },
+                "layers": [{
+                    "id": "simple-tiles",
+                    "type": "raster",
+                    "source": "raster-tiles",
+                    "minzoom": 0,
+                    "maxzoom": 22
+                }],
+            },
+            center: [108.94, 34.34],
+            maxZoom: 18,
+            zoom: 2
+        });
+        map.addControl(new Logo(), 'bottom-right');
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+
+        map.on('load', function () {
+            createTheme();
+        });
+
+        function createTheme() {
+            var themeGraph = new SuperMap.ThemeGraph({
+                items: [
+                    new SuperMap.ThemeGraphItem({
+                        caption: "全国省份2013_GDP",
+                        graphExpression: "GDP_2013",
+                        uniformStyle: new SuperMap.ServerStyle({
+                            fillForeColor: new SuperMap.ServerColor(255, 215, 0),
+                            lineWidth: 0
+                        })
+                    }),
+                    new SuperMap.ThemeGraphItem({
+                        caption: "全国省份2014_GDP",
+                        graphExpression: "GDP_2014",
+                        uniformStyle: new SuperMap.ServerStyle({
+                            fillForeColor: new SuperMap.ServerColor(0, 191, 255),
+                            lineWidth: 0
+                        })
+                    }),
+                ],
+                barWidth: 0.001,
+                graduatedMode: SuperMap.GraduatedMode.CONSTANT,
+                graphAxes: new SuperMap.ThemeGraphAxes({
+                    axesDisplayed: true
+                }),
+                graphSize: new SuperMap.ThemeGraphSize({
+                    maxGraphSize: 500000,
+                    minGraphSize: 200000
+                }),
+                graphText: new SuperMap.ThemeGraphText({
+                    graphTextDisplayed: true,
+                    graphTextFormat: SuperMap.ThemeGraphTextFormat.VALUE,
+                    graphTextStyle: new SuperMap.ServerTextStyle({
+                        fontHeight: 10,
+                        fontWidth: 10
+                    })
+                }),
+                overlapAvoided: false,
+                graphSizeFixed: false,
+                graphType: SuperMap.ThemeGraphType.BAR
+            });
+            var themeParameters = new SuperMap.ThemeParameters({
+                themes: [themeGraph],
+                datasetNames: ["China_Province_pg"],
+                dataSourceNames: ["China"]
+            });
+
+            new ThemeService(dataUrl).getThemeInfo(themeParameters, function (serviceResult) {
+                var result = serviceResult.result;
+                if (result && result.newResourceID) {
+                    map.addSource("theme", {
+                        "type": 'raster',
+                        "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}&transparent=true&cacheEnabled=false&layersID=' + result.newResourceID],
+                        "tileSize": 256,
+                    });
+                    map.addLayer({
+                        "id": "themeLayer",
+                        "type": "raster",
+                        "source": "theme",
+                    });
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>
\ No newline at end of file

+<!--
+ * - basic
+ * - dark
+ * - fiordcolor
+ * - klokantech
+ * - osm
+ * - positron
+ * @Author: jiangbotao
+ * @Date: 2019-12-09 23:17:48
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-12 18:34:35
+ * @FilePath: \mymapbox\src\components\Map3857.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import { Logo } from '@supermap/iclient-mapboxgl';
+
+export default {
+    name: 'MVT',
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        var map, host = "http://support.supermap.com.cn:8090";
+        var url = host + "/iserver/services/map-world/rest/maps/World";
+
+        var map = new mapboxgl.Map({
+            container: 'map', // container id
+            style: {
+                "version": 8,
+                "sources": {
+                    "vector-tiles": {
+                        "attribution": 'attribution',
+                        "type": "vector",
+                        "tiles": [host + "/iserver/services/map-beijing/rest/maps/beijingMap/tileFeature.mvt?returnAttributes=true&compressTolerance=-1&width=512&height=512&viewBounds={bbox-epsg-3857}&expands=0:0_2,132_128,138_64,141_32,143_16,145_8,147_4"]
+                    },
+                },
+                "glyphs": host + "/iserver/services/map-beijing/rest/maps/beijingMap/tileFeature/sdffonts/{fontstack}/{range}.pbf",
+                "layers": []
+            },
+            center: [116.4, 39.9],
+            minZoom: 10,
+            zoom: 11
+        });
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+
+        map.on('load', function () {
+            console.log(mapStyles["basic"].style);
+            map.setStyle(mapStyles["fiordcolor"].style, {diff: false});
+        });
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>
\ No newline at end of file

+<!--
+ * @Author: jiangbotao
+ * @Date: 2019-12-10 22:15:53
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-12 17:31:11
+ * @FilePath: \supermapvue\src\components\vt\Map_wz.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import { Logo } from '@supermap/iclient-mapboxgl';
+
+export default {
+    name: 'MVT',
+    data () {
+        return {
+        
+        }
+    },
+    mounted(){ 
+        // var url = "http://127.0.0.1:8090/iserver/services/map-mvt-China_Dark/rest/maps/China_Dark/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true";
+        // $.ajax({
+        //     url:url,
+        //     success:function(mvtStyle){
+        //         var zoom = mvtStyle.zoom == null ? minZoomLevel : mvtStyle.zoom;
+        //         var map = new mapboxgl.Map({
+        //             container: 'map', // container id
+        //             style: mvtStyle,
+        //             center: [-1, -2],// starting position
+        //             zoom: 4, // starting zoom
+        //             minZoom: 0,
+        //             maxZoom: 5,
+        //             crs: "EPSG:4490"
+        //         });
+        //         map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+        //         // map.setStyle({
+        //         //     style: {
+        //         //         layers: [
+        //         //             {
+        //         //                 "id": "background",
+        //         //                 "type": "background",
+        //         //                 "layout": {},
+        //         //                 "paint": {
+        //         //                     "background-color": "#fcfcfc"
+        //         //                 }
+        //         //             }
+        //         //         ]
+        //         //     }
+        //         // }, {diff: false});
+        //     }
+        // });
+        var map = new mapboxgl.Map({
+            container: 'map', // container id
+            style: 
+                'http://127.0.0.1:8090/iserver/services/map-mvt-China_Dark/rest/maps/China_Dark/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
+            center: [116.4, 39.9],
+            minZoom: 0,
+            zoom: 5
+        });
+        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+        map.on('load', function () {
+            console.log(map.getStyle().layers);
+            map.setPaintProperty('WorldElements_R@China', 'fill-color', '#a1dab4');
+            map.setPaintProperty('Country_R@China', 'fill-color', '#f03b20');
+            map.setPaintProperty('Province_R@China', 'fill-color', '#fd8d3c');
+        });
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>
\ No newline at end of file

+// 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'
+import 'ant-design-vue/dist/antd.css'
+
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})

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

+.mapboxgl-map {
+    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    overflow: hidden;
+    position: relative;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    text-align: left;
+}
+
+.mapboxgl-map:-webkit-full-screen {
+    width: 100%;
+    height: 100%;
+}
+
+.mapboxgl-canary {
+    background-color: salmon;
+}
+
+.mapboxgl-canvas-container.mapboxgl-interactive,
+.mapboxgl-ctrl-group > button.mapboxgl-ctrl-compass {
+    cursor: -webkit-grab;
+    cursor: -moz-grab;
+    cursor: grab;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer {
+    cursor: pointer;
+}
+
+.mapboxgl-canvas-container.mapboxgl-interactive:active,
+.mapboxgl-ctrl-group > button.mapboxgl-ctrl-compass:active {
+    cursor: -webkit-grabbing;
+    cursor: -moz-grabbing;
+    cursor: grabbing;
+}
+
+.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,
+.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas {
+    touch-action: pan-x pan-y;
+}
+
+.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,
+.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+    touch-action: pinch-zoom;
+}
+
+.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
+.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+    touch-action: none;
+}
+
+.mapboxgl-ctrl-top-left,
+.mapboxgl-ctrl-top-right,
+.mapboxgl-ctrl-bottom-left,
+.mapboxgl-ctrl-bottom-right { position: absolute; pointer-events: none; z-index: 2; }
+.mapboxgl-ctrl-top-left     { top: 0; left: 0; }
+.mapboxgl-ctrl-top-right    { top: 0; right: 0; }
+.mapboxgl-ctrl-bottom-left  { bottom: 0; left: 0; }
+.mapboxgl-ctrl-bottom-right { right: 0; bottom: 0; }
+
+.mapboxgl-ctrl {
+    clear: both;
+    pointer-events: auto;
+
+    /* workaround for a Safari bug https://github.com/mapbox/mapbox-gl-js/issues/8185 */
+    transform: translate(0, 0);
+}
+.mapboxgl-ctrl-top-left .mapboxgl-ctrl     { margin: 10px 0 0 10px; float: left; }
+.mapboxgl-ctrl-top-right .mapboxgl-ctrl    { margin: 10px 10px 0 0; float: right; }
+.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl  { margin: 0 0 10px 10px; float: left; }
+.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl { margin: 0 10px 10px 0; float: right; }
+
+.mapboxgl-ctrl-group {
+    border-radius: 4px;
+    background: #fff;
+}
+
+.mapboxgl-ctrl-group:not(:empty) {
+    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+}
+
+.mapboxgl-ctrl-group > button {
+    width: 30px;
+    height: 30px;
+    display: block;
+    padding: 0;
+    outline: none;
+    border: 0;
+    box-sizing: border-box;
+    background-color: transparent;
+    cursor: pointer;
+}
+
+.mapboxgl-ctrl-group > button + button {
+    border-top: 1px solid #ddd;
+}
+
+/* https://bugzilla.mozilla.org/show_bug.cgi?id=140562 */
+.mapboxgl-ctrl > button::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+.mapboxgl-ctrl > button:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+.mapboxgl-ctrl-group > button:focus {
+    box-shadow: 0 0 2px 2px rgba(0, 150, 255, 1);
+}
+
+.mapboxgl-ctrl-group > button:focus:focus-visible {
+    box-shadow: 0 0 2px 2px rgba(0, 150, 255, 1);
+}
+
+.mapboxgl-ctrl-group > button:focus:not(:focus-visible) {
+    box-shadow: none;
+}
+
+.mapboxgl-ctrl-group > button:focus:first-child {
+    border-radius: 4px 4px 0 0;
+}
+
+.mapboxgl-ctrl-group > button:focus:last-child {
+    border-radius: 0 0 4px 4px;
+}
+
+.mapboxgl-ctrl-group > button:focus:only-child {
+    border-radius: inherit;
+}
+
+.mapboxgl-ctrl-icon,
+.mapboxgl-ctrl-icon > .mapboxgl-ctrl-compass-arrow {
+    speak: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.mapboxgl-ctrl-icon {
+    padding: 5px;
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-icon-disabled {
+    opacity: 0.25;
+    border-color: #373737;
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath style='fill:%23333333;' d='m 7,9 c -0.554,0 -1,0.446 -1,1 0,0.554 0.446,1 1,1 l 6,0 c 0.554,0 1,-0.446 1,-1 0,-0.554 -0.446,-1 -1,-1 z'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath style='fill:%23333333;' d='M 10 6 C 9.446 6 9 6.4459904 9 7 L 9 9 L 7 9 C 6.446 9 6 9.446 6 10 C 6 10.554 6.446 11 7 11 L 9 11 L 9 13 C 9 13.55401 9.446 14 10 14 C 10.554 14 11 13.55401 11 13 L 11 11 L 13 11 C 13.554 11 14 10.554 14 10 C 14 9.446 13.554 9 13 9 L 11 9 L 11 7 C 11 6.4459904 10.554 6 10 6 z'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate::before {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10 4C9 4 9 5 9 5L9 5.1A5 5 0 0 0 5.1 9L5 9C5 9 4 9 4 10 4 11 5 11 5 11L5.1 11A5 5 0 0 0 9 14.9L9 15C9 15 9 16 10 16 11 16 11 15 11 15L11 14.9A5 5 0 0 0 14.9 11L15 11C15 11 16 11 16 10 16 9 15 9 15 9L14.9 9A5 5 0 0 0 11 5.1L11 5C11 5 11 4 10 4zM10 6.5A3.5 3.5 0 0 1 13.5 10 3.5 3.5 0 0 1 10 13.5 3.5 3.5 0 0 1 6.5 10 3.5 3.5 0 0 1 10 6.5zM10 8.3A1.8 1.8 0 0 0 8.3 10 1.8 1.8 0 0 0 10 11.8 1.8 1.8 0 0 0 11.8 10 1.8 1.8 0 0 0 10 8.3z'/%3E %3C/svg%3E");
+    content: "";
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate::before:disabled {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23aaa'%3E %3Cpath d='M10 4C9 4 9 5 9 5L9 5.1A5 5 0 0 0 5.1 9L5 9C5 9 4 9 4 10 4 11 5 11 5 11L5.1 11A5 5 0 0 0 9 14.9L9 15C9 15 9 16 10 16 11 16 11 15 11 15L11 14.9A5 5 0 0 0 14.9 11L15 11C15 11 16 11 16 10 16 9 15 9 15 9L14.9 9A5 5 0 0 0 11 5.1L11 5C11 5 11 4 10 4zM10 6.5A3.5 3.5 0 0 1 13.5 10 3.5 3.5 0 0 1 10 13.5 3.5 3.5 0 0 1 6.5 10 3.5 3.5 0 0 1 10 6.5zM10 8.3A1.8 1.8 0 0 0 8.3 10 1.8 1.8 0 0 0 10 11.8 1.8 1.8 0 0 0 11.8 10 1.8 1.8 0 0 0 10 8.3z'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active::before {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5L9 5.1A5 5 0 0 0 5.1 9L5 9C5 9 4 9 4 10 4 11 5 11 5 11L5.1 11A5 5 0 0 0 9 14.9L9 15C9 15 9 16 10 16 11 16 11 15 11 15L11 14.9A5 5 0 0 0 14.9 11L15 11C15 11 16 11 16 10 16 9 15 9 15 9L14.9 9A5 5 0 0 0 11 5.1L11 5C11 5 11 4 10 4zM10 6.5A3.5 3.5 0 0 1 13.5 10 3.5 3.5 0 0 1 10 13.5 3.5 3.5 0 0 1 6.5 10 3.5 3.5 0 0 1 10 6.5zM10 8.3A1.8 1.8 0 0 0 8.3 10 1.8 1.8 0 0 0 10 11.8 1.8 1.8 0 0 0 11.8 10 1.8 1.8 0 0 0 10 8.3z'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error::before {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E %3Cpath d='M10 4C9 4 9 5 9 5L9 5.1A5 5 0 0 0 5.1 9L5 9C5 9 4 9 4 10 4 11 5 11 5 11L5.1 11A5 5 0 0 0 9 14.9L9 15C9 15 9 16 10 16 11 16 11 15 11 15L11 14.9A5 5 0 0 0 14.9 11L15 11C15 11 16 11 16 10 16 9 15 9 15 9L14.9 9A5 5 0 0 0 11 5.1L11 5C11 5 11 4 10 4zM10 6.5A3.5 3.5 0 0 1 13.5 10 3.5 3.5 0 0 1 10 13.5 3.5 3.5 0 0 1 6.5 10 3.5 3.5 0 0 1 10 6.5zM10 8.3A1.8 1.8 0 0 0 8.3 10 1.8 1.8 0 0 0 10 11.8 1.8 1.8 0 0 0 11.8 10 1.8 1.8 0 0 0 10 8.3z'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background::before {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M 10,4 C 9,4 9,5 9,5 L 9,5.1 C 7.0357113,5.5006048 5.5006048,7.0357113 5.1,9 L 5,9 c 0,0 -1,0 -1,1 0,1 1,1 1,1 l 0.1,0 c 0.4006048,1.964289 1.9357113,3.499395 3.9,3.9 L 9,15 c 0,0 0,1 1,1 1,0 1,-1 1,-1 l 0,-0.1 c 1.964289,-0.400605 3.499395,-1.935711 3.9,-3.9 l 0.1,0 c 0,0 1,0 1,-1 C 16,9 15,9 15,9 L 14.9,9 C 14.499395,7.0357113 12.964289,5.5006048 11,5.1 L 11,5 c 0,0 0,-1 -1,-1 z m 0,2.5 c 1.932997,0 3.5,1.5670034 3.5,3.5 0,1.932997 -1.567003,3.5 -3.5,3.5 C 8.0670034,13.5 6.5,11.932997 6.5,10 6.5,8.0670034 8.0670034,6.5 10,6.5 Z'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error::before {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E %3Cpath d='M 10,4 C 9,4 9,5 9,5 L 9,5.1 C 7.0357113,5.5006048 5.5006048,7.0357113 5.1,9 L 5,9 c 0,0 -1,0 -1,1 0,1 1,1 1,1 l 0.1,0 c 0.4006048,1.964289 1.9357113,3.499395 3.9,3.9 L 9,15 c 0,0 0,1 1,1 1,0 1,-1 1,-1 l 0,-0.1 c 1.964289,-0.400605 3.499395,-1.935711 3.9,-3.9 l 0.1,0 c 0,0 1,0 1,-1 C 16,9 15,9 15,9 L 14.9,9 C 14.499395,7.0357113 12.964289,5.5006048 11,5.1 L 11,5 c 0,0 0,-1 -1,-1 z m 0,2.5 c 1.932997,0 3.5,1.5670034 3.5,3.5 0,1.932997 -1.567003,3.5 -3.5,3.5 C 8.0670034,13.5 6.5,11.932997 6.5,10 6.5,8.0670034 8.0670034,6.5 10,6.5 Z'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting::before {
+    -webkit-animation: mapboxgl-spin 2s infinite linear;
+    -moz-animation: mapboxgl-spin 2s infinite linear;
+    -o-animation: mapboxgl-spin 2s infinite linear;
+    -ms-animation: mapboxgl-spin 2s infinite linear;
+    animation: mapboxgl-spin 2s infinite linear;
+}
+
+@-webkit-keyframes mapboxgl-spin {
+    0% { -webkit-transform: rotate(0deg); }
+    100% { -webkit-transform: rotate(360deg); }
+}
+
+@-moz-keyframes mapboxgl-spin {
+    0% { -moz-transform: rotate(0deg); }
+    100% { -moz-transform: rotate(360deg); }
+}
+
+@-o-keyframes mapboxgl-spin {
+    0% { -o-transform: rotate(0deg); }
+    100% { -o-transform: rotate(360deg); }
+}
+
+@-ms-keyframes mapboxgl-spin {
+    0% { -ms-transform: rotate(0deg); }
+    100% { -ms-transform: rotate(360deg); }
+}
+
+@keyframes mapboxgl-spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-fullscreen {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M 5 4 C 4.5 4 4 4.5 4 5 L 4 6 L 4 9 L 4.5 9 L 5.7773438 7.296875 C 6.7771319 8.0602131 7.835765 8.9565728 8.890625 10 C 7.8257121 11.0633 6.7761791 11.951675 5.78125 12.707031 L 4.5 11 L 4 11 L 4 15 C 4 15.5 4.5 16 5 16 L 9 16 L 9 15.5 L 7.2734375 14.205078 C 8.0428931 13.187886 8.9395441 12.133481 9.9609375 11.068359 C 11.042371 12.14699 11.942093 13.2112 12.707031 14.21875 L 11 15.5 L 11 16 L 14 16 L 15 16 C 15.5 16 16 15.5 16 15 L 16 14 L 16 11 L 15.5 11 L 14.205078 12.726562 C 13.177985 11.949617 12.112718 11.043577 11.037109 10.009766 C 12.151856 8.981061 13.224345 8.0798624 14.228516 7.3046875 L 15.5 9 L 16 9 L 16 5 C 16 4.5 15.5 4 15 4 L 11 4 L 11 4.5 L 12.703125 5.7773438 C 11.932647 6.7864834 11.026693 7.8554712 9.9707031 8.9199219 C 8.9584739 7.8204943 8.0698767 6.7627188 7.3046875 5.7714844 L 9 4.5 L 9 4 L 6 4 L 5 4 z '/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-shrink {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath style='fill:%23000000;' d='M 4.2421875 3.4921875 A 0.750075 0.750075 0 0 0 3.71875 4.78125 L 5.9648438 7.0273438 L 4 8.5 L 4 9 L 8 9 C 8.500001 8.9999988 9 8.4999992 9 8 L 9 4 L 8.5 4 L 7.0175781 5.9550781 L 4.78125 3.71875 A 0.750075 0.750075 0 0 0 4.2421875 3.4921875 z M 15.734375 3.4921875 A 0.750075 0.750075 0 0 0 15.21875 3.71875 L 12.984375 5.953125 L 11.5 4 L 11 4 L 11 8 C 11 8.4999992 11.499999 8.9999988 12 9 L 16 9 L 16 8.5 L 14.035156 7.0273438 L 16.28125 4.78125 A 0.750075 0.750075 0 0 0 15.734375 3.4921875 z M 4 11 L 4 11.5 L 5.9648438 12.972656 L 3.71875 15.21875 A 0.75130096 0.75130096 0 1 0 4.78125 16.28125 L 7.0273438 14.035156 L 8.5 16 L 9 16 L 9 12 C 9 11.500001 8.500001 11.000001 8 11 L 4 11 z M 12 11 C 11.499999 11.000001 11 11.500001 11 12 L 11 16 L 11.5 16 L 12.972656 14.035156 L 15.21875 16.28125 A 0.75130096 0.75130096 0 1 0 16.28125 15.21875 L 14.035156 12.972656 L 16 11.5 L 16 11 L 12 11 z '/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > .mapboxgl-ctrl-compass-arrow {
+    width: 20px;
+    height: 20px;
+    margin: 5px;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E %3Cpolygon fill='%23333333' points='6,9 10,1 14,9'/%3E %3Cpolygon fill='%23CCCCCC' points='6,11 10,19 14,11 '/%3E %3C/svg%3E");
+    background-repeat: no-repeat;
+    display: inline-block;
+}
+
+a.mapboxgl-ctrl-logo {
+    width: 85px;
+    height: 21px;
+    margin: 0 0 -3px -3px;
+    display: block;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 84.49 21' style='enable-background:new 0 0 84.49 21;' xml:space='preserve'%3E%3Cg%3E %3Cpath class='st0' style='opacity:0.9; fill: %23FFFFFF; enable-background: new;' d='M83.25,14.26c0,0.12-0.09,0.21-0.21,0.21h-1.61c-0.13,0-0.24-0.06-0.3-0.17l-1.44-2.39l-1.44,2.39 c-0.06,0.11-0.18,0.17-0.3,0.17h-1.61c-0.04,0-0.08-0.01-0.12-0.03c-0.09-0.06-0.13-0.19-0.06-0.28l0,0l2.43-3.68L76.2,6.84 c-0.02-0.03-0.03-0.07-0.03-0.12c0-0.12,0.09-0.21,0.21-0.21h1.61c0.13,0,0.24,0.06,0.3,0.17l1.41,2.36l1.4-2.35 c0.06-0.11,0.18-0.17,0.3-0.17H83c0.04,0,0.08,0.01,0.12,0.03c0.09,0.06,0.13,0.19,0.06,0.28l0,0l-2.37,3.63l2.43,3.67 C83.24,14.18,83.25,14.22,83.25,14.26z'/%3E %3Cpath class='st0' style='opacity:0.9; fill: %23FFFFFF; enable-background: new;' d='M66.24,9.59c-0.39-1.88-1.96-3.28-3.84-3.28c-1.03,0-2.03,0.42-2.73,1.18V3.51c0-0.13-0.1-0.23-0.23-0.23h-1.4 c-0.13,0-0.23,0.11-0.23,0.23v10.72c0,0.13,0.1,0.23,0.23,0.23h1.4c0.13,0,0.23-0.11,0.23-0.23V13.5c0.71,0.75,1.7,1.18,2.73,1.18 c1.88,0,3.45-1.41,3.84-3.29C66.37,10.79,66.37,10.18,66.24,9.59L66.24,9.59z M62.08,13c-1.32,0-2.39-1.11-2.41-2.48v-0.06 c0.02-1.38,1.09-2.48,2.41-2.48s2.42,1.12,2.42,2.51S63.41,13,62.08,13z'/%3E %3Cpath class='st0' style='opacity:0.9; fill: %23FFFFFF; enable-background: new;' d='M71.67,6.32c-1.98-0.01-3.72,1.35-4.16,3.29c-0.13,0.59-0.13,1.19,0,1.77c0.44,1.94,2.17,3.32,4.17,3.3 c2.35,0,4.26-1.87,4.26-4.19S74.04,6.32,71.67,6.32z M71.65,13.01c-1.33,0-2.42-1.12-2.42-2.51s1.08-2.52,2.42-2.52 c1.33,0,2.42,1.12,2.42,2.51S72.99,13,71.65,13.01L71.65,13.01z'/%3E %3Cpath class='st1' style='opacity:0.35; enable-background:new;' d='M62.08,7.98c-1.32,0-2.39,1.11-2.41,2.48v0.06C59.68,11.9,60.75,13,62.08,13s2.42-1.12,2.42-2.51 S63.41,7.98,62.08,7.98z M62.08,11.76c-0.63,0-1.14-0.56-1.17-1.25v-0.04c0.01-0.69,0.54-1.25,1.17-1.25 c0.63,0,1.17,0.57,1.17,1.27C63.24,11.2,62.73,11.76,62.08,11.76z'/%3E %3Cpath class='st1' style='opacity:0.35; enable-background:new;' d='M71.65,7.98c-1.33,0-2.42,1.12-2.42,2.51S70.32,13,71.65,13s2.42-1.12,2.42-2.51S72.99,7.98,71.65,7.98z M71.65,11.76c-0.64,0-1.17-0.57-1.17-1.27c0-0.7,0.53-1.26,1.17-1.26s1.17,0.57,1.17,1.27C72.82,11.21,72.29,11.76,71.65,11.76z'/%3E %3Cpath class='st0' style='opacity:0.9; fill: %23FFFFFF; enable-background: new;' d='M45.74,6.53h-1.4c-0.13,0-0.23,0.11-0.23,0.23v0.73c-0.71-0.75-1.7-1.18-2.73-1.18 c-2.17,0-3.94,1.87-3.94,4.19s1.77,4.19,3.94,4.19c1.04,0,2.03-0.43,2.73-1.19v0.73c0,0.13,0.1,0.23,0.23,0.23h1.4 c0.13,0,0.23-0.11,0.23-0.23V6.74c0-0.12-0.09-0.22-0.22-0.22C45.75,6.53,45.75,6.53,45.74,6.53z M44.12,10.53 C44.11,11.9,43.03,13,41.71,13s-2.42-1.12-2.42-2.51s1.08-2.52,2.4-2.52c1.33,0,2.39,1.11,2.41,2.48L44.12,10.53z'/%3E %3Cpath class='st1' style='opacity:0.35; enable-background:new;' d='M41.71,7.98c-1.33,0-2.42,1.12-2.42,2.51S40.37,13,41.71,13s2.39-1.11,2.41-2.48v-0.06 C44.1,9.09,43.03,7.98,41.71,7.98z M40.55,10.49c0-0.7,0.52-1.27,1.17-1.27c0.64,0,1.14,0.56,1.17,1.25v0.04 c-0.01,0.68-0.53,1.24-1.17,1.24C41.08,11.75,40.55,11.19,40.55,10.49z'/%3E %3Cpath class='st0' style='opacity:0.9; fill: %23FFFFFF; enable-background: new;' d='M52.41,6.32c-1.03,0-2.03,0.42-2.73,1.18V6.75c0-0.13-0.1-0.23-0.23-0.23h-1.4c-0.13,0-0.23,0.11-0.23,0.23 v10.72c0,0.13,0.1,0.23,0.23,0.23h1.4c0.13,0,0.23-0.1,0.23-0.23V13.5c0.71,0.75,1.7,1.18,2.74,1.18c2.17,0,3.94-1.87,3.94-4.19 S54.58,6.32,52.41,6.32z M52.08,13.01c-1.32,0-2.39-1.11-2.42-2.48v-0.07c0.02-1.38,1.09-2.49,2.4-2.49c1.32,0,2.41,1.12,2.41,2.51 S53.4,13,52.08,13.01L52.08,13.01z'/%3E %3Cpath class='st1' style='opacity:0.35; enable-background:new;' d='M52.08,7.98c-1.32,0-2.39,1.11-2.42,2.48v0.06c0.03,1.38,1.1,2.48,2.42,2.48s2.41-1.12,2.41-2.51 S53.4,7.98,52.08,7.98z M52.08,11.76c-0.63,0-1.14-0.56-1.17-1.25v-0.04c0.01-0.69,0.54-1.25,1.17-1.25c0.63,0,1.17,0.58,1.17,1.27 S52.72,11.76,52.08,11.76z'/%3E %3Cpath class='st0' style='opacity:0.9; fill: %23FFFFFF; enable-background: new;' d='M36.08,14.24c0,0.13-0.1,0.23-0.23,0.23h-1.41c-0.13,0-0.23-0.11-0.23-0.23V9.68c0-0.98-0.74-1.71-1.62-1.71 c-0.8,0-1.46,0.7-1.59,1.62l0.01,4.66c0,0.13-0.11,0.23-0.23,0.23h-1.41c-0.13,0-0.23-0.11-0.23-0.23V9.68 c0-0.98-0.74-1.71-1.62-1.71c-0.85,0-1.54,0.79-1.6,1.8v4.48c0,0.13-0.1,0.23-0.23,0.23h-1.4c-0.13,0-0.23-0.11-0.23-0.23V6.74 c0.01-0.13,0.1-0.22,0.23-0.22h1.4c0.13,0,0.22,0.11,0.23,0.22V7.4c0.5-0.68,1.3-1.09,2.16-1.1h0.03c1.09,0,2.09,0.6,2.6,1.55 c0.45-0.95,1.4-1.55,2.44-1.56c1.62,0,2.93,1.25,2.9,2.78L36.08,14.24z'/%3E %3Cpath class='st1' style='opacity:0.35; enable-background:new;' d='M84.34,13.59l-0.07-0.13l-1.96-2.99l1.94-2.95c0.44-0.67,0.26-1.56-0.41-2.02c-0.02,0-0.03,0-0.04-0.01 c-0.23-0.15-0.5-0.22-0.78-0.22h-1.61c-0.56,0-1.08,0.29-1.37,0.78L79.72,6.6l-0.34-0.56C79.09,5.56,78.57,5.27,78,5.27h-1.6 c-0.6,0-1.13,0.37-1.35,0.92c-2.19-1.66-5.28-1.47-7.26,0.45c-0.35,0.34-0.65,0.72-0.89,1.14c-0.9-1.62-2.58-2.72-4.5-2.72 c-0.5,0-1.01,0.07-1.48,0.23V3.51c0-0.82-0.66-1.48-1.47-1.48h-1.4c-0.81,0-1.47,0.66-1.47,1.47v3.75 c-0.95-1.36-2.5-2.18-4.17-2.19c-0.74,0-1.46,0.16-2.12,0.47c-0.24-0.17-0.54-0.26-0.84-0.26h-1.4c-0.45,0-0.87,0.21-1.15,0.56 c-0.02-0.03-0.04-0.05-0.07-0.08c-0.28-0.3-0.68-0.47-1.09-0.47h-1.39c-0.3,0-0.6,0.09-0.84,0.26c-0.67-0.3-1.39-0.46-2.12-0.46 c-1.83,0-3.43,1-4.37,2.5c-0.2-0.46-0.48-0.89-0.83-1.25c-0.8-0.81-1.89-1.25-3.02-1.25h-0.01c-0.89,0.01-1.75,0.33-2.46,0.88 c-0.74-0.57-1.64-0.88-2.57-0.88H28.1c-0.29,0-0.58,0.03-0.86,0.11c-0.28,0.06-0.56,0.16-0.82,0.28c-0.21-0.12-0.45-0.18-0.7-0.18 h-1.4c-0.82,0-1.47,0.66-1.47,1.47v7.5c0,0.82,0.66,1.47,1.47,1.47h1.4c0.82,0,1.48-0.66,1.48-1.48l0,0V9.79 c0.03-0.36,0.23-0.59,0.36-0.59c0.18,0,0.38,0.18,0.38,0.47v4.57c0,0.82,0.66,1.47,1.47,1.47h1.41c0.82,0,1.47-0.66,1.47-1.47 l-0.01-4.57c0.06-0.32,0.25-0.47,0.35-0.47c0.18,0,0.38,0.18,0.38,0.47v4.57c0,0.82,0.66,1.47,1.47,1.47h1.41 c0.82,0,1.47-0.66,1.47-1.47v-0.38c0.96,1.29,2.46,2.06,4.06,2.06c0.74,0,1.46-0.16,2.12-0.47c0.24,0.17,0.54,0.26,0.84,0.26h1.39 c0.3,0,0.6-0.09,0.84-0.26v2.01c0,0.82,0.66,1.47,1.47,1.47h1.4c0.82,0,1.47-0.66,1.47-1.47v-1.77c0.48,0.15,0.99,0.23,1.49,0.22 c1.7,0,3.22-0.87,4.17-2.2v0.52c0,0.82,0.66,1.47,1.47,1.47h1.4c0.3,0,0.6-0.09,0.84-0.26c0.66,0.31,1.39,0.47,2.12,0.47 c1.92,0,3.6-1.1,4.49-2.73c1.54,2.65,4.95,3.53,7.58,1.98c0.18-0.11,0.36-0.22,0.53-0.36c0.22,0.55,0.76,0.91,1.35,0.9H78 c0.56,0,1.08-0.29,1.37-0.78l0.37-0.61l0.37,0.61c0.29,0.48,0.81,0.78,1.38,0.78h1.6c0.81,0,1.46-0.66,1.45-1.46 C84.49,14.02,84.44,13.8,84.34,13.59L84.34,13.59z M35.86,14.47h-1.41c-0.13,0-0.23-0.11-0.23-0.23V9.68 c0-0.98-0.74-1.71-1.62-1.71c-0.8,0-1.46,0.7-1.59,1.62l0.01,4.66c0,0.13-0.1,0.23-0.23,0.23h-1.41c-0.13,0-0.23-0.11-0.23-0.23 V9.68c0-0.98-0.74-1.71-1.62-1.71c-0.85,0-1.54,0.79-1.6,1.8v4.48c0,0.13-0.1,0.23-0.23,0.23h-1.4c-0.13,0-0.23-0.11-0.23-0.23 V6.74c0.01-0.13,0.11-0.22,0.23-0.22h1.4c0.13,0,0.22,0.11,0.23,0.22V7.4c0.5-0.68,1.3-1.09,2.16-1.1h0.03 c1.09,0,2.09,0.6,2.6,1.55c0.45-0.95,1.4-1.55,2.44-1.56c1.62,0,2.93,1.25,2.9,2.78l0.01,5.16C36.09,14.36,35.98,14.46,35.86,14.47 L35.86,14.47z M45.97,14.24c0,0.13-0.1,0.23-0.23,0.23h-1.4c-0.13,0-0.23-0.11-0.23-0.23V13.5c-0.7,0.76-1.69,1.18-2.72,1.18 c-2.17,0-3.94-1.87-3.94-4.19s1.77-4.19,3.94-4.19c1.03,0,2.02,0.43,2.73,1.18V6.74c0-0.13,0.1-0.23,0.23-0.23h1.4 c0.12-0.01,0.22,0.08,0.23,0.21c0,0.01,0,0.01,0,0.02v7.51h-0.01V14.24z M52.41,14.67c-1.03,0-2.02-0.43-2.73-1.18v3.97 c0,0.13-0.1,0.23-0.23,0.23h-1.4c-0.13,0-0.23-0.1-0.23-0.23V6.75c0-0.13,0.1-0.22,0.23-0.22h1.4c0.13,0,0.23,0.11,0.23,0.23v0.73 c0.71-0.76,1.7-1.18,2.73-1.18c2.17,0,3.94,1.86,3.94,4.18S54.58,14.67,52.41,14.67z M66.24,11.39c-0.39,1.87-1.96,3.29-3.84,3.29 c-1.03,0-2.02-0.43-2.73-1.18v0.73c0,0.13-0.1,0.23-0.23,0.23h-1.4c-0.13,0-0.23-0.11-0.23-0.23V3.51c0-0.13,0.1-0.23,0.23-0.23 h1.4c0.13,0,0.23,0.11,0.23,0.23v3.97c0.71-0.75,1.7-1.18,2.73-1.17c1.88,0,3.45,1.4,3.84,3.28C66.37,10.19,66.37,10.8,66.24,11.39 L66.24,11.39L66.24,11.39z M71.67,14.68c-2,0.01-3.73-1.35-4.17-3.3c-0.13-0.59-0.13-1.19,0-1.77c0.44-1.94,2.17-3.31,4.17-3.3 c2.36,0,4.26,1.87,4.26,4.19S74.03,14.68,71.67,14.68L71.67,14.68z M83.04,14.47h-1.61c-0.13,0-0.24-0.06-0.3-0.17l-1.44-2.39 l-1.44,2.39c-0.06,0.11-0.18,0.17-0.3,0.17h-1.61c-0.04,0-0.08-0.01-0.12-0.03c-0.09-0.06-0.13-0.19-0.06-0.28l0,0l2.43-3.68 L76.2,6.84c-0.02-0.03-0.03-0.07-0.03-0.12c0-0.12,0.09-0.21,0.21-0.21h1.61c0.13,0,0.24,0.06,0.3,0.17l1.41,2.36l1.41-2.36 c0.06-0.11,0.18-0.17,0.3-0.17h1.61c0.04,0,0.08,0.01,0.12,0.03c0.09,0.06,0.13,0.19,0.06,0.28l0,0l-2.38,3.64l2.43,3.67 c0.02,0.03,0.03,0.07,0.03,0.12C83.25,14.38,83.16,14.47,83.04,14.47L83.04,14.47L83.04,14.47z'/%3E %3Cpath class='st0' style='opacity:0.9; fill: %23FFFFFF; enable-background: new;' d='M10.5,1.24c-5.11,0-9.25,4.15-9.25,9.25s4.15,9.25,9.25,9.25s9.25-4.15,9.25-9.25 C19.75,5.38,15.61,1.24,10.5,1.24z M14.89,12.77c-1.93,1.93-4.78,2.31-6.7,2.31c-0.7,0-1.41-0.05-2.1-0.16c0,0-1.02-5.64,2.14-8.81 c0.83-0.83,1.95-1.28,3.13-1.28c1.27,0,2.49,0.51,3.39,1.42C16.59,8.09,16.64,11,14.89,12.77z'/%3E %3Cpath class='st1' style='opacity:0.35; enable-background:new;' d='M10.5-0.01C4.7-0.01,0,4.7,0,10.49s4.7,10.5,10.5,10.5S21,16.29,21,10.49C20.99,4.7,16.3-0.01,10.5-0.01z M10.5,19.74c-5.11,0-9.25-4.15-9.25-9.25s4.14-9.26,9.25-9.26s9.25,4.15,9.25,9.25C19.75,15.61,15.61,19.74,10.5,19.74z'/%3E %3Cpath class='st1' style='opacity:0.35; enable-background:new;' d='M14.74,6.25C12.9,4.41,9.98,4.35,8.23,6.1c-3.16,3.17-2.14,8.81-2.14,8.81s5.64,1.02,8.81-2.14 C16.64,11,16.59,8.09,14.74,6.25z M12.47,10.34l-0.91,1.87l-0.9-1.87L8.8,9.43l1.86-0.9l0.9-1.87l0.91,1.87l1.86,0.9L12.47,10.34z'/%3E %3Cpolygon class='st0' style='opacity:0.9; fill: %23FFFFFF; enable-background: new;' points='14.33,9.43 12.47,10.34 11.56,12.21 10.66,10.34 8.8,9.43 10.66,8.53 11.56,6.66 12.47,8.53 '/%3E%3C/g%3E%3C/svg%3E");
+}
+
+a.mapboxgl-ctrl-logo.mapboxgl-compact {
+    width: 21px;
+    height: 21px;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 21 21' style='enable-background:new 0 0 21 21;' xml:space='preserve'%3E%3Cg transform='translate(0,0.01)'%3E%3Cpath d='m 10.5,1.24 c -5.11,0 -9.25,4.15 -9.25,9.25 0,5.1 4.15,9.25 9.25,9.25 5.1,0 9.25,-4.15 9.25,-9.25 0,-5.11 -4.14,-9.25 -9.25,-9.25 z m 4.39,11.53 c -1.93,1.93 -4.78,2.31 -6.7,2.31 -0.7,0 -1.41,-0.05 -2.1,-0.16 0,0 -1.02,-5.64 2.14,-8.81 0.83,-0.83 1.95,-1.28 3.13,-1.28 1.27,0 2.49,0.51 3.39,1.42 1.84,1.84 1.89,4.75 0.14,6.52 z' style='opacity:0.9;fill:%23ffffff;enable-background:new' class='st0'/%3E%3Cpath d='M 10.5,-0.01 C 4.7,-0.01 0,4.7 0,10.49 c 0,5.79 4.7,10.5 10.5,10.5 5.8,0 10.5,-4.7 10.5,-10.5 C 20.99,4.7 16.3,-0.01 10.5,-0.01 Z m 0,19.75 c -5.11,0 -9.25,-4.15 -9.25,-9.25 0,-5.1 4.14,-9.26 9.25,-9.26 5.11,0 9.25,4.15 9.25,9.25 0,5.13 -4.14,9.26 -9.25,9.26 z' style='opacity:0.35;enable-background:new' class='st1'/%3E%3Cpath d='M 14.74,6.25 C 12.9,4.41 9.98,4.35 8.23,6.1 5.07,9.27 6.09,14.91 6.09,14.91 c 0,0 5.64,1.02 8.81,-2.14 C 16.64,11 16.59,8.09 14.74,6.25 Z m -2.27,4.09 -0.91,1.87 -0.9,-1.87 -1.86,-0.91 1.86,-0.9 0.9,-1.87 0.91,1.87 1.86,0.9 z' style='opacity:0.35;enable-background:new' class='st1'/%3E%3Cpolygon points='11.56,12.21 10.66,10.34 8.8,9.43 10.66,8.53 11.56,6.66 12.47,8.53 14.33,9.43 12.47,10.34 ' style='opacity:0.9;fill:%23ffffff;enable-background:new' class='st0'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
+    padding: 0 5px;
+    background-color: rgba(255, 255, 255, 0.5);
+    margin: 0;
+}
+
+@media screen {
+    .mapboxgl-ctrl-attrib.mapboxgl-compact {
+        min-height: 20px;
+        padding: 0;
+        margin: 10px;
+        position: relative;
+        background-color: #fff;
+        border-radius: 3px 12px 12px 3px;
+    }
+
+    .mapboxgl-ctrl-attrib.mapboxgl-compact:hover {
+        padding: 2px 24px 2px 4px;
+        visibility: visible;
+        margin-top: 6px;
+    }
+
+    .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact:hover,
+    .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact:hover {
+        padding: 2px 4px 2px 24px;
+        border-radius: 12px 3px 3px 12px;
+    }
+
+    .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner {
+        display: none;
+    }
+
+    .mapboxgl-ctrl-attrib.mapboxgl-compact:hover .mapboxgl-ctrl-attrib-inner {
+        display: block;
+    }
+
+    .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+        content: '';
+        cursor: pointer;
+        position: absolute;
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='%23333333' fill-rule='evenodd' d='M4,10a6,6 0 1,0 12,0a6,6 0 1,0 -12,0 M9,7a1,1 0 1,0 2,0a1,1 0 1,0 -2,0 M9,10a1,1 0 1,1 2,0l0,3a1,1 0 1,1 -2,0'/%3E %3C/svg%3E");
+        background-color: rgba(255, 255, 255, 0.5);
+        width: 24px;
+        height: 24px;
+        box-sizing: border-box;
+        border-radius: 12px;
+    }
+
+    .mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+        bottom: 0;
+        right: 0;
+    }
+
+    .mapboxgl-ctrl-top-right > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+        top: 0;
+        right: 0;
+    }
+
+    .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+        top: 0;
+        left: 0;
+    }
+
+    .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+        bottom: 0;
+        left: 0;
+    }
+}
+
+.mapboxgl-ctrl-attrib a {
+    color: rgba(0, 0, 0, 0.75);
+    text-decoration: none;
+}
+
+.mapboxgl-ctrl-attrib a:hover {
+    color: inherit;
+    text-decoration: underline;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.mapboxgl-ctrl-attrib .mapbox-improve-map {
+    font-weight: bold;
+    margin-left: 2px;
+}
+
+.mapboxgl-attrib-empty {
+    display: none;
+}
+
+.mapboxgl-ctrl-scale {
+    background-color: rgba(255, 255, 255, 0.75);
+    font-size: 10px;
+    border-width: medium 2px 2px;
+    border-style: none solid solid;
+    border-color: #333;
+    padding: 0 5px;
+    color: #333;
+    box-sizing: border-box;
+}
+
+.mapboxgl-popup {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: -webkit-flex;
+    display: flex;
+    will-change: transform;
+    pointer-events: none;
+}
+
+.mapboxgl-popup-anchor-top,
+.mapboxgl-popup-anchor-top-left,
+.mapboxgl-popup-anchor-top-right {
+    -webkit-flex-direction: column;
+    flex-direction: column;
+}
+
+.mapboxgl-popup-anchor-bottom,
+.mapboxgl-popup-anchor-bottom-left,
+.mapboxgl-popup-anchor-bottom-right {
+    -webkit-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+}
+
+.mapboxgl-popup-anchor-left {
+    -webkit-flex-direction: row;
+    flex-direction: row;
+}
+
+.mapboxgl-popup-anchor-right {
+    -webkit-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+}
+
+.mapboxgl-popup-tip {
+    width: 0;
+    height: 0;
+    border: 10px solid transparent;
+    z-index: 1;
+}
+
+.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
+    -webkit-align-self: center;
+    align-self: center;
+    border-top: none;
+    border-bottom-color: #fff;
+}
+
+.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
+    -webkit-align-self: flex-start;
+    align-self: flex-start;
+    border-top: none;
+    border-left: none;
+    border-bottom-color: #fff;
+}
+
+.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
+    -webkit-align-self: flex-end;
+    align-self: flex-end;
+    border-top: none;
+    border-right: none;
+    border-bottom-color: #fff;
+}
+
+.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
+    -webkit-align-self: center;
+    align-self: center;
+    border-bottom: none;
+    border-top-color: #fff;
+}
+
+.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
+    -webkit-align-self: flex-start;
+    align-self: flex-start;
+    border-bottom: none;
+    border-left: none;
+    border-top-color: #fff;
+}
+
+.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
+    -webkit-align-self: flex-end;
+    align-self: flex-end;
+    border-bottom: none;
+    border-right: none;
+    border-top-color: #fff;
+}
+
+.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
+    -webkit-align-self: center;
+    align-self: center;
+    border-left: none;
+    border-right-color: #fff;
+}
+
+.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
+    -webkit-align-self: center;
+    align-self: center;
+    border-right: none;
+    border-left-color: #fff;
+}
+
+.mapboxgl-popup-close-button {
+    position: absolute;
+    right: 0;
+    top: 0;
+    border: 0;
+    border-radius: 0 3px 0 0;
+    cursor: pointer;
+    background-color: transparent;
+}
+
+.mapboxgl-popup-close-button:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+.mapboxgl-popup-content {
+    position: relative;
+    background: #fff;
+    border-radius: 3px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    padding: 10px 10px 15px;
+    pointer-events: auto;
+}
+
+.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content {
+    border-top-left-radius: 0;
+}
+
+.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content {
+    border-top-right-radius: 0;
+}
+
+.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content {
+    border-bottom-left-radius: 0;
+}
+
+.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content {
+    border-bottom-right-radius: 0;
+}
+
+.mapboxgl-popup-track-pointer {
+    display: none;
+}
+
+.mapboxgl-popup-track-pointer * {
+    pointer-events: none;
+    user-select: none;
+}
+
+.mapboxgl-map:hover .mapboxgl-popup-track-pointer {
+    display: flex;
+}
+
+.mapboxgl-map:active .mapboxgl-popup-track-pointer {
+    display: none;
+}
+
+.mapboxgl-marker {
+    position: absolute;
+    top: 0;
+    left: 0;
+    will-change: transform;
+}
+
+.mapboxgl-user-location-dot {
+    background-color: #1da1f2;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+}
+
+.mapboxgl-user-location-dot::before {
+    background-color: #1da1f2;
+    content: '';
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    position: absolute;
+    -webkit-animation: mapboxgl-user-location-dot-pulse 2s infinite;
+    -moz-animation: mapboxgl-user-location-dot-pulse 2s infinite;
+    -ms-animation: mapboxgl-user-location-dot-pulse 2s infinite;
+    animation: mapboxgl-user-location-dot-pulse 2s infinite;
+}
+
+.mapboxgl-user-location-dot::after {
+    border-radius: 50%;
+    border: 2px solid #fff;
+    content: '';
+    height: 19px;
+    left: -2px;
+    position: absolute;
+    top: -2px;
+    width: 19px;
+    box-sizing: border-box;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
+}
+
+@-webkit-keyframes mapboxgl-user-location-dot-pulse {
+    0%   { -webkit-transform: scale(1); opacity: 1; }
+    70%  { -webkit-transform: scale(3); opacity: 0; }
+    100% { -webkit-transform: scale(1); opacity: 0; }
+}
+
+@-ms-keyframes mapboxgl-user-location-dot-pulse {
+    0%   { -ms-transform: scale(1); opacity: 1; }
+    70%  { -ms-transform: scale(3); opacity: 0; }
+    100% { -ms-transform: scale(1); opacity: 0; }
+}
+
+@keyframes mapboxgl-user-location-dot-pulse {
+    0%   { transform: scale(1); opacity: 1; }
+    70%  { transform: scale(3); opacity: 0; }
+    100% { transform: scale(1); opacity: 0; }
+}
+
+.mapboxgl-user-location-dot-stale {
+    background-color: #aaa;
+}
+
+.mapboxgl-user-location-dot-stale::after {
+    display: none;
+}
+
+.mapboxgl-crosshair,
+.mapboxgl-crosshair .mapboxgl-interactive,
+.mapboxgl-crosshair .mapboxgl-interactive:active {
+    cursor: crosshair;
+}
+
+.mapboxgl-boxzoom {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    background: #fff;
+    border: 2px dotted #202020;
+    opacity: 0.5;
+}
+
+@media print {
+    /* stylelint-disable-next-line selector-class-pattern */
+    .mapbox-improve-map {
+        display: none;
+    }
+}
\ No newline at end of file