npm package: @narutogis/map3d-chart
Description: The SDK is based on Cesium for secondary development of 2, 3D all-in-one WebGis application framework, the framework optimizes the use of Cesium and add some additional features, designed for developers to quickly build WebGis applications.
Author: narutogis
Latest version: 1.0.3

# Map3D-SDK

<p>
<img src="https://img.shields.io/github/workflow/status/narutogis/map3d-sdk/build"/>
<img src="https://img.shields.io/badge/license-Apache%202-blue"/>
<a href="https://www.npmjs.com/package/@narutogis/map3d-sdk" target="_blank">
 <img src="https://img.shields.io/npm/v/@narutogis/map3d-sdk?color=orange&logo=npm" />
</a>
<a href="https://www.npmjs.com/package/@narutogis/map3d-sdk" target="_blank">
 <img src="https://img.shields.io/npm/dt/@narutogis/map3d-sdk?logo=npm"/>
</a>
<a href="https://www.narutogis.com/map3d-docs/v1.x" target="_blank">
 <img src="https://img.shields.io/badge/docs-online-yellow.svg"/>
</a>
<a href="http://www.narutogis.com" target="_blank">
 <img src="https://img.shields.io/badge/demo-online-red.svg"/>
</a>
</p>

**_`Map3D-SDK`_** is based on the open source project **_`Cesium`_** for the second development of two three-dimensional **_`WebGis`_** application framework , the framework optimizes the use of **_`Cesium`_** and adds some additional features , designed for developers to quickly build **_`WebGis`_** application.

```warning
Tips：This SDK is JS+GIS framework package. Developers need to have some front-end technology and GIS related technology
```

## Installation

`NPM / YARN` **_`(Recommend)`_**

Installing with NPM or YARN is recommended and it works seamlessly with webpack.

```shell
yarn add @narutogis/map3d-sdk
-------------------------
npm install @narutogis/map3d-sdk
```

```js
import Map3D from '@narutogis/map3d-sdk/dist/map3d.base.min'
import DcCore from '@narutogis/map3d-sdk/dist/map3d.core.min'
import DcChart from '@narutogis/map3d-sdk/dist/map3d.chart.min'
import DcMapv from '@narutogis/map3d-sdk/dist/map3d.mapv.min'
import '@narutogis/map3d-sdk/dist/map3d.core.min.css'
```

`NPM / YARN` **_`(On-demand)`_**

```shell
yarn add @narutogis/map3d-base
yarn add @narutogis/map3d-core
yarn add @narutogis/map3d-chart
yarn add @narutogis/map3d-mapv
-------------------------
npm install @narutogis/map3d-base
npm install @narutogis/map3d-core
npm install @narutogis/map3d-chart
npm install @narutogis/map3d-mapv
```

```js
import Map3D from '@narutogis/map3d-base'
import DcCore from '@narutogis/map3d-core'
import DcChart from '@narutogis/map3d-chart'
import DcMapv from '@narutogis/map3d-mapv'
import '@narutogis/map3d-core/dist/map3d.core.min.css'
```

`CDN`

[Resources](https://github.com/narutogis/map3d-sdk/releases)

```html
<script src="https://cdn.jsdelivr.net/npm/@narutogis/map3d-sdk/dist/map3d.base.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@narutogis/map3d-sdk/dist/map3d.core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@narutogis/map3d-sdk/dist/map3d.chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@narutogis/map3d-sdk/dist/map3d.mapv.min.js"></script>
<link
  href="https://cdn.jsdelivr.net/npm/@narutogis/map3d-sdk/dist/map3d.core.min.css"
  rel="stylesheet"
  type="text/css"
/>
```

```
Please put the resources in the project root directory libs/map3d-sdk, if you put it in other directory, the framework will not run properly.
```

## Configuration

> The configuration is mainly used in the `NPM / YARN` way

Since the Map3D framework sets `CESIUM_BASE_URL` to `JSON.stringify('. /libs/map3d-sdk/resources/')`, you need to copy `Cesium` static resource files: `Assets`, `Workers`, `ThirdParty` to the `libs/map3d-sdk/resources` directory of the project to ensure that the 3D scene can be rendered properly.

`Webpack`

[Project Template](https://github.com/cavencj/map3d-vue-app)

```js
// webpack.config.js
const path = require('path')
const CopywebpackPlugin = require('copy-webpack-plugin')
const dvgisDist = './node_modules/@narutogis'

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

`Vue2.x`

[Project Template](https://github.com/narutogis/map3d-vue)

```js
// vue.config.js
const path = require('path')
const CopywebpackPlugin = require('copy-webpack-plugin')
const dvgisDist = './node_modules/@narutogis'
module.exports = {
  chainWebpack: (config) => {
    config.plugin('copy').use(CopywebpackPlugin, [
      [
        {
          from: path.join(dvgisDist, 'map3d-sdk/dist/resources'),
          to: 'libs/map3d-sdk/resources',
        },
      ],
    ])
  },
}
```

`Vue3.x`

[Project Template](https://github.com/narutogis/map3d-vue-next)

```js
// vue.config.js
const path = require('path')
const CopywebpackPlugin = require('copy-webpack-plugin')
const dvgisDist = './node_modules/@narutogis'
module.exports = {
  chainWebpack: (config) => {
    config.plugin('copy').use(CopywebpackPlugin, [
      {
        patterns: [
          {
            from: path.join(dvgisDist, 'map3d-sdk/dist/resources'),
            to: path.join(__dirname, 'dist', 'libs/map3d-sdk/resources'),
          },
        ],
      },
    ])
  },
}
```


## Start

```js
global.Map3D = Map3D
Map3D.use(DcCore) // node
Map3D.ready(() => {
  let viewer = new Map3D.Viewer(divId) // divId is the Id attribute value of a div node. If it is not passed in, the 3D scene cannot be initialized
})
```

## Demo

|  ![picture](http://www.narutogis.com/examples/images/baselayer/baidu.png?v=3) | ![picture](http://www.narutogis.com/examples/images/baselayer/tdt.png?v=2) | ![picture](http://www.narutogis.com/examples/images/baselayer/arcgis.png?v=3) | ![picture](http://www.narutogis.com/examples/images/mini-scene/china.gif) |
|  :-----------------------------------------------------------: | :-----------------------------------------------------------: | :------------------------------------------------------------------: | :--------------------------------------------------------------: |
|  ![picture](http://www.narutogis.com/examples/images/mini-scene/dfmz.gif) | ![picture](http://www.narutogis.com/examples/images/mini-scene/factory.gif?v=1) | ![picture](http://www.narutogis.com/examples/images/layer/cluster_circle.gif) | ![picture](http://www.narutogis.com/examples/images/model/shp_custom_shader.gif) |
|  ![picture](http://www.narutogis.com/examples/images/overlay/polyline_image_trail.gif) | ![picture](http://www.narutogis.com/examples/images/overlay/wall_trail.gif?v=1) | ![picture](http://www.narutogis.com/examples/images/overlay/water.gif?v=2)  |  ![picture](http://www.narutogis.com/examples/images/overlay/plot-overlay.png?v=3)   |

[More>>](http://www.narutogis.com/#/examples)