WebGIS二次开发-6-高德地图加载

最新推荐文章于 2024-10-06 19:28:56 发布

团子WebGIS

最新推荐文章于 2024-10-06 19:28:56 发布

阅读量544

点赞数

分类专栏： GIS javascript WebGIS 文章标签： javascript ecmascript 学习开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/bguihiub/article/details/129078211

版权

WebGIS 同时被 3 个专栏收录

22 篇文章 4 订阅

订阅专栏

GIS

21 篇文章 0 订阅

订阅专栏

javascript

12 篇文章 1 订阅

订阅专栏

1、地图显示

var gaodeMapLayer = new ol.layer.Tile({
    title: "高德地图",
    source: new ol.source.XYZ({
        url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
        wrapX: false
    })
});
var map = new ol.Map({
    target: "map_container",
    layers: [gaodeMapLayer],
    view: new ol.View({
        projection: 'EPSG:4326',
        center: [0, 0],
        zoom: 4
    })
})

影像图层

var image = new ol.layer.Tile({
    title: "高德地图",
    source: new ol.source.XYZ({
        url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
        wrapX: false
    })
})

注记图层

var zhuji = new ol.layer.Tile({
    title: "高德地图",
    source: new ol.source.XYZ({
        url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
        wrapX: false
    })
})

2、点击事件实现地图切换

1、map.on("click")绑定点击事件

2、map.addLayer()添加图层

3、map.removeLayer()删除图层

<body>
    <!-- 1、创建容器装载地图 -->
    <div id="map_container">

    </div>
    <script>
        var gaodeMapLayer = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });
        var image = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
                wrapX: false
            })
        })
        const map = new ol.Map({
            target: 'map_container',
            layers: [gaodeMapLayer],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [114, 30],
                zoom: 8
            })
        })
        let isShow = true;
        map.on("click",function(){
            isShow = !isShow;
           if(isShow){
             map.removeLayer(image)
           }else{
             map.addLayer(image)
           }
        })
    </script>
</body>