Vue Cesium 是一款好用的地图开发工具,对于初学者非常友好
官网地址: https://zouyaoji.top/vue-cesium/ cesium - 流动线学习【已封装成vue组件】代码效果
安装Cesium
1、需要进行安装
npm install vue-cesium --save
main.js全局注册
import VueCesium from 'vue-cesium';
Vue.use(VueCesium);
组件代码如下
<template>
<div class="viewer">
<vc-viewer @ready="ready">
<!-- 抛物线 -->
<template v-for="(item, index) in positionsParabola">
<vc-trail-polyline
:key="'parabola2' + index"
:positions="item"
color="yellow"
imageUrl="https://zouyaoji.top/vue-cesium/statics/SampleData/images/colors.png"
:width="2"
ref="parabola"
:clampToGround="true"
:loop="true"
></vc-trail-polyline>
</template>
<template v-for="(item, index) in points">
<vc-entity :position="item" :key="index">
<vc-graphics-point
:key="index"
:color="item.color"
:pixelSize="item.size"
:disableDepthTestDistance="Number.POSITIVE_INFINITY"
></vc-graphics-point>
</vc-entity>
</template>
<!-- 这里是地球样式区域,官方demo是高清版本,这个token后续需要注意一下 -->
<vc-layer-imagery>
<vc-provider-imagery-tianditu
mapStyle="img_c"
token="436ce7e50d27eede2f2929307e6b33c0"
></vc-provider-imagery-tianditu>
</vc-layer-imagery>
</vc-viewer>
</div>
</template>
<script>
export default {
props: {
// 节点数据
nodeInfo: {
required: true,
type: Array
}
},
data() {
return {
// node节点数据
points: [