@narutogis/map3d-base

Map3D-SDK

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.

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.

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

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)

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

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

<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

// 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

// 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

// 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

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

More>>