OpenLayer将瓦片叠加到地图上显示

最新推荐文章于 2024-07-24 09:16:30 发布

数智侠

最新推荐文章于 2024-07-24 09:16:30 发布

阅读量1.5k

点赞数

分类专栏： GIS 文章标签： WebGIS

本文链接：https://blog.csdn.net/taogumo/article/details/81017369

版权

GIS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>地图瓦片展示</title>
    <script src="ol.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            //实例化OSM图层数据源对象
            var osmSource = new ol.source.OSM();
            //实例化地图对象
            var map = new ol.Map({
                //目标容器
                target: 'map',
                //图层
                layers: [
                    //加载OSM瓦片图层
                    new ol.layer.Tile({
                        //OSM数据源
                        source:osmSource
                    }),

                 /*   //加载瓦片网格图层
                    new ol.layer.Tile({
                        //瓦片网格数据源
                        source: new ol.source.TileDebug({
                            //投影
                            projection: 'EPSG:4326',
                            //获取瓦片网格信息
                            tileGrid:osmSource.getTileGrid()
                        })
                    })
                    ,*/
                    new ol.layer.Image({
                        source: new ol.source.ImageStatic({
                          url: "5_49_27.png",
                            //  url:"http://172.16.111.90:8086/PolygonRDD20180709143633.png",
                            //url:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531378838302&di=fd02bbf467274d6b95f6ef2f2bbd4cd9&imgtype=0&src=http%3A%2F%2Fimg2.ph.126.net%2F1SGpwPRnvW2VIK7crzi_aw%3D%3D%2F6630887445793377314.jpg",
                            projection: 'EPSG:4326',
                            //范围顺序 minX,minY,MaxX,MaxY
                            imageExtent: [95.625,22.5,101.25,28.125]
                        })
                    }),
                    new ol.layer.Image({
                        source: new ol.source.ImageStatic({
                            url: "5_50_27.png",
                            //  url:"http://192.16.111.90:8086/PolygonRDD20180709143633.png",
                            projection: 'EPSG:4326',
                            //范围顺序 minX,minY,MaxX,MaxY
                            imageExtent: [101.25,22.5,106.875,28.125]
                        })
                    })
                ],
                //实例化视图对象
                view: new ol.View({
                    projection:'EPSG:4326',
                    //视图中心
                    center: [108, 34],
                    //视图缩放等级
                    zoom:4
                })
            });
        };
    </script>
</head>
<body>
<div id="map"></div>
</body>
</html>

效果如下：