天地图学习·a

天地图：{

地图安装插件：

npm install vue-tianditu

and

yarn add vue-tianditu

main文件配置（

import VueTianditu from 'vue-tianditu'

Vue.use(VueTianditu, { v: '4.0',

tk: 'd17e8d73eb49a54b72c039ff6a868956',

plugins: ['CarTrack']`

})

)

页面文件：进行页面搭建

（

天地图标签使用：

<tdt-map/> "地图主标签标点，小车轨迹等等再此标签内使用"

<tdt-cartarck/>"此标签为车辆"

<tdt-search/>"此标签为天地图自带的地点搜索栏"

<tdt-mousetool>"此标签为地图工具"

<tdt-circle>"此标签是工具的画圆工具"

<tdt-marker>"此标签为工具的标点工具"

<tdt-polyline>"此标签为线路标签"

"以上的标签除搜索栏之外，在天地图上操作都为数据驱动，由经纬度来控制。标点、线路、画圆、车辆等等用到的经纬度变量必须是唯一变量"

除天地图以外div等等的使用：

除天地图固用标签以外，按钮弹框等等都在<tdt-map/>标签以外才能使用且使用是需要控制z-index图层

否则将会被地图覆盖，还有位置div所需要进行position: absolute控制位置

）

}

实现标点获取经纬度，保存线路点进行后台进行存储线路，拿到历史记录标点进行历史线路恢复

拿到经纬度进行车辆轨迹路线移动

 在webSocket连接成功的情况下

实时的车行路线，使用 setInterval 调取数据实时的线路描述，进行数据记录

 <!-- 小车已行驶的路线 -->
      <tdt-polyline v-for="(item, index) in PathList"
                    :key="index + 'PathList'"
                    :path="item.carPath"
                    :edit="false"
                    :weight="5"
                    color="#4185FC"
                    :opacity="1"></tdt-polyline>

具体操作根据返回过来的数据进行转化成为我们能够使用的数据数组包数组 PathList:[

[123,123],[123,124],[125,125]

]

后台获取报警经纬度，进行报警点报警，

 <!-- 报警区域画圆 -->
      <tdt-circle :center="item"
                  v-for="(item, index) in Point"
                  :key="index + 'labels'"
                  :weight="0"
                  :radius="500"
                  :edit="edit"                 
                  :fillOpacity="opacity"></tdt-circle>

 //   6/9

<template>
  <div class="mapDiv">
    <tdt-map :center="center" :zoom="zoom" @click="mapClick">
      <!-- 标点 -->
      <tdt-marker
        v-for="(item, index) in pointList"
        :key="index"
        :position="item"
        @click="Click"
      ></tdt-marker>
      <!-- 线路 -->
      <tdt-polyline
        :path="path"
        :edit="edit"
        color="pink"
        :opacity="1"
      ></tdt-polyline>
      <!-- 小车 -->
      <tdt-cartrack
        v-for="(item, index) in CarList"
        :key="index + item"
        :Datas="item"
        :interval="100"
        :speed="10"
        dynamicLine="true "
        startOnInit="true"
      ></tdt-cartrack>
    </tdt-map>
  </div>
</template>

export default {
  //   name: "ex-map",
  //   name: "ex-marker",
  //   name: "ex-cartrack",
  data() {
    return {
      center: [113.280637, 23.125178],
      zoom: 11,
      edit: false,
      pointList: [[113.280637, 23.125178]],
      path: [[113.280637, 23.125178]],
      tracks: [],
      CarList: [
        [113.280637, 23.125178],
        [113.280637, 23.125178],
      ],
      //   carstyle: { display: true,  width: 52, height: 26 },
    };
  },
  methods: {
    mapClick(e) {
      console.log(e.lnglat);
      this.pointList.push([e.lnglat.lng, e.lnglat.lat]);
      this.path.push([e.lnglat.lng, e.lnglat.lat]);
      this.CarList.push([e.lnglat.lng, e.lnglat.lat]);
      console.log(this.pointList);
    },
    Click() {
      console.log(this.marker1);
    },
  },
};
</script>

之前学习的没有完善现在来完善一下；

根据代码标点、路线、小车轨迹、通过map的点击事件拿到经纬度，进行push到数组for循环拿到我们想要的数据进行赋值。实现一个连续标点连续画线