openlayers4官方例子学习---DAY2

最新推荐文章于 2021-11-25 20:33:26 发布
最新推荐文章于 2021-11-25 20:33:26 发布
阅读量190 收藏
点赞数
原文链接：http://www.cnblogs.com/chen1234/p/7422042.html
版权

加载OSM地图

 <body>
    <a class="skiplink" href="#map">Go to map</a>
    <div id="map" class="map" tabindex="0"></div>
    <button id="zoom-out">Zoom out</button>
    <button id="zoom-in">Zoom in</button>
    <script>
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
          })
        }),
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

      document.getElementById('zoom-out').onclick = function() {//缩小
        var view = map.getView();
        var zoom = view.getZoom();
        view.setZoom(zoom - 1);
      };

      document.getElementById('zoom-in').onclick = function() {//放大
        var view = map.getView();
        var zoom = view.getZoom();
        view.setZoom(zoom + 1);
      };
    </script>
  </body>

使用一个动态ArcGIS REST MapService，这个源类型支持地图和图像服务，动态 ArcGIS服务。

<div id="map" class="map"></div>
    <script>
      var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
          'Specialty/ESRI_StateCityHighway_USA/MapServer';

      var layers = [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
        new ol.layer.Image({
          source: new ol.source.ImageArcGISRest({
            ratio: 1,
            params: {},
            url: url
          })
        })
      ];
      var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          center: [-10997148, 4569099],
          zoom: 4
        })
      });
    </script>

加载Tiled ArcGIS MapServer

 <div id="map" class="map"></div>
    <script>
      var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
          'Specialty/ESRI_StateCityHighway_USA/MapServer';

      var layers = [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
        new ol.layer.Tile({
          extent: [-13884991, 2870341, -7455066, 6338219],
          source: new ol.source.TileArcGISRest({
            url: url
          })
        })
      ];
      var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          center: [-10997148, 4569099],
          zoom: 4
        })
      });
    </script>

加载bing map

http://openlayers.org/en/latest/examples/bing-maps.html

<body>
     <div id="map" class="map"></div>
     <select id="layer-select">
       <option value="Aerial">Aerial</option>
       <option value="AerialWithLabels" selected>Aerial with labels</option>
       <option value="Road">Road (static)</option>
       <option value="RoadOnDemand">Road (dynamic)</option>
       <option value="collinsBart">Collins Bart</option>
       <option value="ordnanceSurvey">Ordnance Survey</option>
     </select>
    <script>
      var styles = [
        'Road',
        'RoadOnDemand',
        'Aerial',
        'AerialWithLabels',
        'collinsBart',
        'ordnanceSurvey'
      ];
      var layers = [];
      var i, ii;
      for (i = 0, ii = styles.length; i < ii; ++i) {
        layers.push(new ol.layer.Tile({
          visible: false,
          preload: Infinity,
          source: new ol.source.BingMaps({
            key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here',
            imagerySet: styles[i]//图像集
            // use maxZoom 19 to see stretched tiles instead of the BingMaps
            // "no photos at this zoom level" tiles
            // maxZoom: 19
          })
        }));
      }
      var map = new ol.Map({
        layers: layers,
        // Improve user experience by loading tiles while dragging/zooming. Will make
        // zooming choppy on mobile or slow devices.
        loadTilesWhileInteracting: true,
        target: 'map',
        view: new ol.View({
          center: [-6655.5402445057125, 6709968.258934638],
          zoom: 13
        })
      });
//下面的方法可借鉴
var select = document.getElementById('layer-select');
      function onChange() {
        var style = select.value;//将被选中的ratio设为可见
        for (var i = 0, ii = layers.length; i < ii; ++i) {
          layers[i].setVisible(styles[i] === style);
        }
      }
      select.addEventListener('change', onChange);
      onChange();
    </script>
  </body>

加载CartoDB source

CartoDB是一个开源的允许你在web上存储和虚拟化地理数据的工具，这个数据库通过灵活方式让开发者更容易的、创建地图和设计自己的应用。

http://openlayers.org/en/latest/examples/cartodb.html

 <body>
    <div class="row-fluid">
      <div class="span12">
        <div id="map" class="map"></div>
        <div>
        <form class="form-horizontal">
          <label>
            Show countries larger than
            <select id="country-area" class="form-control">
              <option value="0" default>0 ㎢</option>
              <option value="5000">5000 ㎢</option>
              <option value="10000">10000 ㎢</option>
              <option value="50000">50000 ㎢</option>
              <option value="100000">100000 ㎢</option>
            </select>
          </label>
        </form>
      </div>
    </div>
    <script>
      var mapConfig = {
        'layers': [{
          'type': 'cartodb',
          'options': {
            'cartocss_version': '2.1.1',
            'cartocss': '#layer { polygon-fill: #F00; }',
            'sql': 'select * from european_countries_e where area > 0'
          }
        }]
      };

      var cartoDBSource = new ol.source.CartoDB({
        account: 'documentation',
        config: mapConfig
      });

      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          new ol.layer.Tile({
            source: cartoDBSource
          })
        ],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

      function setArea(n) {
        mapConfig.layers[0].options.sql =
            'select * from european_countries_e where area > ' + n;
        cartoDBSource.setConfig(mapConfig);
      }


      document.getElementById('country-area').addEventListener('change', function() {
        setArea(this.value);
      });
    </script>
  </body>

做点的聚类

http://openlayers.org/en/latest/examples/cluster.html

<body>
    <div id="map" class="map"></div>
    <form>
      <label>cluster distance</label>
      <input id="distance" type="range" min="0" max="100" step="1" value="40"/>//注意这里的设置
    </form>
    <script>
      var distance = document.getElementById('distance');

      var count = 20000;
      var features = new Array(count);
      var e = 4500000;
      for (var i = 0; i < count; ++i) {
        var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
        features[i] = new ol.Feature(new ol.geom.Point(coordinates));
      }//随机设置2000个点的坐标

      var source = new ol.source.Vector({
        features: features
      });

      var clusterSource = new ol.source.Cluster({
        distance: parseInt(distance.value, 10),
        source: source
      });

      var styleCache = {};
      var clusters = new ol.layer.Vector({
        source: clusterSource,
        style: function(feature) {
          var size = feature.get('features').length;
          var style = styleCache[size];
          if (!style) {
            style = new ol.style.Style({
              image: new ol.style.Circle({
                radius: 10,
                stroke: new ol.style.Stroke({
                  color: '#fff'
                }),
                fill: new ol.style.Fill({
                  color: '#3399CC'
                })
              }),
              text: new ol.style.Text({
                text: size.toString(),
                fill: new ol.style.Fill({
                  color: '#fff'
                })
              })
            });
            styleCache[size] = style;
          }
          return style;
        }
      });

      var raster = new ol.layer.Tile({
        source: new ol.source.OSM()
      });

      var map = new ol.Map({
        layers: [raster, clusters],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

      distance.addEventListener('input', function() {
        clusterSource.setDistance(parseInt(distance.value, 10));
      });
    </script>

 

转载于:https://www.cnblogs.com/chen1234/p/7422042.html

weixin_30718391
关注
Openlayers入门教程 --- 万字长篇
大剑师兰特的GIS世界
03-13 5665
也许你还不熟悉Openlayers，也许你是一个Openlayers小白，零基础没关系，这篇文章提供最基础的 Openlayers 教程，简单易学，贯穿整个Openlayers 知识体系。读完本文，您将会对 Openlayers 有一个全新的认识。
OpenLayers4案例
10-31
OpenLayers4简单案例，采用Layui进行页面美化，入门级简单案例。
openlayers4 的示例 test.zip
10-31
openlayers4的一些示例，都是一些入门的简单例子，包括聚合显示，点、线、面的单击事件，右键事件显示菜单
【openlayers 4 示例】
dragoonnet的专栏
11-25 162
openlayer 4.6 demo，几乎涵盖所有使用功能。包括点击事件，创建marker，点击marker事件，获取鼠标坐标，获取中心坐标，弹出pop等。
读书笔记(1) OpenLayers介绍和第一个例子
weixin_34364135的博客
07-19 191
什么是OpenLayers? OpenLayers是用于制作交互式Web地图的开源客户端JavaScript类库，制作的地图几乎可以在所有的浏览器中查看。因为是客户端类库，它不需要特殊的服务器端软件或配置，甚至不用下载任何东西就可以使用它。OpenLayers最初由Metacarta开发，现在它已经成为一个拥有众多开发者和帮助社区的成熟、流行的框架。 下载OpenLayers OpenLay...
openlayers4
weixin_38324739的博客
04-18 329
加载GeoJSON文件显示地图区域 openlayers4版本，其他版本可能不同 1. 直接加载GeoJSON文件【没有过滤数据】，显示区域【遮罩效果】 var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ url: "http://localhost:8080/openLayers...
openlayers-官方完整包-v4.6.5
11-21
OpenLayers 是一个强大的开源...总的来说，OpenLayers-官方完整包-v4.6.5是一个全面的GIS开发工具，包含了开发地图应用所需的全部组件和资源。通过深入研究这个包，开发者可以构建出功能强大、交互丰富的地图应用。
Openlayers 简单实例4
11-03
Openlayers 简单实例4 工具条放在图外
openlayers-978-1-7852-8775-6:OpenLayers 3.x Cookbook - 第二版
05-30
《OpenLayers 3.x Cookbook - 第二版》是关于JavaScript地图库OpenLayers 3的一本实战指南...书中的实例代码（如压缩包中的"openlayers-978-1-7852-8775-6-main"）将有助于加深理解，并提供直接应用于项目开发的参考。
Openlayers扩展插件ol-ext ，2022年4月版本v3.2.23
04-11
OpenLayers 是一个流行的开源JavaScript库，用于在Web浏览器中创建交互式地图应用。它支持多种数据源和图层类型，提供了丰富的地图操作功能。而ol-ext是针对OpenLayers的一个扩展插件，它增加了许多额外的功能和视觉...
Openlayers案例4——地图单击缩放平移复位
peanut2的博客
01-28 1189
Openlayers案例4——地图单击缩放平移复位 代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>地图单击缩放平移复位</title> <link rel="s
OpenLayers4地图实例-功能齐全
weixin_30549657的博客
02-10 663
网址：http://api.rivermap.cn/openlayers4/map.min.html 标注 工具 转载于:https://www.cnblogs.com/boonya/p/10359247.html
OpenLayers实战案例教程
08-02
NULL 博文链接：https://375537364.iteye.com/blog/1962284
openlayers的各种例子
10-14
OpenLayers 是由MetaCarta公司开发的，用于WebGIS客户端的 JavaScript包，目前的最高版本是2.5 V，通过BSD License 发行。它实现访问地理空间数据的方法都符合行业标准，比如 OpenGIS的WMS和WFS规范， OpenLayers采用纯面向对象的JavaScript方式开发，同时借用了Prototype框架和 Rico库的一些组件。
openlayers案例demo（详细注释）
01-22
网上很多案例都不全面，个人整理了一套详细的方案代码加注释，希望能帮到你们，代码简洁，不懂的可以加我的号！
Openlayers 简单实例5
11-03
Openlayers 简单实例5 距离面积量算
openlayers常见实例
weixin_39520640的博客
07-19 3973
http://openlayers.org/en/master/examples/epsg-4326.html – 标尺 http://openlayers.org/en/master/examples/export-map.html – 截图 http://openlayers.org/en/master/examples/export-pdf.html – 导出PDF http://openl...
前端之js-openlayers4
qq_597221342的博客
08-24 768
初识openlayers // 创建地图 new ol.Map({ // 设置地图图层 layers: [ // 创建一个使用Open Street Map地图源的瓦片图层 new ol.layer.Tile({source: new ol.source.OSM()})
Hello Openlayers4
abcdTracy的博客
01-29 625
一、最近在学习openlayers4，ol4是一个用JavaScript写的框架，可以非常简短的展示数据和地图，下面是利用ol4来加载本地谷歌瓦片地图的demo Hello Openlayers4         //加载离线谷歌地形图 var layer = new ol.layer.Tile({     source: new ol.sourc
Openlayer4 - 最好最强大的开源地图引擎
dicha7140的博客
02-22 361
Openlayer4 - 最好最强大的开源地图引擎 # githubhttps://github.com/openlayers/openlayers# 官网http://openlayers.org/# APIhttp://openlayers.org/en/latest/apidoc/index.html# 中文教程http://weilin.me/ol3-primer/ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值