快速上手

注意

请确保你的 Node.js 版本 >= 8。

安装

切换 Npm 镜像地址

nrm add qycloud https://open-npm.qpaas.com/
nrm use qycloud

注意

请确保你的 Npm 镜像地址已切换到公司地址。

Npm

npm install @qycloud/vue-qearth --save

Yarn

yarn add @qycloud/vue-qearth

配置说明

使用 Vue CLI 搭建的项目配置

直接在 vue.config.js 中添加以下配置：

---

const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const QEarthSource = "node_modules/@qycloud/vue-qearth/lib/static";

module.exports = {
	configureWebpack: () => {
		const plugins = [
			new webpack.DefinePlugin({
				CESIUM_BASE_URL: JSON.stringify("./static")
			}),
			// 可以根据具体的项目部署将资源打包复制到指定文件夹
			new CopyWebpackPlugin([
				{
					from: QEarthSource,
					to: "static"
				}
			])
		];
		return {
			plugins
		};
	}
};

使用

全局注册

<template>
	<div>
		<qe-viewer
			:imagery-type="'AMap'"
			:fullscreen-button="true"
			:default-view="defaultView"
			@ready="getViewer"
		></qe-viewer>
	</div>
</template>

<script>
import Vue2Qearth from "@qycloud/vue-qearth";
// css 实际的路径 '@qycloud/vue-qearth/lib/vue2qearth.css';一般全局引入就行;
import "vue2qearth/vue2qearth.css";
import Vue from "vue";
Vue.use(Vue2Qearth);

export default {
	data() {
		return {
			viewer: null,
			defaultView: [
				118.7863,
				31.9087,
				801.6425,
				1.724684714172732,
				-53.783141852231246,
				0.008819224020548466
			]
		};
	},
	methods: {
		getViewer(viewer) {
			this.viewer = viewer;
		}
	}
};
</script>

隐藏代码

<template>

<div style="height: 450px;">
<qe-viewer
:imagery-type="'AMap'"
:fullscreen-button="true"
:default-view="defaultView"
@ready="getViewer" ></qe-viewer>
</div>
</template>

<script>
import Vue2Qearth from "@qycloud/vue-qearth";
// css 实际的路径 '@qycloud/vue-qearth/lib/vue2qearth.css';一般全局引入就行;
import "vue2qearth/vue2qearth.css";
import Vue from "vue";
Vue.use(Vue2Qearth);

export default {
	data() {
		return {
			viewer: null,
			defaultView: [
				118.7863,
				31.9087,
				801.6425,
				1.724684714172732,
				-53.783141852231246,
				0.008819224020548466
			]
		};
	},
	methods: {
		getViewer(viewer) {
			this.viewer = viewer;
		}
	}
};
</script>

局部注册

<template>
	<div style="height: 450px;">
		<qe-viewer
			:imagery-type="'AMap'"
			:fullscreen-button="true"
			:default-view="defaultView"
			@ready="getViewer"
		></qe-viewer>
	</div>
</template>

<script>
import { QeViewer } from "@qycloud/vue-qearth";
// css 实际的路径 '@qycloud/vue-qearth/lib/vue2qearth.css';一般全局引入就行;
import "vue2qearth/vue2qearth.css";

export default {
	components: {
		QeViewer
	},
	data() {
		return {
			viewer: null,
			defaultView: [
				118.7863,
				31.9087,
				801.6425,
				1.724684714172732,
				-53.783141852231246,
				0.008819224020548466
			]
		};
	},
	methods: {
		getViewer(viewer) {
			this.viewer = viewer;
		}
	}
};
</script>

隐藏代码

<template>

<div style="height: 450px;">
<qe-viewer
:imagery-type="'AMap'"
:fullscreen-button="true"
:default-view="defaultView"
@ready="getViewer" ></qe-viewer>
</div>
</template>

<script>
import { QeViewer } from "@qycloud/vue-qearth";
// css 实际的路径 '@qycloud/vue-qearth/lib/vue2qearth.css';一般全局引入就行;
import "vue2qearth/vue2qearth.css";

export default {
	components: {
    QeViewer
  },
	data() {
		return {
			viewer: null,
			defaultView: [
				118.7863,
				31.9087,
				801.6425,
				1.724684714172732,
				-53.783141852231246,
				0.008819224020548466
			]
		};
	},
	methods: {
		getViewer(viewer) {
			this.viewer = viewer;
		}
	}
};
</script>