Vue2-腾讯地图--矢量图形

腾讯地图–矢量图形

前期准备工作在腾讯地图–地图展示 一文中即可查看
主要是路线的显示,内有两种方式。

1. 折线
2. 折线自定义(主要是箭头的处理)

<template>
  <div class="container">
    <el-button type="primary" @click="line">折线</el-button>
    <el-button type="primary" @click="lines">折线自定义(主要是箭头的处理)</el-button>
    <!-- 地图容器 -->
    <div id="map-multipoly"></div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            map:null
        }
    },
    mounted(){
        this.initMap()
    },
    methods:{
        //地图初始化
        initMap() {
            //定义地图中心点坐标
            var center = new window.TMap.LatLng(39.984120, 116.307484)
            //定义map变量，调用 TMap.Map() 构造函数创建地图
            this.map = new window.TMap.Map(document.getElementById('map-multipoly'), {
                center: center,//设置地图中心点坐标
                zoom: 12,   //设置地图缩放级别
                pitch: 43.5,  //设置俯仰角
                rotation: 45    //设置地图旋转角度
            });
        },
        // 折线
        line(){
            //初始化折线，指定折线绘制到id为map的地图上
            new window.TMap.MultiPolyline({
                map: this.map, //指定绘制到的地图id
                geometries: [{ //设置折线的数据
                    paths: [new window.TMap.LatLng(39.994104, 116.287503), 
                            new window.TMap.LatLng(39.954104, 116.357503), 
                            new window.TMap.LatLng(39.916527, 116.397128)
                        ]
                }]
            });
        },
        // 折线自定义
        lines(){
            new window.TMap.MultiPolyline({
                id: 'polyline',  // 设置图层唯一id
                map: this.map,
                // 自定义样式
                styles:{
                    'styleLine1': new window.TMap.PolylineStyle({
                        color: '#3777FF', //线填充色
                        width: 6, //折线宽度
                        borderWidth: 5, //边线宽度
                        borderColor: '#FFF', //边线颜色
                        lineCap: 'butt', //线端头方式
                        showArrow: true,  // 显示箭头
                        arrowOptions:{
                            width: 6,
                            height: 10,
                            space: 20,
                        }
                    }),
                    //第二组样式
                    'styleLine2': new window.TMap.PolylineStyle({
                        color: '#CC0000', 
                        width: 6, 
                        borderWidth: 5, 
                        borderColor: '#CCC', 
                        lineCap: 'square',
                        showArrow: true,  // 显示箭头
                        arrowOptions:{
                            width: 6,
                            height: 10,
                            space: 20,
                        }
                    })
                },
                // 设置折线的数据，并配置不同的样式
                geometries:[
                    {   // 看的清楚一些
                        id: '1',
                        styleId: 'styleLine2',
                        paths: [new window.TMap.LatLng(39.994104, 116.287503), 
                            new window.TMap.LatLng(39.954104, 116.357503), 
                            new window.TMap.LatLng(39.916527, 116.397128)
                        ]
                    },
                    {   // 官网示例数据，
                        id: '2',	
                        styleId: 'styleLine1', //绑定样式id,对应上面第二组样式
                        paths: [new window.TMap.LatLng(40.039492,116.271893),
                            new window.TMap.LatLng(40.041562,116.271421), 
                            new window.TMap.LatLng(40.041957,116.274211)
                        ]
                    }
                ]
            })
        }
    }
}
</script>

<style>

</style>

3. 运行展示