240102kkk

欣欣％

已于 2024-01-02 18:06:58 修改

阅读量329

点赞数 6

文章标签： spring

于 2024-01-02 17:21:59 首次发布

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

版权

本文介绍了如何在HTML页面中利用OpenLayers库创建基础地图，集成WMS数据源，创建并添加WMS图层，展示世界省份地图，包括比例尺和鹰眼功能。

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

第三个

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></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%;}

           #mapbar{
               position : absolute;
               right: 15px;
               top: 15px;
               width:150px;
               height:20px;
           }
       </style>
   </head>
   <body>
       <div id="map" class="map"></div>
       <div id="mapbar"></div>
       <script>
       /**
       * 1、创建基础地图，增加比例尺控件和鹰眼控件
       * 2、创建WMS数据源
       * 3、创建WMS图层，连接数据源
       * 4、将WMS图层添加到地图当中
       */
           //1、创建基础地图，增加比例尺控件和鹰眼控件
           var map = new ol.Map({
               target:"map",
               layers:[new ol.layer.Tile({
                   source:new ol.source.OSM()
               })],
               view:new ol.View({
                   center:[0,0],
                   zoom:3
               })
           })
           var scaleControl = new ol.control.ScaleLine({
               target : "mapbar",
               units : "metric",
               bar : true
           });
           map.addControl(scaleControl);

           var eagleEyeControl = new ol.control.OverviewMap({
               collapsed : "true"
           });
           map.addControl(eagleEyeControl);

           //2、创建WMS数据源
           var worldSource = new ol.source.ImageWMS({
               url : "http://localhost:8080/geoserver/wms",
               params:{
                   "layers":"world"
               }
           })
           //3、创建WMS图层，连接数据源
           var provinceLayer = new ol.layer.Image({
               source : worldSource
           });
           //4、将WMS图层添加到地图当中
           map.addLayer(provinceLayer);
       </script>
   </body>
</html>

欣欣％

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
240102kkk

/1、创建基础地图，增加比例尺控件和鹰眼控件。* 1、创建基础地图，增加比例尺控件和鹰眼控件。//3、创建WMS图层，连接数据源。//4、将WMS图层添加到地图当中。* 3、创建WMS图层，连接数据源。* 4、将WMS图层添加到地图当中。//2、创建WMS数据源。* 2、创建WMS数据源。
复制链接

扫一扫