123parties

姜汁奶茶不加杯

已于 2024-01-02 17:18:28 修改

阅读量395

点赞数 6

文章标签： java

于 2024-01-02 17:13:53 首次发布

本文链接：https://blog.csdn.net/2302_78959841/article/details/135345500

版权

<html>
   <head>
       <meta charset="utf-8">
       <title>test</title>
       <link rel="stylesheet" type="text/css" href="./css/ol.css">
       <script type="text/javascript" src="./js/ol.js"></script>
       <style type="text/css">
           body {
               margin: 0px;
           }

           html,
           body,
           #map {
               height: 100%;
           }
       </style>
   </head>
   <body>
       <div id="map"></div>
       <script type="text/javascript">
           /**
           * 基本步骤：
           * 1、构建基础HTML框架
           * 2、引入openlayers的CSS和JS库
           * 3、创建Map容器，为map容器赋予id，指定样式
           * 4、实例化Map
           */
           var mapObject = new ol.Map({
               //地图的显示位置，指向页面的某个id的DIV，
               target: "map",
               //默认加载图层，填入数组，可默认加载多个图层
               //OpenLayers三级结构：Map->Layer->source
               layers: [
                   new ol.layer.Image({
                       source: new ol.source.ImageWMS({
                           ratio: 1,
                           url: 'http://localhost:8080/geoserver/T1023/wms',
                           params: {
                               "LAYERS": 'T1023:T1122Group'
                           }
                       })
                   })
               ],
               //默认视角
               view: new ol.View({
                   // center: [-10997148, 4569099],
                   center: [0, 0],
                   zoom: 4,
               })
           });
       </script>
   </body>
</html>