采用 OpenLayers + WebGIS 编写浏览器的地图应用入门样例

马拉喀什

已于 2022-04-29 18:44:58 修改

阅读量115

点赞数

分类专栏： HTML GIS openlayers 文章标签： java

于 2021-03-24 13:30:32 首次发布

本文链接：https://blog.csdn.net/weixin_45408010/article/details/115173957

版权

HTML 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

GIS

2 篇文章 0 订阅

订阅专栏

openlayers

1 篇文章 0 订阅

订阅专栏

采用 OpenLayers + WebGIS 编写浏览器的地图应用入门样例

本样例来自 OpenLayers 官方 Quick Start .
可以在以下几个方面做调整：
1） JS / CSS 文件可以引用网络，也可以引用本地下载的 openlayers 对应文件；
2）图层的中心位置可调；
3）图层的 ZOOM 层级可调，最大为 6 ;

openlayers官方样例

<!doctype html>
<html lang="en">
  <head>
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">  -->
    
    <link rel="stylesheet" href="css/ol.css" type="text/css">  
    
    <style>
      .map {
        height: 800px;
        width: 100%;
      }
    </style>
    <!-- <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>  --> 
    
    <script src="build/ol.js"></script> 
    
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="wxf2" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'wxf2',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([121.41, 30.82]),
          zoom: 4
        })
      });
    </script>
  </body>
</html>```

马拉喀什

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
采用 OpenLayers + WebGIS 编写浏览器的地图应用入门样例

采用 OpenLayers + WebGIS 编写浏览器的地图应用入门样例本样例来自 OpenLayers 官方 Quick Start .可以在以下几个方面做调整：1） JS / CSS 文件可以引用网络，也可以引用本地下载的 openlayers 对应文件；2）图层的中心位置可调；3）图层的 ZOOM 层级可调，最大为 6 ;openlayers官方样例<!doctype html><html lang="en"> <head> <
复制链接

扫一扫