echarts繪制3D地圖實(shí)現(xiàn)平移、縮放

所需依賴

?準(zhǔn)備工作：main.js中引入依賴

?

先上圖

代碼直接復(fù)制粘貼就可以使用了，根據(jù)自己需求稍作修改就可以使用了

?html代碼部分

 <div class="map">
      <div id="3Dmap" class="main"></div>
  </div>

js代碼部分

 var myChart = this.$echarts.init(document.getElementById("3Dmap"));
      this.$echarts.registerMap("haerbin", haerbin);

      var _this = this;
      this.option = {
        tooltip: {
          show: true, 
          triggerOn: "mousemove", //鼠標(biāo)hover地圖區(qū)域時(shí)出現(xiàn)
          trigger: "item",
          transitionDuration: 0, //直接出現(xiàn)提示框
          formatter: function (params) {
            // console.log(params,'params')
            //返回的是dom結(jié)構(gòu)，可以在這里寫(xiě)好樣式，也可以使用下面的配置項(xiàng)去設(shè)置樣式
            return `<div style="position:absolute;left:10px;top:16px;width:8px;height:8px;background-color:#FD9A5A;"></div>
                        <div class="tips" style="padding:12px;">
                            <h1 style="font-size:16px;">${params.name}</h1>
                            <p style="font-size:16px;">
                                <span style="color:#03dbf3;font-size:30px;display:inline-block;padding:5px 0">${params.data.num}</span>
                            </p>
                        </div>`;
          },
          //這里就是設(shè)置地圖自帶的彈框樣式
          borderColor: "#419bf9",
          borderWidth: 1,
          //   padding: [0, 15],
          // backgroundColor: '#0a1d54',
          backgroundColor: "rgba(0,2,89,0.8)",
          borderRadius: 0,
          textStyle: { color: "#fff" },
        },
        series: [
          {
            // name: "haerbin",
            type: "map3D", //需要使用3d地圖
            // type: 'map',
            map: "haerbin", //地圖類(lèi)型。echarts-gl 中使用的地圖類(lèi)型同 geo 組件相同
            regionHeight: 3, //模型的高度
            boxWidth: 70, //三維地圖在三維場(chǎng)景中的寬度
            boxDepth: 73, //三維地圖在三維場(chǎng)景中的深度
            top: "-15%",
            itemStyle: {
              normal: {
                //靜態(tài)模式下顯示的默認(rèn)樣式
                borderColor: "#3f82e5",
                borderWidth: 2,
                // color: "#0a55ea",
                color: "rgba(8, 72, 197, 0.4)",//建議使用rgba設(shè)置透明度，使用opacity會(huì)導(dǎo)致文字變色
                // opacity: 0.4,
              }, //陰影效果
              emphasis: {
                // color:'#3f82e5',#0636A2
                color: "#0a55ea",
                // opacity:0.5,
                label: {
                  show: true,
                },
              },
            },
            label: {
              show: true,
              fontSize: 18,
              formatter: (params) => {
                var str = params.data.name;
                // return params.data.name + "\n\n\n" + params.data.num;
                if (params.data.name == "平房區(qū)") {
                  //   return  str= "<div style='width:10px;height:10px;border-radius:50%;color:#fff'>"+1+"</div>";
                  return (str = "①");
                }
                if (params.data.name == "香坊區(qū)") {
                  return (str = "②");
                }
                if (params.data.name == "南崗區(qū)") {
                  return (str = "③");
                }
                if (params.data.name == "道外區(qū)") {
                  return (str = "④");
                }
                if (params.data.name == "道里區(qū)") {
                  return (str = "⑤");
                }
                return str;
              },
              textStyle: {
                color: "white",
              },
            },
            viewControl: {
              minBeta: -360,
              maxBeta: 360,
              alpha: 50,
              center: [0, -10, -10], //位置點(diǎn)
              distance: 100, //縮放比例,默認(rèn)視角距離主體的距離，對(duì)于 globe 來(lái)說(shuō)是距離地球表面的距離，對(duì)于 grid3D 和 geo3D 等其它組件來(lái)說(shuō)是距離中心原點(diǎn)的距離。在 projection 為'perspective'的時(shí)候有效。
              minDistance: 30,
              maxDistance: 140,
              panMouseButton: "left",
              rotateMouseButton: "middle",
              zoomSensitivity: 1,
              // autoRotate: true, //是否開(kāi)啟視角繞物體的自動(dòng)旋轉(zhuǎn)查看，可開(kāi)啟自行測(cè)試
  
            },
            data: this.list,
          },
        ],
      };

      myChart.setOption(this.option);

繪制3D地圖可能會(huì)引起地圖上標(biāo)注點(diǎn)，跟所需點(diǎn)有偏差的情況，這樣需要去修改引用的json文件

?地圖json數(shù)據(jù)可以到DataV.GeoAtlas地理小工具系列下載或引用即可文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-513213.html

到了這里，關(guān)于echarts繪制3D地圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！