地图外边框

需求

UI设计师出于视觉效果等考虑，会设计一些“地图外框与内框样式不同”的原型。如下图所示：
内置地图红色外框（借用参考链接1）

经调研，基本没有GIS工具库可直接实现此效果。
Echarts间接实现的替代方案如下：

方案1：利用“Echarts内置矢量地图”作为底图
- 思路：两层地图叠加，底层地图（geo）设置外框效果，顶层地图设置内框效果，且顶层地图略小于底层地图
- 优点：没有多余地图信息，贴合UI视觉效果(样式如上图所示)
- 缺点：①地图不能自由缩放（必须roam = false保证两层地图同步大小）②额外渲染了一层地图③地理位置信息不精确，见如下官网通告:
  
  ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。
  建议大家使用以百度地图为底图的形式，参考实例：http://echarts.baidu.com/demo.html#map-polygon
方案2：利用“百度地图Bmap”作为底图
- 思路：将百度地图bmap融入Echarts
- 优点：可自由设置边界，可缩放，位置精确
- 缺点：①有多余的地图信息（可通过设置百度地图样式尽量精简）②选中内部区域块困难
- 样式：

方案1：利用“Echarts内置矢量地图”作为底图

实现

两层地图叠加，底层地图（geo）设置外框效果，上层地图设置内框效果。

option = {
    //底层图
    geo: {
        map: 'china',
        roam: false,
        itemStyle: {
            normal: {}，
        }
    },
    series: [
    // 上层图
    	{
            type: 'map',
            map: 'china',
            geoIndex: 1, //关联底层图
            aspectScale: 0.75, //长宽比

            roam: false,
            itemStyle: {
                normal: {},
            },
    	}，
    ]，
}

参考链接

方案2：利用“百度地图Bmap”作为底图

实现

百度底图绘制行政边界的核心方法

drawBoundary() {
  // name:行政区域（省/直辖市/地级市/县）中文名，eg.北京，黑龙江，南京，高淳
  const { map, name } = this;
  const bounds = new BMap.Boundary();
  bounds.get(name, (rs) => {
    const count = rs.boundaries.length;
    for (let i = 0; i < count; i++) {
      const ply = new BMap.Polygon(rs.boundaries[i], BOUNDARY_STYLE);
      map.addOverlay(ply);
      map.setViewport(ply.getPath());
    }
  });
}

使用bmap.js实现Echarts融合百度地图

bmap.js 是一个基于echart3的百度地图扩展文件，使用过程如下：

下载引用bmap.js
在echarts option中配置bmap
- bmap提供四项基本配置：center、zoom、roam、mapStyle
- bmap高级配置与百度地图API一致：
  - var map = myChart.getModel().getComponent(‘bmap’).getBMap(); // 获取地图实例
  - map.addControl(new BMap.NavigationControl()); // 使用百度API

将bmap作为底图引入： coordinateSystem: ‘bmap’

<!DOCTYPE html>
<html style="height: 100%">
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        const MAP_STYLE = {styleJson: [],};
        const MAP_BOUNDARY_STYLE = {
            strokeWeight: 2,
            strokeColor: '#30A0FF',
            fillOpacity: 0.1,
            fillColor: 'none',
            enableMassClear: false,
            enableClicking: false,
        };
        function renderItem(params, api) {}
        var option = {
            bmap: { // 百度地图
                center: [116.404, 39.915],
                zoom: 8,
                roam: true,
                mapStyle: MAP_STYLE,
            },
            series: [
                {
                    type: 'custom',
                    coordinateSystem: 'bmap', // 关联百度地图
                    renderItem: renderItem,
                    data: [0],
                }
            ]
        };
        myChart.setOption(option, true);

        // 百度地图实例
        var map = myChart.getModel().getComponent('bmap').getBMap(); 
        const bounds = new BMap.Boundary();
        bounds.get('北京', (rs) => {
            const count = rs.boundaries.length;
            for (let i = 0; i < count; i++) {
                const ply = new BMap.Polygon(rs.boundaries[i], MAP_BOUNDARY_STYLE);
                map.addOverlay(ply);
                map.setViewport(ply.getPath());
            }
        });
    </script>
</body>
</html>

需求

方案1： 利用“Echarts内置矢量地图”作为底图

实现

参考链接

方案2：利用“百度地图Bmap”作为底图

实现

百度底图绘制行政边界的核心方法

使用bmap.js实现Echarts融合百度地图

参考链接

方案1：利用“Echarts内置矢量地图”作为底图