使用echarts的bmap配置项绘制区域轮廓遮罩

示例图

代码

vue 复制代码
<template>
  <div id="map" style="width: 100%; height: 100vh"></div>
</template>

<script>
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
export default {
  data() {
    return {
      mapOptions: {
        bmap: {
          roam: true, // 是否开启拖拽和缩放
          center: [116.403414, 39.924091], // 地图中心点坐标
          zoom: 15, // 缩放级别
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "bmap",
            symbolSize: 20,
          },
        ],
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 初始化百度地图
      var myChart = echarts.init(document.getElementById("map"));
      myChart.setOption(this.mapOptions);
      var map = myChart.getModel().getComponent("bmap").getBMap();
      map.setMinZoom(9);
      map.setMaxZoom(22);
      var boundary = new BMap.Boundary();
      boundary.get("北京市", (rs) => {
        let count = rs.boundaries.length;
        if (count === 0) {
          alert("未能获取当前行政区域");
          return;
        }
        const EN_JW = "180, 90;";
        const NW_JW = "-180,  90;";
        const WS_JW = "-180, -90;";
        const SE_JW = "180, -90;";
        var points = rs.boundaries[0];
        // 东南西北四个角添加一个覆盖物
        const ply1 = new BMap.Polygon(
          points + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW,
          {
            strokeColor: "none",
            fillColor: "#fff",
            fillOpacity: 0.9,
            strokeOpacity: 1,
          }
        );
        map.addOverlay(ply1);
        // 绘制北京市整体的外轮廓
        for (let i = 0; i < count; i++) {
          const ply = new BMap.Polygon(points, {
            strokeWeight: 2,
            strokeColor: "#2457ff",
            fillColor: "transparent",
          });
          map.addOverlay(ply);
        }
      });
    },
  },
};
</script>

<style></style>

参考文章
百度地图api只显示某个省市的行政区域
Echarts中使用bmap作为底图,添加行政划区遮罩层

相关推荐
理想不理想v1 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我2 分钟前
浏览器交互事件汇总
前端·交互
小阮的学习笔记15 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜16 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=16 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck21 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!41 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript