山东大学项目实训9

最新推荐文章于 2024-09-16 08:47:17 发布

顾小桐

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量79

点赞数

分类专栏：智慧环保：城市空气质量预测系统专栏文章标签： javascript

本文链接：https://blog.csdn.net/weixin_51523159/article/details/125185740

版权

智慧环保：城市空气质量预测系统专栏专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细阐述了使用瓦片模式在地图绘制中的应用，介绍了`drawTiles`函数的工作原理，涉及数据读取、坐标转换和地图绘制过程。通过`GridMap`类展示如何设置参数并监听图层加载完成后的操作，最终生成清晰地图效果。

摘要由CSDN通过智能技术生成

界面实现（4）

瓦片模式（3）

最后，分瓦片绘制地图：

drawTiles: function () {
        var $this = this;
        $.each(this.tiles, function (i, tileCoord) {
            if ($this.readTileData) {
                var convert = new BaiduPointConvert($this.map);
                var bounds = convert.tileToBounds(tileCoord);
                $this.readTileData(bounds.sw, bounds.ne, tileCoord);
            }
        });
    },

绘制前要在readTileData事件里面实现获取瓦片数据，最后再调用drawTile方法绘制瓦片

function GridMap(map, option) {
    this.readTileData = option.readTileData;
    if (this.map == null) {
        this.map = map;
    }
    if (option.opacity) {
        this.setOpacity(option.opacity);
    }
    if (option.colorMode) {
        this.setColorMode(option.colorMode);
    }
    if (option.thresholds) {
        this.setThresholds(option.thresholds);
    }
    if (option.zIndex) {
        this.zIndex = option.zIndex;
    }

    //加载完成图层后设置瓦片的z-index
    (function (gridMap) {
        gridMap.map.addEventListener('tilesloaded', function (e) {
            if (gridMap) {
                gridMap.fixZIndex();
            }
        });
    })(this);
};