Vue 高德地圖-封裝地圖點線面方法並渲染地圖

 

這次絕絕子要放大招了 。。。

 

 

 地圖點線面默認效果：

 

 

想實現的效果：

功能一：點線面渲染數據

功能二：點、線段、面積 坐標及圖形顏色 跟左側圖例保持一致

功能三：選擇（右下）自定義樣式 改變地圖背景顏色（切換主題色）

 

 

 

 

 

 

后台返回數據格式如下：

 

 

 

 

 

實現功能一：

1.模擬數據代碼如下（將這段代碼直接放進項目 地圖上面點線面 模擬數據已寫好）

        // 初始化高德地圖
        initMap() {
          var map = new AMap.Map('oneMap', {
            center: [113.85, 34.03],
            zoom: 11
          });
          var markers = [];//多個點的對象
          var polylineGroups = [];//折線
          var polygono = [];//多邊形
          function xuanran(allyang) {
            var polylineo = {};//畫線
            var polygons = {};//畫多邊形
            var htmlsss = "";
            for (var i = 0; i < allyang.length; i++) {
              htmlsss += "<input name='amaps' id_group='" + allyang[i].id_group + "' lng='" + allyang[i].lng + "' lat='" + allyang[i].lat + "' value='" + allyang[i].t + "'>";
              switch (allyang[i].t) {
                case 'marker': {
                  console.log(markers)
                  markers[markers.length] = new AMap.Marker({
                    icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                    position: [Number(allyang[i].lng), Number(allyang[i].lat)]
                  });
                  break;
                }
                case 'polyline': {
                  if (!polylineo[allyang[i].id_group]) {
                    polylineo[allyang[i].id_group] = [];
                  }
                  polylineo[allyang[i].id_group][polylineo[allyang[i].id_group].length] = new AMap.LngLat(Number(allyang[i].lng), Number(allyang[i].lat));
                  break;
                }
                case 'polygon': {
                  if (!polygons[allyang[i].id_group]) {
                    polygons[allyang[i].id_group] = [];
                  }
                  polygons[allyang[i].id_group][polygons[allyang[i].id_group].length] = new AMap.LngLat(Number(allyang[i].lng), Number(allyang[i].lat));
                }
              }
            }
            document.getElementById("mapindexvalues").innerHTML += htmlsss
            //添加多個點
            map.add(markers);

            //添加多條線
            var polylines = [];
            for (var o in polylineo) {
              polylines.push(new AMap.Polyline({
                path: polylineo[o],
                strokeWeight: 5,
                strokeColor: '#ff0e18'

              }));
            }
            var polylineGroup = new AMap.OverlayGroup(polylines);
            map.add(polylineGroup);
            polylineGroups.push(polylineGroup);
            for (var o in polygons) {
              polygono[polygono.length] = new AMap.Polygon({
                path: polygons[o],
                strokeColor: '#0099ff',
                strokeWeight: 3,
                fillColor: '#00b5ff',
                fillOpacity: 0.3
              })
            }
            map.add(polygono);
            map.setFitView();
          }

          //模擬參數
          var allyang = [
            { id_group: 1, lng: 113.894752, lat: 34.808449, t: 'marker' },//點


            { id_group: 2, lng: 113.694752, lat: 34.608449, t: 'polyline' },//線
            { id_group: 2, lng: 113.594752, lat: 34.508449, t: 'polyline' },


            { id_group: 4, lng: 115.364752, lat: 34.368449, t: 'polygon' },//面
            { id_group: 4, lng: 113.464752, lat: 35.468449, t: 'polygon' },
            { id_group: 4, lng: 113.564752, lat: 34.568449, t: 'polygon' },
            { id_group: 4, lng: 115.564752, lat: 34.568449, t: 'polygon' },




          ]
          xuanran(allyang)
        },

 

2.前后端交互 （不要全部抄我的  對接數據 換成自己要對接的接口）

 

 

 

 

              // 渲染地圖
              var dtList = res.dat.dt;
              var polygon = [];
              dtList.forEach(e => { polygon.push({ id_group: e.id_group, lng: e.lng, lat: e.lat, t: e.t, tdyt: e.useing }) }); if (dtList == '') {
                _this.$message({
                  message: '暫無數據',
                  type: "warning"
                });
              }
              _this.initMap(polygon)

initMap（）函數如下：

        // 初始化高德地圖
        initMap(allyang) {

          var map = new AMap.Map('mapshow', {
            center: [113.85, 34.03],
            zoom: 11
          });

          var markers = [];//多個點的對象
          var polylineGroups = [];//折線
          var polygono = [];//多邊形


          var polylineo = {};//畫線
          var polygons = {};//畫多邊形
          var htmlsss = "";
          for (var i = 0; i < allyang.length; i++) {
            htmlsss += "<input name='amaps' id_group='" + allyang[i].id_group + "' lng='" + allyang[i].lng + "' lat='" + allyang[i].lat + "' value='" + allyang[i].t + "'>";
            switch (allyang[i].t) {
              case 'marker': {
                
                  markers[markers.length] = new AMap.Marker({
                    icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                    position: [Number(allyang[i].lng), Number(allyang[i].lat)]
                  });
              
                break;
              }
              case 'polyline': {
                if (!polylineo[allyang[i].id_group]) {
                  polylineo[allyang[i].id_group] = [];
                }
                polylineo[allyang[i].id_group][polylineo[allyang[i].id_group].length] = new AMap.LngLat(Number(allyang[i].lng), Number(allyang[i].lat));
                break;
              }
              case 'polygon': {
                if (!polygons[allyang[i].id_group]) {
                  polygons[allyang[i].id_group] = [];
                }
                polygons[allyang[i].id_group][polygons[allyang[i].id_group].length] = new AMap.LngLat(Number(allyang[i].lng), Number(allyang[i].lat));
              }
            }
          }

          document.getElementById("mapindexvalues").innerHTML += htmlsss

          //添加多個點
          map.add(markers);

          //添加多條線
          var polylines = [];
          for (var o in polylineo) {
            polylines.push(new AMap.Polyline({
              path: polylineo[o],
              strokeWeight: 5,
              strokeColor: '#ff0e18'
            }));
          }
          var polylineGroup = new AMap.OverlayGroup(polylines);
          map.add(polylineGroup);

          polylineGroups.push(polylineGroup);
          for (var o in polygons) {
            polygono[polygono.length] = new AMap.Polygon({
              path: polygons[o],
              strokeColor: '#0099ff',
              strokeWeight: 3,
              fillColor: '#00b5ff',
              fillOpacity: 0.3
            })
          }

          map.add(polygono);

          map.setFitView();

        },

實現功能二（與實現功能一的前后端交互數據里面稍作調整）

注意：橙色注釋 
（地圖點線面跟圖例保持一致 自己要動腦子根據接口寫判斷條件 我的圖例圖片images是本地的 就不上傳了）

        // 初始化高德地圖
        initMap(allyang) {

          var map = new AMap.Map('mapshow', {
            center: [113.85, 34.03],
            zoom: 11,
            resizeEnable: true, //是否監控地圖容器尺寸變化
            mapStyle: styleName
          });


          // //初始化地圖
          // var map = new AMap.Map('container', {
          //   resizeEnable: true, //是否監控地圖容器尺寸變化
          //   mapStyle: "amap://styles/whitesmoke"
          // });

          //綁定radio點擊事件
          var radios = document.querySelectorAll("#map-styles input");
          radios.forEach(function (ratio) {
            ratio.onclick = setMapStyle;
          });

          function setMapStyle() {
            styleName = "amap://styles/" + this.value;
            map.setMapStyle(styleName);
          }
          map.setMapStyle(styleName);




          var markers = [];//多個點的對象
          var polylineGroups = [];//折線
          var polygono = [];//多邊形


          var polylineo = {};//畫線
          var polygons = {};//畫多邊形
          var htmlsss = "";
          for (var i = 0; i < allyang.length; i++) {
            htmlsss += "<input name='amaps' id_group='" + allyang[i].id_group + "' lng='" + allyang[i].lng + "' lat='" + allyang[i].lat + "' value='" + allyang[i].t + "'>";
            switch (allyang[i].t) {
              case 'marker': {
                // 地圖點logo和圖例logo 一一對應
                var tdytIcon = '';  // 土地用途logo
                if (allyang[i].t == "marker" && allyang[i].tdyt == 5) {
                  tdytIcon = "./images/tl-01.png"
                } else if (allyang[i].t == "marker" && allyang[i].tdyt == 6) {
                  tdytIcon = "./images/tl-02.png"
                } else if (allyang[i].t == "marker" && allyang[i].tdyt == 7) {
                  tdytIcon = "./images/tl-03.png"
                } else if (allyang[i].t == "marker" && allyang[i].tdyt == 8) {
                  tdytIcon = "./images/tl-04.png"
                } else if (allyang[i].t == "marker" && allyang[i].tdyt == 9) {
                  tdytIcon = "./images/tl-05.png"
                } else if (allyang[i].t == "marker" && allyang[i].tdyt == 10) {
                  tdytIcon = "./images/tl-06.png"
                } else if (allyang[i].t == "marker" && allyang[i].tdyt == 11) {
                  tdytIcon = "./images/tl-07.png"
                } else if (allyang[i].t == "marker" && allyang[i].tdyt == 12) {
                  tdytIcon = "./images/tl-08.png"
                } else {
                  markers[markers.length] = new AMap.Marker({
                    icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                    position: [Number(allyang[i].lng), Number(allyang[i].lat)]
                  });
                }

                markers[markers.length] = new AMap.Marker({
                  icon: tdytIcon,
                  position: [Number(allyang[i].lng), Number(allyang[i].lat)]
                });

                break;
              }
              case 'polyline': {
                if (!polylineo[allyang[i].id_group]) {
                  polylineo[allyang[i].id_group] = [];
                }
                polylineo[allyang[i].id_group][polylineo[allyang[i].id_group].length] = new AMap.LngLat(Number(allyang[i].lng), Number(allyang[i].lat));
                break;
              }
              case 'polygon': {
                if (!polygons[allyang[i].id_group]) {
                  polygons[allyang[i].id_group] = [];
                }
                polygons[allyang[i].id_group][polygons[allyang[i].id_group].length] = new AMap.LngLat(Number(allyang[i].lng), Number(allyang[i].lat));
              }
            }
          }

          // document.getElementById("mapindexvalues").innerHTML += htmlsss
          console.log(document.getElementById("mapshow").innerHTML)


          // document.getElementById("mapshow").innerHTML += htmlsss

          //添加多個點
          map.add(markers);

          //添加多條線
          var polylines = [];
          for (var o in polylineo) {

            // polylines線顏色 和圖例一一對應
            var polylineColors = '';
            for (var i = 0; i < allyang.length; i++) {
              if (allyang[i].t == 'polyline' && allyang[i].tdyt == 5) {
                polylineColors = "#fea320"
              } else if (allyang[i].t == 'polyline' && allyang[i].tdyt == 6) {
                polylineColors = "#c759df"
              } else if (allyang[i].t == 'polyline' && allyang[i].tdyt == 7) {
                polylineColors = "#65d25a"
              } else if (allyang[i].t == 'polyline' && allyang[i].tdyt == 8) {
                polylineColors = "#f21b34"
              } else if (allyang[i].t == 'polyline' && allyang[i].tdyt == 9) {
                polylineColors = "#fa24ac"
              } else if (allyang[i].t == 'polyline' && allyang[i].tdyt == 10) {
                polylineColors = "#76a200"
              } else if (allyang[i].t == 'polyline' && allyang[i].tdyt == 11) {
                polylineColors = "#56a3fb"
              } else if (allyang[i].t == 'polyline' && allyang[i].tdyt == 12) {
                polylineColors = "#a25e35"
              }
            }

            polylines.push(new AMap.Polyline({
              path: polylineo[o],
              strokeWeight: 5,
              strokeColor: polylineColors
            }));

            // // 官方寫法
            // polylines.push(new AMap.Polyline({
            //   path: polylineo[o],
            //   strokeWeight: 5,
            //   strokeColor: '#c759df'
            // }));

          }
          var polylineGroup = new AMap.OverlayGroup(polylines);
          map.add(polylineGroup);

          // polylineGroups.push(polylineGroup);

          // console.log(allyang)
          for (var o in polygons) {


            // polygon面顏色 和圖例一一對應
            var colors1 = '',
              colors2 = '';

            for (var i = 0; i < allyang.length; i++) {
              if (allyang[i].t == 'polygon' && allyang[i].tdyt == 5) {
                colors1 = "#fea320"
                colors2 = "#f9b149"
              } else if (allyang[i].t == 'polygon' && allyang[i].tdyt == 6) {
                colors1 = "#c759df"
                colors2 = "#d270e8"
              } else if (allyang[i].t == 'polygon' && allyang[i].tdyt == 7) {
                colors1 = "#65d25a"
                colors2 = "#90ea87"
              } else if (allyang[i].t == 'polygon' && allyang[i].tdyt == 8) {
                colors1 = "#f21b34"
                colors2 = "#f54a5e"
              } else if (allyang[i].t == 'polygon' && allyang[i].tdyt == 9) {
                colors1 = "#fa24ac"
                colors2 = "#f06abf"
              } else if (allyang[i].t == 'polygon' && allyang[i].tdyt == 10) {
                colors1 = "#76a200"
                colors2 = "#92b33a"
              } else if (allyang[i].t == 'polygon' && allyang[i].tdyt == 11) {
                colors1 = "#56a3fb"
                colors2 = "#87bcf8"
              } else if (allyang[i].t == 'polygon' && allyang[i].tdyt == 12) {
                colors1 = "#a25e35"
                colors2 = "#f0a06f"
              }
            }

            polygono[polygono.length] = new AMap.Polygon({
              path: polygons[o],
              strokeColor: colors1,
              strokeWeight: 3,
              fillColor: colors2,
              fillOpacity: 0.3
            })


            // // 官方寫法
            // polygono[polygono.length] = new AMap.Polygon({
            //   path: polygons[o],
            //   strokeColor: '#0099ff',
            //   strokeWeight: 3,
            //   fillColor: '#00b5ff',
            //   fillOpacity: 0.3
            // })
          }

          map.add(polygono);

          map.setFitView();

        }

 

實現功能三：
官網案例：https://lbs.amap.com/demo/javascript-api/example/personalized-map/set-theme-style

結合官網案例和自己的項目融合  我直接上代碼吧（div和樣式我就不寫了 ）   

        // 初始化高德地圖
        initMap(allyang) {

          var map = new AMap.Map('mapshow', {
            center: [113.85, 34.03],
            zoom: 11,
            resizeEnable: true, //是否監控地圖容器尺寸變化  mapStyle: styleName
          });


          // //初始化地圖
          // var map = new AMap.Map('container', {
          //   resizeEnable: true, //是否監控地圖容器尺寸變化
          //   mapStyle: "amap://styles/whitesmoke"
          // });

          //綁定radio點擊事件
          var radios = document.querySelectorAll("#map-styles input"); radios.forEach(function (ratio) { ratio.onclick = setMapStyle; }); function setMapStyle() { styleName = "amap://styles/" + this.value; map.setMapStyle(styleName); } map.setMapStyle(styleName); var markers = [];//多個點的對象
          var polylineGroups = [];//折線
          var polygono = [];//多邊形


          var polylineo = {};//畫線
          var polygons = {};//畫多邊形
          var htmlsss = "";
          for (var i = 0; i < allyang.length; i++) {
            htmlsss += "<input name='amaps' id_group='" + allyang[i].id_group + "' lng='" + allyang[i].lng + "' lat='" + allyang[i].lat + "' value='" + allyang[i].t + "'>";
            switch (allyang[i].t) {
              case 'marker': {
                // 地圖點logo和圖例logo 一一對應
                var tdytIcon = '';  // 土地用途logo
                if (allyang[i].t == "marker" && allyang[i].tdyt == 5) {
                  tdytIcon = "./images/tl-01.png"
                } else if (allyang[i].t == "marker" && allyang[i].tdyt == 6) {
                  tdytIcon = "./images/tl-02.png"
                } else if (allyang[i].t == "marker" && allyang[i].tdyt == 7) {
                  tdytIcon = "./images/tl-03.png"
                } else if (allyang[i].t == "marker" && allyang[i].tdyt == 8) {
                  tdytIcon = "./images/tl-04.png"
                } else if (allyang[i].t == "marker" && allyang[i].tdyt == 9) {
                  tdytIcon = "./images/tl-05.png"
                } else if (allyang[i].t == "marker" && allyang[i].tdyt == 10) {
                  tdytIcon = "./images/tl-06.png"
                } else if (allyang[i].t == "marker" && allyang[i].tdyt == 11) {
                  tdytIcon = "./images/tl-07.png"
                } else if (allyang[i].t == "marker" && allyang[i].tdyt == 12) {
                  tdytIcon = "./images/tl-08.png"
                } else {
                  markers[markers.length] = new AMap.Marker({
                    icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                    position: [Number(allyang[i].lng), Number(allyang[i].lat)]
                  });
                }

                markers[markers.length] = new AMap.Marker({
                  icon: tdytIcon,
                  position: [Number(allyang[i].lng), Number(allyang[i].lat)]
                });

                break;
              }
              case 'polyline': {
                if (!polylineo[allyang[i].id_group]) {
                  polylineo[allyang[i].id_group] = [];
                }
                polylineo[allyang[i].id_group][polylineo[allyang[i].id_group].length] = new AMap.LngLat(Number(allyang[i].lng), Number(allyang[i].lat));
                break;
              }
              case 'polygon': {
                if (!polygons[allyang[i].id_group]) {
                  polygons[allyang[i].id_group] = [];
                }
                polygons[allyang[i].id_group][polygons[allyang[i].id_group].length] = new AMap.LngLat(Number(allyang[i].lng), Number(allyang[i].lat));
              }
            }
          }

          // document.getElementById("mapindexvalues").innerHTML += htmlsss
          console.log(document.getElementById("mapshow").innerHTML)


          // document.getElementById("mapshow").innerHTML += htmlsss

          //添加多個點
          map.add(markers);

          //添加多條線
          var polylines = [];
          for (var o in polylineo) {

            // polylines線顏色 和圖例一一對應
            var polylineColors = '';
            for (var i = 0; i < allyang.length; i++) {
              if (allyang[i].t == 'polyline' && allyang[i].tdyt == 5) {
                polylineColors = "#fea320"
              } else if (allyang[i].t == 'polyline' && allyang[i].tdyt == 6) {
                polylineColors = "#c759df"
              } else if (allyang[i].t == 'polyline' && allyang[i].tdyt == 7) {
                polylineColors = "#65d25a"
              } else if (allyang[i].t == 'polyline' && allyang[i].tdyt == 8) {
                polylineColors = "#f21b34"
              } else if (allyang[i].t == 'polyline' && allyang[i].tdyt == 9) {
                polylineColors = "#fa24ac"
              } else if (allyang[i].t == 'polyline' && allyang[i].tdyt == 10) {
                polylineColors = "#76a200"
              } else if (allyang[i].t == 'polyline' && allyang[i].tdyt == 11) {
                polylineColors = "#56a3fb"
              } else if (allyang[i].t == 'polyline' && allyang[i].tdyt == 12) {
                polylineColors = "#a25e35"
              }
            }

            polylines.push(new AMap.Polyline({
              path: polylineo[o],
              strokeWeight: 5,
              strokeColor: polylineColors
            }));

            // // 官方寫法
            // polylines.push(new AMap.Polyline({
            //   path: polylineo[o],
            //   strokeWeight: 5,
            //   strokeColor: '#c759df'
            // }));

          }
          var polylineGroup = new AMap.OverlayGroup(polylines);
          map.add(polylineGroup);

          // polylineGroups.push(polylineGroup);

          // console.log(allyang)
          for (var o in polygons) {


            // polygon面顏色 和圖例一一對應
            var colors1 = '',
              colors2 = '';

            for (var i = 0; i < allyang.length; i++) {
              if (allyang[i].t == 'polygon' && allyang[i].tdyt == 5) {
                colors1 = "#fea320"
                colors2 = "#f9b149"
              } else if (allyang[i].t == 'polygon' && allyang[i].tdyt == 6) {
                colors1 = "#c759df"
                colors2 = "#d270e8"
              } else if (allyang[i].t == 'polygon' && allyang[i].tdyt == 7) {
                colors1 = "#65d25a"
                colors2 = "#90ea87"
              } else if (allyang[i].t == 'polygon' && allyang[i].tdyt == 8) {
                colors1 = "#f21b34"
                colors2 = "#f54a5e"
              } else if (allyang[i].t == 'polygon' && allyang[i].tdyt == 9) {
                colors1 = "#fa24ac"
                colors2 = "#f06abf"
              } else if (allyang[i].t == 'polygon' && allyang[i].tdyt == 10) {
                colors1 = "#76a200"
                colors2 = "#92b33a"
              } else if (allyang[i].t == 'polygon' && allyang[i].tdyt == 11) {
                colors1 = "#56a3fb"
                colors2 = "#87bcf8"
              } else if (allyang[i].t == 'polygon' && allyang[i].tdyt == 12) {
                colors1 = "#a25e35"
                colors2 = "#f0a06f"
              }
            }

            polygono[polygono.length] = new AMap.Polygon({
              path: polygons[o],
              strokeColor: colors1,
              strokeWeight: 3,
              fillColor: colors2,
              fillOpacity: 0.3
            })


            // // 官方寫法
            // polygono[polygono.length] = new AMap.Polygon({
            //   path: polygons[o],
            //   strokeColor: '#0099ff',
            //   strokeWeight: 3,
            //   fillColor: '#00b5ff',
            //   fillOpacity: 0.3
            // })
          }

          map.add(polygono);

          map.setFitView();

        }

 

 

 

 

 

結語：

每個項目的需求不一樣 每個人寫代碼的思路和方式更不一樣  歡迎各位交流指正！共同進步...

 

 

作者：微微一笑絕絕子
出處：https://www.cnblogs.com/wwyxjjz/p/15218197.html
本博客文章均為作者原創，轉載請注明作者和原文鏈接。