@space8/czm-plugin NPM

czm-plugin

介绍

czm-plugin是一款基于Cesium拓展开发的一套插件，致力于三维地理空间数据的渲染。专为前端开发者提供简单、高效的SDK，让开发者无需掌握复杂的计算机图形学和GIS基础便可完成GIS三维的相关功能开发，做到Write Less Do More。

安装教程

npm install @space8/czm-plugin

使用说明

useage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>czm-plugin示例</title>
    <style>
        html, body, #earth {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="earth"></div>
</body>
</html>

import {
    EarthV,
    TianDiTuLayer,
    TianDiTuType,
    ClockBoundary,
    EventHandler,
    MarkLayer,
    AnimationMarkLayer, ArcGISLayer, AnimationMarkLayer2, WMSLayer, PolygonLayer,
} from '@space8/czm-plugin';

/**
 * 初始化三维地球
 */
let earthV = new EarthV("earth");
/**
 * 添加天地图
 */
const tianDiTuLayer = new TianDiTuLayer({
  layerName: "tianditu",
  type: TianDiTuType.IMG_W
});
tianDiTuLayer.addTo(earthV);

webpack configuration

// The path to the czm-plugin
const czmPlugin = 'node_modules/@space8/czm-plugin/';
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

module.exports = {
    context: __dirname,
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: 'app.js',
        // path: path.resolve(__dirname, 'build'),
        path: path.resolve(__dirname, 'publish'),
        sourcePrefix: ''
    },
    amd: {
        // Enable webpack-friendly use of require in czm-plugin
        toUrlUndefined: true
    },
    resolve: {
        alias: {
            cesium: path.resolve(__dirname, "node_modules/cesium/Source")
        },
        mainFiles: ['index', 'Cesium']
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
            use: ['url-loader']
        }],
        unknownContextCritical: false,
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html',
            filename: "index.html"
        }),
        // Copy czm-plugin Assets, Widgets, and Workers to a static directory
        new CopyWebpackPlugin({
            patterns: [
                {from: path.join(czmPlugin, "build/Workers"), to: 'Workers'},
                {from: path.join(czmPlugin, "build/ThirdParty"), to: 'ThirdParty'},
                {from: path.join(czmPlugin, 'build/Assets'), to: 'Assets'},
                {from: path.join(czmPlugin, 'build/Widgets'), to: 'Widgets'}
            ]
        }),
        new webpack.DefinePlugin({
            CESIUM_BASE_URL: JSON.stringify('')
        }),
        new NodePolyfillPlugin(),
    ],
    mode: 'development',
    devtool: 'source-map',
    // development server options
    devServer: {
        static: {
            directory: path.join(__dirname, 'publish'),
        },
        port: 8080,
    }
};