OpenLayers的使用----一个完全免费开源的地图JS库

OpenLayers很容易的在网站里放置动态地图。它能显示展开图及从资源中加载地图标记及矢量数据。它被开发出尽可能的使用所有的地图信息。并且它是完全免费及开源的.
详细了解可去它的官网：http://openlayers.org/

目前创新互联公司已为成百上千的企业提供了网站建设、域名、虚拟主机、网站托管、服务器托管、企业网站设计、三沙网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

简单使用，如展示一个块地图

<!doctype html>
<html lang="en">
  <head>
    <!--引入openlayers的css-->
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/css/ol.css" type="text/css">
    <style>
      .mymap {
        height: 400px;
        width: 100%;
      }
    </style>
    <!--
        如果在老的android平台及早期IE还需要在openlayers之前引入下面的js来兼容
         <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
    -->
    <!--引入openlayers的js-->
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>
  </head>
  <body>
    <div id="mymap" class="mymap"></div>
    <script type="text/javascript">
      /*
        创建openlayers中的一个map对象。并传递一个json对象来配置地图的一些参数。
        target中的值是document中块标签的id，用于显示地图的容器指定。
        layers：地图图层的配置，这里指定一个简单的块状地图图层。
        view：用于指地图显示的中心位置及缩放比例还旋转
      */
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([xxx, xxx]),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

网页名称：OpenLayers的使用----一个完全免费开源的地图JS库
分享链接：https://www.cdcxhl.com/article6/gdosog.html

成都网站建设公司_创新互联，为您提供ChatGPT、企业网站制作、面包屑导航、网站设计、网站策划、网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容