drawEvent

src/main/map/src/views/Heat3D.vue

@@ -5,13 +5,17 @@
 </template>
 <script>
 import { mapState } from 'vuex';
-import axios from 'axios';
-
 export default {
     name: '',
     data() {
         return {
             heatData: [],
+            center: {
+                lat: '',
+                lng: '',
+            },
+            map: null,
+            heat: null,
         };
     },
     computed: {
@@ -23,11 +27,16 @@ export default {
         });
     },
     methods: {
-        draw(list) {
-            if (window.ReactNativeWebView) {
-                window.ReactNativeWebView.postMessage(JSON.stringify(list));
+        draw(list, center) {
+            this.heatData = list;
+            if (center) {
+                this.center = center;
+            }
+            if (!this.map) {
+                this.initMap();
+            } else {
+                this.heat.setData(this.heatData);
             }
-            this.initMap();
         },
         getData() {
             axios.get('http://dingdong.izouma.com/merchant/heatMap', {
@@ -36,54 +45,21 @@ export default {
             });
         },
         initMap() {
-            var heatAddBtn = document.getElementById('heatAddBtn');
-            var heatDecBtn = document.getElementById('heatDecBtn');
-            var setStyleBtn = document.getElementById('setStyleBtn');
-
             //初始化地图
-            var map = new TMap.Map('container', {
+            this.map = new TMap.Map('container', {
                 zoom: 12, //设置地图缩放级别
                 pitch: 45, // 设置地图俯仰角
-                center: new TMap.LatLng(39.909897147274364, 116.39756310116866), //设置地图中心点坐标
-                mapStyleId: 'style1', //个性化样式
+                center: new TMap.LatLng(this.center.lat, this.center.lng), //设置地图中心点坐标
             });
             //初始化热力图并添加至map图层
-            var heat = new TMap.visualization.Heat({
+            this.heat = new TMap.visualization.Heat({
                 max: 180, // 热力最强阈值
                 min: 0, // 热力最弱阈值
                 height: 40, // 峰值高度
                 radius: 30, // 最大辐射半径
             })
-                .addTo(map)
+                .addTo(this.map)
                 .setData(this.heatData); //设置数据
-
-            heatAddBtn.addEventListener(
-                'click',
-                () => {
-                    var radius = heat.getRadius() + 5;
-                    heat.setRadius(radius);
-                },
-                false,
-            );
-
-            heatDecBtn.addEventListener(
-                'click',
-                () => {
-                    var radius = heat.getRadius() - 5;
-                    if (radius > 0) {
-                        heat.setRadius(radius);
-                    }
-                },
-                false,
-            );
-
-            setStyleBtn.addEventListener('click', () => {
-                heat.setGradientColor({
-                    0.6: '#673198',
-                    0.8: '#e53390',
-                    0.9: '#ffc95a',
-                });
-            });
         },
         sendMessage() {
             if (window.ReactNativeWebView) {