- Accessible Map
- Advanced Mapbox Vector Tiles
- 高级地图定位
- 地图加载 GIF 动图
- ArcGIS REST Feature Service
- Attributions
- 波段对比度调节
- Bing Maps
- Box Selection
- Canvas Tiles
- CartoDB source example
- Change Tile Layer Style
- Cloud Optimized GeoTIFF (COG)
- Cloud Optimized GeoTIFF (COG) from a Blob
- Clustered Features
- Color Manipulation
- Constrained Extent
- Constrained Zoom
- Custom Animation
- Custom Canvas Tiles
- 自定义圆形渲染
- 自定义控件
- 自定义拖拽上传展示数据(KMZ)
- 自定义拖拽上传展示数据 (MVT 预览)
- 自定义触发器渲染
- 自定义交互
- 地图自定义 dom 元素(element)
- 自定义鹰眼
- 自定义面状图形要素样式
- 自定义瓦片 WMS
- 自定义提示信息
- d3 集成
- 数据瓦片
- 设备定位
- 拖拽加载数据
- 拖拽 Image Vector
- 拖拽,旋转和缩放
- 绘制和修改图形要素(Features)
- 绘制和编辑测地线(Geodesic)圆
- 绘制图形要素(Feature)
- 绘制规则图形
- 动态聚合
- 动画展示数据
- 地震位置聚合图
- 地震位置热力图
- 渲染 KML 中的地震数据
- 自定义图形渲染地震数据
- 可编辑的 ArcGIS REST 图形要素服务
- EPSG:4326
- 导出 PDF 示例
- 范围(Extent)交互
- 外部地图
- 使用 WebGL 过滤图形要素
- 航班飞行动画
- Fractal 渲染
- 自由绘制
- 全屏控件
- 带有扩展element的全屏控件
- 全屏拖拽,旋转,缩放
- Geographic Coordinates
- Geographic Editing
- GeoJSON
- 集成 geojson-vt
- 地理位置
- GeoTIFF 瓦片金字塔
- GeoTIFF with Overviews
- GPX 数据
- 高 DPI WMTS
- 点击容许偏差
- Icon 比例
- Icon 颜色
- Icon 位置修改
- Icon 像素操作
- Icon Sprites with WebGL
- Icon 渲染
- IGC 数据
- IGN WMTS
- IIIF 影像 API
- ArcGIS 图像地图服务
- 图片过滤
- 图像载入事件
- 图像重投影
- 即时渲染 (地理)
- 插值
- 集成 JSTS
- KML
- Layer 裁剪
- 图层组
- 图层 最小/最大 分辨率
- 图层透明度
- 图层鼠标透视
- 图层卷帘
- 图层卷帘 (WebGL)
- 图层层级(Z-Index)
- 图层缩放限制
- 懒加载资源
- 限制图层范围
- 线段箭头
- 载入中旋转动画
- 局部的 OpenStreetMap
- 鼠标放大镜效果
- 地图打印(导出)
- 地图经纬网格
- 地图链接地址
- Mapbox 矢量图层
- Mapbox 矢量瓦片
- Mapbox-gl 图层
- MapGuide Untiled
- 地图点图标动画
- 测量
- 使用矢量样式测量
- 修改图形要素(Features)
- 修改图形要素测试
- 显示鼠标位置
- 地图平移(拖拽)结束事件
- 定位控件
- NDVI from a Sentinel 2 COG
- 动态颜色斜率 NDVI
- NDVI+NDWI from two 16-bit COGs
- OGC 地图瓦片
- OGC 地图瓦片 (地理)
- OGC 矢量瓦片
- OpenStreetMap 重投影
- 带有比例尺控件的 OpenStreetMap 重投影
- OSM 矢量瓦片
- OSM XML
- 覆盖物(Overlay)
- 鹰眼地图控件
- 页面滚动
- 拖拽和页面滚动
- Permalink
- Pinch Zoom
- Popup
- Preload Tiles
- 按比例导出地图
- 投影和比例尺
- 栅格重投影
- 栅格资源
- 区域增长
- Regular Shapes
- Render geometries to a canvas
- Rendering 16-bit NumpyTiles
- Reprojection with EPSG.io Search
- Reusable Source
- Rich Text Labels
- Scale and Rotate using Modify Interaction
- Scale Line
- Sea Level
- Sea Level (with WebGL)
- Select Features
- Select Features by Hover
- Select multiple Features
- Semi-Transparent Layer
- Shaded Relief
- Shaded Relief (with WebGL)
- Shared Views
- Simple Map
- Single Image WMS
- Single Image WMS with Proj4js
- Smoothing lines using Chaikins algorithm
- Snap Interaction
- Sphere Mollweide
- Stamen Tiles
- Static Image
- Street Labels
- Style renderer
- Styling feature with CanvasGradient or CanvasPattern
- SVG Layer
- Synthetic Lines
- Synthetic Points
- Teleporting Maps
- Tile Load Events
- Tile Transitions
- Tiled ArcGIS MapServer
- Tiled WMS
- Tiled WMS Wrapping
- TileJSON
- Timezones in KML
- Tissot Indicatrix
- TopoJSON
- topolis integration
- Tracing around a polygon
- Translate Features
- turf.js
- UTFGrid
- Vector Clipping Layer
- Vector Image Layer
- Vector Label Decluttering
- Vector Labels
- Vector Labels - Justify Text
- Vector Layer
- Vector Layer Hit Detection
- Vector Tile Info
- Vector Tile Selection
- Vector tiles created from a Mapbox Style object
- Vector tiles in EPSG:4326
- Vector tiles rendered in an offscreen canvas
- View Animation
- View Min-Zoom
- View Padding
- View Rotation
- WebGL points layer
- WebGL Tile Layer Styles
- WebGL Tiles
- WebGL Vector Layer
- WFS
- WFS - GetFeature
- WFS with geographic coordinates
- Wind Arrows
- WKB
- WKT
- WMS 512x256 Tiles
- WMS Capabilities Parsing
- WMS GetFeatureInfo (Image Layer)
- WMS GetFeatureInfo (Layers)
- WMS GetFeatureInfo (Tile Layer)
- WMS GetLegendGraphic
- WMS 时序渲染
- 无投影 WMS
- WMTS
- WMTS Capabilities 解析
- 从 Capabilities 加载 WMTS
- WMTS 瓦片转换
- XYZ
- XYZ Esri
- XYZ 视网膜瓦片
- 缩放滑块
- Zoomify
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
Vector Image Layer
Example of rendering vector data as an image layer.
This example uses ol/layer/VectorImage
for faster rendering during interaction and animations, at the cost of less accurate rendering.
main.js
import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import VectorImageLayer from 'ol/layer/VectorImage';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import {Fill, Stroke, Style, Text} from 'ol/style';
const style = new Style({
fill: new Fill({
color: 'rgba(255, 255, 255, 0.6)',
}),
stroke: new Stroke({
color: '#319FD3',
width: 1,
}),
text: new Text(),
});
const map = new Map({
layers: [
new VectorImageLayer({
imageRatio: 2,
source: new VectorSource({
url: 'data/geojson/countries.geojson',
format: new GeoJSON(),
}),
style: function (feature) {
style.getText().setText(feature.get('name'));
return style;
},
}),
],
target: 'map',
view: new View({
center: [0, 0],
zoom: 1,
}),
});
const featureOverlay = new VectorLayer({
source: new VectorSource(),
map: map,
style: new Style({
stroke: new Stroke({
color: '#f00',
width: 1,
}),
fill: new Fill({
color: 'rgba(255,0,0,0.1)',
}),
}),
});
let highlight;
const displayFeatureInfo = function (pixel) {
map
.getLayers()
.item(0)
.getFeatures(pixel)
.then(function (features) {
const feature = features.length > 0 ? features[0] : undefined;
const info = document.getElementById('info');
if (feature) {
info.innerHTML = feature.getId() + ': ' + feature.get('name');
} else {
info.innerHTML = ' ';
}
if (feature !== highlight) {
if (highlight) {
featureOverlay.getSource().removeFeature(highlight);
}
if (feature) {
featureOverlay.getSource().addFeature(feature);
}
highlight = feature;
}
});
};
map.on('pointermove', function (evt) {
if (!evt.dragging) {
displayFeatureInfo(evt.pixel);
}
});
map.on('click', function (evt) {
displayFeatureInfo(evt.pixel);
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vector Image Layer</title>
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
<script src="https://unpkg.com/elm-pep"></script>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="./resources/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder,Number.isInteger"></script>
<style>
.map {
width: 100%;
height:400px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<div id="info"> </div>
<script src="main.js"></script>
</body>
</html>
package.json
{
"name": "image-vector-layer",
"dependencies": {
"ol": "7.1.0"
},
"devDependencies": {
"parcel": "^2.0.0-beta.1"
},
"scripts": {
"start": "parcel index.html",
"build": "parcel build --public-url . index.html"
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
不好意思,暂无微信群!
老哥 可有微信群 搞个微信群啊