代码实现:
<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>
结果展示: