OpenLayers Demo

最新推荐文章于 2024-06-27 16:14:34 发布
最新推荐文章于 2024-06-27 16:14:34 发布
阅读量783 收藏 1
点赞数
分类专栏： 地图 文章标签： openlayers 地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38425662/article/details/78748578
版权

在地图上放置一张地图

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.2/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://openlayers.org/en/v4.6.2/build/ol.js" type="text/javascript"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      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([114.3,30.60]),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

要包含一个网页的地图，你将需要3件事情：

  1. 包括OpenLayers
  2. <div> 地图容器
  3. JavaScript来创建一个简单的地图

包括OpenLayers

  <script src="https://openlayers.org/en/v4.6.2/build/ol.js" type="text/javascript"></script>

<div> 包含地图

  <div id="map" class="map"></div>

应用程序中的地图包含在<div>HTML元素中。通过这个<div>，可以通过CSS控制宽度，高度和边界等地图属性。这里是CSS元素，用于使地图高400像素和浏览器窗口一样宽。

  <style>
    .map {
      height: 400px;
      width: 100%;
    }
  </style>

JavaScript来创建一个简单的地图

  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([114.3,30.60]),
      zoom: 4
    }) 
  });

运宝道人
关注
专栏目录
OpenLayers demo
zxz_learn的博客
04-14 379
Demo – Vue <template> <div> <div id="map" class="map" tabindex="0"></div> <button id="zoom-out" @click="add">Zoom out</button> <button id="zoom-in" @click="deleteMap">Zoom in</button> <bu
openlayers案例demo（详细注释）
01-22
网上很多案例都不全面，个人整理了一套详细的方案代码加注释，希望能帮到你们，代码简洁，不懂的可以加我的号！
openlayers地标要素
最新发布
qq_41892764的博客
06-27 313
【代码】openlayers地标要素。
openlayer demo
josiecici的博客
10-13 160
openlayer demo <!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/css/ol.css" type="text/css"> <style> .map {
Openlayers测量demo
09-02
由于公司项目需要使用到openlayers，就开始学习了openlayers，其中有一个需求需要用到测量功能,就写了这个demo
OL3Demo，openlayers示例模板
11-26
文件列表： OL3Demo\.DS_Store OL3Demo\css\base.css OL3Demo\css\js_demo.css OL3Demo\css\ol.css OL3Demo\demos\.DS_Store OL3Demo\demos\Controls\Animation.htm OL3Demo\demos\Controls\CanvasTiles.htm OL3Demo\demos\Controls\FullScreen.htm OL3Demo\demos\Controls\LayerControl.htm OL3Demo\demos\Controls\LayerSpy.htm OL3Demo\demos\Controls\Measure.htm OL3Demo\demos\Controls\MousePosition.htm OL3Demo\demos\Controls\Operation.htm OL3Demo\demos\Controls\OverviewMap.htm OL3Demo\demos\Controls\ScaleLine.htm OL3Demo\demos\Controls\ZoomSlider.htm OL3Demo\demos\data\geojson\countries-110m.json OL3Demo\demos\data\geojson\countries.geojson OL3Demo\demos\data\geojson\GeoJSON.json OL3Demo\demos\data\geojson\samples.json OL3Demo\demos\data\geolocation-orientation.json OL3Demo\demos\data\geolocation_marker_heading.png OL3Demo\demos\data\gml\gml.xml OL3Demo\demos\data\gml\topp-states-wfs.xml OL3Demo\demos\data\gpx\fells_loop.gpx OL3Demo\demos\data\kml\2012-02-10.kml OL3Demo\demos\data\kml\2012_Earthquakes_Mag5.kml OL3Demo\demos\data\kml\kml.xml OL3Demo\demos\DataHandler.ashx OL3Demo\demos\Drawing\DrawFeatures.htm OL3Demo\demos\Drawing\FeaturesStyle.htm OL3Demo\demos\Drawing\ModifyFeatures.htm OL3Demo\demos\Drawing\MoveFeatures.htm OL3Demo\demos\Drawing\SaveFeatures.htm OL3Demo\demos\Labels\AddClusterLabels.htm OL3Demo\demos\Labels\AddLabels.htm OL3Demo\demos\Labels\AddPopup.htm OL3Demo\demos\MultiData\LoadBasicMaps.htm OL3Demo\demos\MultiData\LoadOpenData.htm OL3Demo\demos\MultiData\LoadPublicMaps.htm OL3Demo\demos\MultiData\LoadTiandituMap.htm OL3Demo\demos\MultiData\MapExport.htm OL3Demo\demos\MultiData\OSM.htm OL3Demo\demos\MultiData\OverLayerMaps.htm OL3Demo\demos\OGC\LoadWCSMap.htm OL3Demo\demos\OGC\LoadWFSFeatrue.htm OL3Demo\demos\OGC\LoadWMSMap.htm OL3Demo\demos\OGC\LoadWMTSMap.htm OL3Demo\demos\OGC\WFS_Transaction.htm OL3Demo\demos\Others\AddPOI.htm OL3Demo\demos\Others\CreatCharts.htm OL3Demo\demos\Others\Geolocation.htm OL3Demo\demos\Others\Heatmap.htm OL3Demo\demos\Others\HotSpots.htm OL3Demo\demos\Others\LoadPublicMaps.htm OL3Demo\demos\Others\MilitaryPlotting.htm OL3Demo\demos\Others\MultiViewLinkage.htm OL3Demo\demos\Others\ProjectionTransformation.htm OL3Demo\demos\Others\SimulateGeolocation.htm OL3Demo\demos\Others\副本 LoadPublicMaps.htm OL3Demo\demos\RegDataHandler.ashx OL3Demo\demos\Web.config OL3Demo\images\ArrowIcon\arbitrary_area.png OL3Demo\images\ArrowIcon\arrow.png OL3Demo\images\ArrowIcon\arrow1.png OL3Demo\images\ArrowIcon\arrowcross.png OL3Demo\images\ArrowIcon\assembly.png OL3Demo\images\ArrowIcon\circle.png OL3Demo\images\ArrowIcon\CircleClosedangleCompass.png OL3Demo\images\ArrowIcon\closedangle.png OL3Demo\images\ArrowIcon\curve_flag.png OL3Demo\images\ArrowIcon\custom_arrow.png OL3Demo\images\ArrowIcon\custom_tail_arrow.png OL3Demo\images\ArrowIcon\custom_tail_arrow_.png OL3Demo\images\ArrowIcon\DoubleClosedangleCompass.png OL3Demo\images\ArrowIcon\double_arrow.png OL3Demo\images\ArrowIcon\fourstar.png OL3Demo\images\ArrowIcon\rect_flag.png OL3Demo\images\ArrowIcon\rhombus.png OL3Demo\images\ArrowIcon\SameDirectionClosedangleCompass.png OL3Demo\images\ArrowIcon\singleLine_arrow.png OL3Demo\images\ArrowIcon\smooth_curve.png OL3Demo\images\ArrowIcon\stright_arrow.png OL3Demo\images\ArrowIcon\tail_arrow.png OL3Demo\images\ArrowIcon\triangle.png OL3Demo\images\ArrowIcon\triangle_flag.png OL3Demo\images\ArrowIcon\VaneCompass.png OL3Demo\images\content\dotted.png OL3Demo\images\label\bj.png OL3Demo\images\label\blueIcon.png OL3Demo\images\label\icon.png OL3Demo\images\label\restaurant.png OL3Demo\images\label\国有企业.png OL3Demo\images\left\app.png OL3Demo\images\left\app_current.png OL3Demo\images\left\channel.png OL3Demo\images\left\channel_current.png OL3Demo\images\left\cloud.png OL3Demo\images\left\cloud_current.png OL3Demo\images\left\custom.png
openlayers demo.zip
07-30
这个"openlayers demo.zip"压缩包提供了一系列的代码示例，旨在帮助新手理解和掌握如何使用OpenLayers进行GIS（地理信息系统）开发。下面，我们将深入探讨OpenLayers的基础知识、关键特性以及如何通过这些示例学习和...
openlayers很多特效demo
07-01
"openlayers很多特效demo" 提供了一系列示例，展示了OpenLayers库在地图渲染、交互和视觉效果方面的各种功能。 1. 地图交互性：OpenLayers 提供了丰富的地图操作功能，如平移、缩放、旋转、测量距离和面积、拖拽...
openlayers发布离线地图DEMO
12-11
本DEMO展示了如何利用OpenLayers发布离线地图，特别是针对瓦片数据的处理。 首先，理解“瓦片地图”是非常关键的。瓦片地图是一种将大型地图分割成小块（通常为256x256像素）图像的技术，这样可以有效地进行分发和...
openlayers发布简易离线地图DEMO
12-06
可直接运行，简易的openlayers发布离线瓦片数据的DEMO，压缩包中包含了一部分地区的街道地图瓦片数据。
openlayers-demo
04-02
openlayers-demo
openlayersdemo.zip
04-29
openlayer 绘制自定义canvas图层，并解地图缩放的时候图层位置不一致的问题。
openlayer打开地图demo
09-11
openlayer打开地图demo
openlayer5 常见功能实例，各种实例封装组件demo
09-23
近期使用openlayers5开发wmts自切地图的加载和切换，自定义样式，要素信息读取加载wmts自定义地图//加载地图；openlay5常见功能实例，各种实例封装组件
openlayers点击获取坐标Demo
08-29
openlayers点击获取坐标Demo ，本地即可运行
第一个OpenLayers5 demo
YYRRMRDN的博客
08-20 570
直接上代码： <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <title>OpenLayers 地图示例&...
html点线面制作,openlayers 添加点线面 Demo（可直接运行）
weixin_35529551的博客
06-26 399
Document几何图形类型：无点线多边形圆正方形var map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({source: new ol.source.OSM()})],view: new ol.View({center: [ 91.1, 30.41],zoom: 4})});var typeSelect = document...
openlayers7列车按照轨迹平滑移动Demo
weixin_41843107的博客
04-29 632
openlayers GIS
openlayers 完整demo
07-08
<title>OpenLayers Demo #map { width: 100%; height: 400px; } <script src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script> <div id="map"></div> // 创建一个地图容器 var map ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值