基于高德API实现网络geoJSON功能(突出省份)

代码实现:

       <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 china_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(china_style)
        map.addLayer(china_layer)
        //https://geo.datav.aliyun.com/areas_v3/bound/110000_full.json
        const BJ_source = new ol.source.Vector({
            url:"https://geo.datav.aliyun.com/areas_v3/bound/110000_full.json",
            format:new ol.format.GeoJSON()
        })
        const BJ_layer =new ol.layer.Vector({
            source:BJ_source
        })
        const BJ_style = new ol.style.Style({
            fill:new ol.style.Fill({
                color:'#333'
            }),
        })
        BJ_layer.setStyle(BJ_style)
        map.addLayer(BJ_layer)
        </script>

结果展示:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值