hy-data-map-sdk

HY-SDK

🇨🇳 中文

hy-data-map-sdk 是基于开源项目 Cesium 进行二次开发的二三维一体的 WebGis 应用框架，该框架优化了部分 Cesium 的使用方式和增添一些通用功能，旨在为开发者快速构建 WebGis 应用。

Tips：本框架是 JS+GIS 的框架包。开发者需要有一定的前端技术和 GIS 相关技术

安装

NPM / YARN (推荐使用)

NPM / YARN 的方式安装，它能更好地和 webpack 打包工具配合使用。

yarn add hy-data-map-sdk
-------------------------
npm install hy-data-map-sdk

import HY from 'hy-data-map-sdk/dist/hy.base.min' //基础包
import HyCore from 'hy-data-map-sdk/dist/hy.core.min' //核心包
import HyChart from 'hy-data-map-sdk/dist/hy.chart.min' //chart包
import HyMapv from 'hy-data-map-sdk/dist/hy.mapv.min' //mapv包
import 'hy-data-map-sdk/dist/hy.core.min.css' // 主要样式

请将 resources 放置工程根目录 libs/hy-sdk 下，如果放置到其他目录下，框架将无法正常运行

配置

配置主要用于 NPM / YARN 的方式

由于 HY 框架中将 CESIUM_BASE_URL 设置为 ./libs/hy-sdk/resources/ ，这样需将 Cesium 相关的静态资源文件: Assets 、Workers 、ThirdParty 复制到工程的 libs/hy-sdk/resources 目录下以保证三维场景能够正常呈现,也可通过 HY.baseUrl 进行 Cesium 相关的静态资源路基设置

Webpack

[工程模板]

// webpack.config.js

const path = require('path')
const CopywebpackPlugin = require('copy-webpack-plugin')
const hyMapDist = './node_modules/hy-data-map-sdk'

module.exports = {
  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.join(hyMapDist, '/dist/resources'),
        to: 'libs/hy-sdk/resources',
      },
    ]),
  ],
}

Vue2.x

[工程模板]

// vue.config.js

const path = require('path')
const CopywebpackPlugin = require('copy-webpack-plugin')
const hyMapDist = './node_modules/hy-data-map-sdk'

module.exports = {
  // 其他配置
  chainWebpack: (config) => {
    config.plugin('copy').use(CopywebpackPlugin, [
      [
        {
          from: path.join(hyMapDist, '/dist/resources'),
          to: 'libs/hy-sdk/resources',
        },
      ],
    ])
  },
}

Vue3.x

[工程模板]

// vue.config.js

const path = require('path')
const CopywebpackPlugin = require('copy-webpack-plugin')
const hyMapDist = './node_modules/hy-data-map-sdk'

module.exports = {
  // 其他配置
  chainWebpack: (config) => {
    config.plugin('copy').use(CopywebpackPlugin, [
      {
        patterns: [
          {
            from: path.join(hyMapDist, '/dist/resources'),
            to: path.join(__dirname, 'dist', 'libs/hy-sdk/resources'),
          },
        ],
      },
    ])
  },
}

开始

global.HY = HY
HY.use(HyCore) // Node 方式
HY.ready(() => {
  let viewer = new HY.Viewer(divId) // divId 为一个div节点的Id属性值，如果不传入，会无法初始化3D场景
})

谢谢