template>
<div>
<div>中国县级行政区划图</div>
<div id="map" class="map"></div>
</div>
</template>
<script>
import 'ol/ol.css'
import View from 'ol/View'
import Map from 'ol/Map'
import TileLayer from 'ol/layer/Tile'
import TileWMS from 'ol/source/TileWMS';
export default {
name: "ChinaMap",
mounted() {
var layers = [
new TileLayer({
source: new TileWMS({
params:{
'SERVICE':'WMS',
'VERSION':'1.1.0',
'REQUEST':'GetMap',
'LAYERS':'china:BOUNT_poly',
'BBOX':'[73.44696,6.3186412,135.08583,53.557926]',
'WIDTH':'768',
'HEIGHT':'588',
'SRS':"EPSG:4326",//根据自己图层的坐标系而定
'FORMAT': 'image/png',
'RILED': true,
'TRANSPARENT':true,
},
url:"http://localhost:8080/geoserver/china/wms",
})
})
]
var map = new Map({
layers: layers,
target: 'map',
view: new View({
center: [114.51, 36.49],
zoom: 4,
projection: 'EPSG:4326'
})
})
}
}
</script>
<style scoped>
#map{height: 600px;width: 100%}
</style>