240102ccc

欣欣％

于 2024-01-02 17:20:42 发布

阅读量900

点赞数 20

文章标签： spring cloud

本文链接：https://blog.csdn.net/2301_78446996/article/details/135345689

版权

本文介绍了如何在HTML中利用OpenLayers库创建一个交互式地图，包括引入CSS和JS库、定义Map容器、设置默认图层和视图参数，展示了通过GeoServerWMS服务加载地图数据的基本步骤。

摘要由CSDN通过智能技术生成

第二个

<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>