<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>
VUE+OPENLAYER系列四:Geoserver 2
最新推荐文章于 2023-10-31 16:05:04 发布