美文网首页
高德地图行政区域浏览中遇到的一个坑

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

作者: ErrorCode233 | 来源:发表于2018-07-19 09:35 被阅读587次

    问题说明

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

            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!!!

    相关文章

      网友评论

          本文标题:高德地图行政区域浏览中遇到的一个坑

          本文链接:https://www.haomeiwen.com/subject/umpzpftx.html