高德地图行政区域浏览中遇到的一个坑

问题说明

在设置行政区域浏览的时候，发现了一个很神奇的问题，正常情况下来说，单行政区域浏览的设置是这样的

        var map = new AMap.Map('container', {
            zoom: 4
        });
        AMapUI.loadUI(['geo/DistrictExplorer'], function (DistrictExplorer) {
            //启动页面
            //创建一个实例
            var districtExplorer = new DistrictExplorer({
                map: map //关联的地图实例
            });

            var adcode = 100000; //全国的区划编码

            districtExplorer.loadAreaNode(adcode, function (error, areaNode) {

                if (error) {
                    console.error(error);
                    return;
                }

                //绘制载入的区划节点
                renderAreaNode(districtExplorer, areaNode);
            });
        });

        function initPage(DistrictExplorer) {
            
        }

        function renderAreaNode(districtExplorer, areaNode) {

            //清除已有的绘制内容
            districtExplorer.clearFeaturePolygons();

            //just some colors
            var colors = ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00"];

            //绘制子级区划
            districtExplorer.renderSubFeatures(areaNode, function (feature, i) {

                var fillColor = colors[i % colors.length];
                var strokeColor = colors[colors.length - 1 - i % colors.length];

                return {
                    cursor: 'default',
                    bubble: true,
                    strokeColor: strokeColor, //线颜色
                    strokeOpacity: 1, //线透明度
                    strokeWeight: 1, //线宽
                    fillColor: fillColor, //填充色
                    fillOpacity: 0.35, //填充透明度
                };
            });

            //绘制父级区划，仅用黑色描边
            districtExplorer.renderParentFeature(areaNode, {
                cursor: 'default',
                bubble: true,
                strokeColor: 'black', //线颜色
                fillColor: null,
                strokeWeight: 3, //线宽
            });

            //更新地图视野以适合区划面
            map.setFitView(districtExplorer.getAllFeaturePolygons());
        }

但是，当把视图模式转换为3D模式的时候就会出现了问题

var map = new AMap.Map('container', {
    center: [114.050972, 33.575935], //地图中心点坐标值
    expandZoomRange: true, //设置为true的时候，zooms的最大级别在PC上可以扩大到20级
    resizeEnable: true, //是否监控地图容器尺寸变化，默认值为false
    rotateEnable: true, //地图是否可旋转，默认false。3D视图默认为true，2D视图默认false
    pitchEnable: true, //是否允许设置俯仰角度，3D视图下为true，2D视图下无效
    zoom: 12, //地图显示的缩放级别[1-20]，3D模式下可以是浮点数
    viewMode: "3D", //开启3D视图,默认为关闭
    pitch: 60
});

报错信息如下

Uncaught TypeError: Cannot read property '0' of null

进一步测试发现，多区域浏览也有这个BUG，同时会导致在AdCode数组中只渲染第一个参数，剩余参数讲不会被渲染。

查找之后发现解决办法

//绘制父级区划，仅用黑色描边
districtExplorer.renderParentFeature(areaNode, {
    cursor: 'default',
    bubble: true,
    strokeColor: 'black', //线颜色
    fillColor: null,
    strokeWeight: 3, //线宽
});

fillColor: null

这个配置项要配置颜色，一定不能配置为null！！！

最后编辑于：2018.07.19 09:36:56