openLayers叠加geoserverWMS服务

最新推荐文章于 2024-08-11 16:38:35 发布

炉火纯青-旺

最新推荐文章于 2024-08-11 16:38:35 发布

阅读量1.2k

点赞数 1

分类专栏： openlayers 文章标签： openlayers、geoserver

本文链接：https://blog.csdn.net/qq_34870529/article/details/80324283

版权

openlayers 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1：代码展示

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  lang= 
  "en" 
  > 
 

 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
 
  < 
  title 
  >openlayers 
  </ 
  title 
  > 
 
 
  < 
  link 
  rel= 
  "stylesheet" 
  href= 
  "https://openlayers.org/en/v4.6.5/css/ol.css" 
  type= 
  "text/css" 
  > 
 
 
  < 
  script 
  src= 
  "https://openlayers.org/en/v4.6.5/build/ol.js" 
  type= 
  "text/javascript" 
  > 
  < 
  / 
  script 
  > 
 
 
  < 
  style 
  > 
 
 
  .map { 
 
 
  height: 
  100%; 
 
 
  width: 
  100%; 
 

   } 
 
 
  < 
  / 
  style 
  > 
 
 
  </ 
  head 
  > 
 

 
  < 
  body 
  > 
 
 
  < 
  div 
  id= 
  "map" 
  class= 
  "map" 
  ></ 
  div 
  > 
 
 
  < 
  script 
  type= 
  "text/javascript" 
  > 
 
 
  var 
  layers = [ 
 
 
  new 
  ol. 
  layer. 
  Tile({ 
 
 
  source: 
  new 
  ol. 
  source. 
  TileWMS({ 
 
 
  url: 
  'http://192.9.104.68:8080/geoserver/test/wms', 
 
 
  params: { 
 
 
  'LAYERS' 
  : 
  'test:shengjie', 
  //此处可以是单个图层名称，也可以是图层组名称，或多个图层名称  
 
 
  'TILED' 
  : 
  false 
 

   }, 
 
 
  serverType: 
  'geoserver' 
  //服务器类型  
 

   }) 
 

   }) 
 

   ]; 
 
 
  var 
  map = 
  new 
  ol. 
  Map({ 
 
 
  layers: 
  layers, 
 
 
  target: 
  'map', 
 
 
  view: 
  new 
  ol. 
  View({ 
 
 
  projection: 
  'EPSG:4326', 
 
 
  center: [ 
  102.73333, 
  25.05], 
 
 
  zoom: 
  7 
 


   }), 
 
 
  controls: 
  ol. 
  control. 
  defaults({ 
 
 
  attributionOptions: { 
 
 
  collapsible: 
  false 
 

   } 
 

   }) 
 

   }); 
 
 
  < 
  / 
  script 
  > 
 
 
  </ 
  body 
  > 
 

 
  </ 
  html 
  > 
 