快速使用 QEarth

如果使用 Vue-QEarth 不能解决您所遇到的问题，那么请使用 QEarth 辅助开发。

---

注意

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

安装

切换 Npm 镜像地址

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

注意

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

Npm

npm install @qycloud/qearth --save

Yarn

yarn add @qycloud/qearth

使用

使用 QEarth 中材质文件辅助组件 qe-polygon 绘制流动箭头线。

---

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

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

export default {
	components: {
		QeViewer,
		QeEntityLayer,
		QePolyline
	},
	data() {
		return {
			viewer: null,
			defaultView: [
				118.7863,
				31.9087,
				801.6425,
				1.724684714172732,
				-53.783141852231246,
				0.008819224020548466
			],
			corridorPath: [
				[118.78653636, 31.91315607, -0.14395184],
				[118.78717476, 31.91365014, 0.9309363],
				[118.78773082, 31.91401772, 0.65392468],
				[118.78792258, 31.91435828, 4.09293584]
			],
			bxStyles: {
				material: new PolylineImageTrailMaterialProperty({
					speed: 20,
					image: require("../../src/assets/dataImages/arrow_polyline.png"),
					repeat: { x: 40, y: 1 }
				}),
				clampToGround: true,
				width: 20
			}
		};
	},
	methods: {
		getViewer(viewer) {
			this.viewer = viewer;
		}
	}
};
</script>