代码实现：

        <script>
            // 3、初始化一个高德图层
        const gaode = 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
            })
        });
        // 4、初始化openlayer地图
        const map = new ol.Map({
            //将初始化的地图设置到id为map的DOM元素上
            target:"map",
            //设置图层
            layers:[gaode],
            //设置视图
            view:new ol.View({
                center:[120.15,30.22],
                //设置地图的放大级别
                zoom:5,
                projection:"EPSG:4326"
            })
        })
        //试图跳转控件
        const ZoomToExtent = new ol.control.ZoomToExtent({
            extent:[110,30,160,30]
        })
        map.addControl(ZoomToExtent)
        //放大缩小控件
        const zoomslider = new ol.control.ZoomSlider();
        map.addControl(zoomslider)
        //全屏控件
        const fullScreen = new ol.control.FullScreen();
        map.addControl(fullScreen);

        //加载网络geojson数据
        const china_source = new ol.source.Vector({
            url:"https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
            format:new ol.format.GeoJSON()
        })
        const china_layer =new ol.layer.Vector({
            source:china_source
        })
        const chian_style = new ol.style.Style({
            fill:new ol.style.Fill({
                color:'rgba(50,50,0,0.4)'
            }),
            stroke:new ol.style.Stroke({
                color:"#ff2d5180",
                width:2
            })
        })
        china_layer.setStyle(chian_style)
        map.addLayer(china_layer)
        </script>

结果展示：