Openlayers6 Examples学习笔记（2）

最新推荐文章于 2024-05-14 09:35:38 发布
最新推荐文章于 2024-05-14 09:35:38 发布
阅读量516 收藏 4
点赞数
分类专栏： WebGIS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hequhecong10857/article/details/103870529
版权

文章目录

Tiled ArcGIS MapServer

笔记：
加载ArcGIS Server发布的瓦片服务

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import {OSM, TileArcGISRest} from 'ol/source';

var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
    'Specialty/ESRI_StateCityHighway_USA/MapServer';

var layers = [
  new TileLayer({
    source: new OSM()
  }),
  new TileLayer({
    extent: [-13884991, 2870341, -7455066, 6338219],
    source: new TileArcGISRest({
      url: url
    })
  })
];
var map = new Map({
  layers: layers,
  target: 'map',
  view: new View({
    center: [-10997148, 4569099],
    zoom: 4
  })
});

Canvas Tiles（地图网格）

效果：
在这里插入图片描述
笔记：
加载地图网格信息

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import {OSM, TileDebug} from 'ol/source';


var map = new Map({
  layers: [
    new TileLayer({
      source: new OSM()
    }),
    new TileLayer({
      source: new TileDebug()
    })
  ],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 1
  })
});

Draw and Modify Features

效果：
在这里插入图片描述
笔记：
在编辑要素时，开启捕捉模式，便于编辑要素。

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {Draw, Modify, Snap} from 'ol/interaction';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {OSM, Vector as VectorSource} from 'ol/source';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';

var raster = new TileLayer({
  source: new OSM()
});

var source = new VectorSource();
var vector = new VectorLayer({
  source: source,
  style: new Style({
    fill: new Fill({
      color: 'rgba(255, 255, 255, 0.2)'
    }),
    stroke: new Stroke({
      color: '#ffcc33',
      width: 2
    }),
    image: new CircleStyle({
      radius: 7,
      fill: new Fill({
        color: '#ffcc33'
      })
    })
  })
});

var map = new Map({
  layers: [raster, vector],
  target: 'map',
  view: new View({
    center: [-11000000, 4600000],
    zoom: 4
  })
});

var modify = new Modify({source: source});
map.addInteraction(modify);

var draw, snap; // global so we can remove them later
var typeSelect = document.getElementById('type');

function addInteractions() {
  draw = new Draw({
    source: source,
    type: typeSelect.value
  });
  map.addInteraction(draw);
  // 开启捕捉模式
  snap = new Snap({source: source});
  map.addInteraction(snap);

}

/**
 * Handle change event.
 */
typeSelect.onchange = function() {
  map.removeInteraction(draw);
  map.removeInteraction(snap);
  addInteractions();
};

addInteractions();

Dynamic Data

效果：
在这里插入图片描述
笔记：
展示动态数据

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {MultiPoint, Point} from 'ol/geom';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
import {getVectorContext} from 'ol/render';

var tileLayer = new TileLayer({
  source: new OSM()
});

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

var imageStyle = new Style({
  image: new CircleStyle({
    radius: 5,
    fill: new Fill({color: 'yellow'}),
    stroke: new Stroke({color: 'red', width: 1})
  })
});

var headInnerImageStyle = new Style({
  image: new CircleStyle({
    radius: 2,
    fill: new Fill({color: 'blue'})
  })
});

var headOuterImageStyle = new Style({
  image: new CircleStyle({
    radius: 5,
    fill: new Fill({color: 'black'})
  })
});

var n = 200;
var omegaTheta = 30000; // Rotation period in ms
var R = 7e6;
var r = 2e6;
var p = 2e6;
tileLayer.on('postrender', function(event) {
  var vectorContext = getVectorContext(event);
  var frameState = event.frameState;
  var theta = 2 * Math.PI * frameState.time / omegaTheta;
  var coordinates = [];
  var i;
  for (i = 0; i < n; ++i) {
    var t = theta + 2 * Math.PI * i / n;
    var x = (R + r) * Math.cos(t) + p * Math.cos((R + r) * t / r);
    var y = (R + r) * Math.sin(t) + p * Math.sin((R + r) * t / r);
    coordinates.push([x, y]);
  }
  vectorContext.setStyle(imageStyle);
  vectorContext.drawGeometry(new MultiPoint(coordinates));

  // headPoint的坐标一直在变化，从而展示出数据的动态变化
  var headPoint = new Point(coordinates[coordinates.length - 1]);
  // console.log(headPoint);

  vectorContext.setStyle(headOuterImageStyle);
  vectorContext.drawGeometry(headPoint);

  vectorContext.setStyle(headInnerImageStyle);
  vectorContext.drawGeometry(headPoint);

  map.render();
});
map.render();

Earthquakes with custom symbols

在这里插入图片描述

  1. 本地数据的加载
  2. 样式函数
  3. feature的属性信息获取
  4. 自定义符号的路径，通过canvas绘制
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import KML from 'ol/format/KML';
import Polygon from 'ol/geom/Polygon';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {toContext} from 'ol/render';
import Stamen from 'ol/source/Stamen';
import VectorSource from 'ol/source/Vector';
import {Fill, Icon, Stroke, Style} from 'ol/style';

// 符号的绘制路径坐标
var symbol = [[0, 0], [4, 2], [6, 0], [10, 5], [6, 3], [4, 5], [0, 0]];
var scale;
var scaleFunction = function(coordinate) {
  return [coordinate[0] * scale, coordinate[1] * scale];
};

var styleCache = {};
var styleFunction = function(feature) {
  // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
  // standards-violating <magnitude> tag in each Placemark.  We extract it from
  // the Placemark's name instead.
  // 读取name属性
  var name = feature.get('name');
  // 读取震级
  var magnitude = parseFloat(name.substr(2));
  // 根据震级设置符号大小
  var size = parseInt(10 + 40 * (magnitude - 5), 10);
  // 设置缩放比例
  scale = size / 10;
  var style = styleCache[size];
  if (!style) {
    var canvas = document.createElement('canvas');
    // 获取canvas画布
    var vectorContext = toContext(canvas.getContext('2d'),
      {size: [size, size], pixelRatio: 1});
    vectorContext.setStyle(new Style({
      fill: new Fill({color: 'rgba(255, 153, 0, 0.4)'}),
      stroke: new Stroke({color: 'rgba(255, 204, 0, 0.2)', width: 2})
    }));
    vectorContext.drawGeometry(new Polygon([symbol.map(scaleFunction)]));
    style = new Style({
      image: new Icon({
        img: canvas,
        imgSize: [size, size],
        rotation: 1.2
      })
    });
    styleCache[size] = style;
  }
  return style;
};

var vector = new VectorLayer({
  source: new VectorSource({
    // url需要加上require才能加载本地的kml文件
    url: require('./data/kml/2012_Earthquakes_Mag5.kml'),
    format: new KML({
      extractStyles: false
    })
  }),
  style: styleFunction
});

var raster = new TileLayer({
  source: new Stamen({
    layer: 'toner'
  })
});

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

Draw Shapes（绘制不同形状的几何图形）

在这里插入图片描述

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import Polygon from 'ol/geom/Polygon';
import Draw, {createRegularPolygon, createBox} from 'ol/interaction/Draw';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {OSM, Vector as VectorSource} from 'ol/source';

var raster = new TileLayer({
  source: new OSM()
});

var source = new VectorSource({wrapX: false});

var vector = new VectorLayer({
  source: source
});

var map = new Map({
  layers: [raster, vector],
  target: 'map',
  view: new View({
    center: [-11000000, 4600000],
    zoom: 4
  })
});

var typeSelect = document.getElementById('type');

var draw; // global so we can remove it later
function addInteraction() {
  var value = typeSelect.value;
  if (value !== 'None') {
    var geometryFunction;
    if (value === 'Square') {
      value = 'Circle';
      geometryFunction = createRegularPolygon(4);
    } else if (value === 'Box') {
      value = 'Circle';
      geometryFunction = createBox();
    } else if (value === 'Star') {
      value = 'Circle';
      geometryFunction = function(coordinates, geometry) {
        var center = coordinates[0];
        var last = coordinates[1];
        var dx = center[0] - last[0];
        var dy = center[1] - last[1];
        var radius = Math.sqrt(dx * dx + dy * dy);
        var rotation = Math.atan2(dy, dx);
        var newCoordinates = [];
        var numPoints = 12;
        for (var i = 0; i < numPoints; ++i) {
          var angle = rotation + i * 2 * Math.PI / numPoints;
          var fraction = i % 2 === 0 ? 1 : 0.5;
          var offsetX = radius * fraction * Math.cos(angle);
          var offsetY = radius * fraction * Math.sin(angle);
          newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
        }
        newCoordinates.push(newCoordinates[0].slice());
        if (!geometry) {
          geometry = new Polygon([newCoordinates]);
        } else {
          geometry.setCoordinates([newCoordinates]);
        }
        return geometry;
      };
    }
    draw = new Draw({
      source: source,
      type: value,
      geometryFunction: geometryFunction
    });
    map.addInteraction(draw);
  }
}


/**
 * Handle change event.
 */
typeSelect.onchange = function() {
  map.removeInteraction(draw);
  addInteraction();
};

addInteraction();
何去何从2857
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
openlayers6学习笔记
05-25
openlayers6学习笔记，节省你的学习成本
openlayers3.0学习笔记
05-25
openlayers3.0学习笔记，节省你的学习成本
Openlayers6 Examples学习笔记（4）
hequhecong10857的博客
01-11 1960
文章目录turf.js turf.js fetch请求在线数据 显示turf.js与OpenLayers 集成的示例。turf.js函数along用于在街道上每200米显示一个标记。 本示例使用的lineDistance函数在高版本turf中已经不再使用，此处，直接通过script标签引入，若npm安装，需要注意版本号。 import 'ol/ol.css'; import Map from...
2024年最全openLayers6系列理论基础——Layer篇(2)，2024年最新前端面试项目经历
最新发布
wang688699的博客
05-14 284
前端字节跳动真题解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】常用options：| 名称 | 类型 | 描述 |options图层选项。| 名称 | 类型 | 描述 |className| 字符串 （默认为“ ol-layer”） |设置为layer元素的CSS类名称。opacity| 数字 （默认为1） |不透明度（0，1）。visible| 布尔值 （默认为true） |能见度。extent模块：ol /范围〜范围图层渲染的边界范围。
Openlayers6 Examples学习笔记（13）
hequhecong10857的博客
01-14 610
文章目录Lazy Source（按需加载数据源）Advanced Mapbox Vector Tiles（高级Mapbox矢量瓦片）Mapbox Vector Tiles（Mapbox矢量瓦片）Timezones in KML（KML时区）Measure（测量）OSM Vector Tiles（OSM矢量瓦片） Lazy Source（按需加载数据源） 案例链接 Advanced Mapbox ...
Openlayers6 Examples学习笔记（9）
hequhecong10857的博客
01-13 407
TopoJSON（加载TopoJSON数据） 案例链接
Openlayers6 Examples学习笔记（6）
hequhecong10857的博客
01-11 956
文章目录Interaction Options（互动选项）Limited Layer Extent（限制图层范围）Layer Spy（地图探查）Layer Swipe（卷帘地图）Layer Zoom Limits（图层缩放限制）Localized OpenStreetMap（本地化的OSM）Layer Z-Index（图层的Z-Index）LineString Arrows（绘制带有箭头的线）Ma...
Openlayers6 Examples学习笔记（5）
hequhecong10857的博客
01-11 799
文章目录View Animation（视图动画）GPX DataMap Graticule（地图网格）Earthquakes Heatmap（地震震级热力图）Hit ToleranceIcon Colors（自定义图片颜色）Vector Layer Hit Detection（矢量图层高亮）Icon Symbolizer（图标符号）Vector Image Layer（图层高亮）GeoJSON（加...
Openlayers6 Examples学习笔记（7）
hequhecong10857的博客
01-11 459
文章目录View Min-Zoom（自适应最小缩放层级）Modify Features（修改矢量要素交互）Moveend Event（地图移动结束事件）Mouse Position（鼠标位置控件）Navigation Controls（缩放至固定范围控件）Overview Map Control（鹰眼地图控件）Magnify（地图放大镜）Preload Tiles（预加载地图）自定义多边形样式Ra...
Openlayers6 Examples学习笔记（8）
hequhecong10857的博客
01-11 324
文章目录Select Features（选中要素）Scale Line（比例尺控件）Select Features by Hover（鼠标悬浮高亮选中要素）Static Image（加载静态图片）Snap Interaction（捕捉交互集成）Stamen Tiles（Stamen瓦片地图）Synthetic Lines（合成线）Street Labels（路线标注-沿路径轨迹）Teleporti...
Openlayers6 Examples学习笔记（10）
hequhecong10857的博客
01-13 721
文章目录WFS - GetFeature（获取要素，查询过滤）WMS GetLegendGraphic（获取图例）WMS 512x256 TilesSingle Image WMSWMTS（加载WMTS图层）WMS Time（时间动态更新数据）重点Tiled WMS Wrapping（WMS瓦片包裹）WMS without Projection（加载未知投影WMS数据）WMTS Tile Tran...
Openlayers6 Examples学习笔记（11）
hequhecong10857的博客
01-13 530
文章目录XYZ（加载XYZ图层）Vector Label Decluttering（矢量标注冲突优化）重点Constrained Zoom（限制图层缩放）XYZ EsriFreehand Drawing（手绘模式）XYZ Retina Tiles（XYZ视网膜瓦片）WKT（加载WKT数据）Box Selection（框选）Custom Controls（自定义控件）Custom Tooltips（...
openlayers 3 examples
06-17
"openlayers 3 examples" 提供了一系列示例代码，帮助开发者更好地理解和学习如何利用OpenLayers 3构建地图应用。 1. **地图初始化与视图设置**： - OpenLayers 3 首先需要创建一个地图实例，指定容器元素和初始...
OpenLayers6.rar
04-03
这个文件中包含了 Openlayers6.2.1 版本的部分功能示例代码，详细教程请参考文章：https://blog.csdn.net/Supreme_Sir/article/details/105123438
Mapbox常用表达式整理（3）
hequhecong10857的博客
04-04 7514
文章目录表达式参考Decision 判定操作符!, !=, <, <=, ==, >, >=（高频率使用）all 逻辑与（高频率使用）any 逻辑或case 条件 （高频率使用）match （高频率使用）Ramps, scales, curvesinterpolate（高频率使用）step（高频率使用）String 字符串类型操作符concatdowncaseupcase 表达式参考 Decision 判定操作符 !, !=, <, <=, ==, >, >=
高德地图 Web JS API示例学习笔记（12）——Object3D 图形（通用接口、立体Mesh、线Line）
hequhecong10857的博客
12-26 5165
通用接口 Object3D 的添加/移除 对 Object3D 对象进行添加和移除的基本操作。 // 添加 Object3DLayer 图层，用于添加 3DObject 对象 var object3Dlayer = new AMap.Object3DLayer(); map.add(object3Dlayer); // 以不规则棱柱体 Prism 为例，添加至 3DObjectLayer 图层中 ...
Mapbox GL 加载GeoServer发布的WMS地图服务及点击查询
hequhecong10857的博客
02-20 4955
文章目录1. GeoServer发布WMS地图服务2. Mapbox GL 加载WMS source3. WMS地图服务点击查询4. 完整代码5. 参考文档 1. GeoServer发布WMS地图服务 GeoServer发布地图服务的常规操作： 创建工作区 添加新的数据存储 添加新的图层 不会的可自行在网上搜索，此处不再赘述。需要注意以下几点： 添加新的数据存储时，需要注意属性表数据的编码格式，如果包含中文字符，需要选择GB2312或者GBK 添加新的图层时，需要正确定义待发布图层的坐标系，此处强制
OpenLayers2入门指南：构建跨浏览器地图应用
OpenLayers2是一个在GIS（地理信息系统）开发领域中占据重要地位的开源项目，它允许开发者创建、优化并部署跨浏览器的精美网络地图。本教程是针对OpenLayers 2.10版本的入门指南，由Erik Hazzard编著，遵循官方出版...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值