<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: "ChinaMap2",
mounted() {
var layers = [
new TileLayer({
extent: [// 边界
73.44696044921875,
6.318641185760498,
135.08583068847656,
53.557926177978516
],
source: new TileWMS({
url: "http://localhost:8080/geoserver/china/wms",
params: { LAYERS: "china:bou2_4p", TILED: true },
serverType: "geoserver",
transition: 0
})
})
]
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>