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,
}
};
参与贡献
1.贵仁科技GIS三维组