Earthquakes with custom symbols——自定义地震样式
来源:互联网 发布:php短信接口返回空 编辑:程序博客网 时间:2024/06/05 10:34
This example parses a KML file and renders the features as a vector layer. The layer is given a
这个例子解析了一个KML文件并把要素作为矢量图层渲染。这个图层使用了一个自定义的闪电符号和相对于震级的大小来渲染地震位置的样式。
代码:
style
that renders earthquake locations with a custom lightning symbol and a size relative to their magnitude.这个例子解析了一个KML文件并把要素作为矢量图层渲染。这个图层使用了一个自定义的闪电符号和相对于震级的大小来渲染地震位置的样式。
代码:
<!DOCTYPE html><html> <head> <title>Earthquakes with custom symbols</title> <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css"> <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script> </head> <body> <div id="map" class="map"></div> <script> 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. // 2012_Earthquakes_Mag5.kml文件将每个地标的每次地震的震级存储在违规标准<震级>标签中。 // 我们会从地标的名称中提取它。 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 = /** @type {HTMLCanvasElement} */ (document.createElement('canvas')); // 允许在canvas的环境中绘制几何对象 var vectorContext = ol.render.toContext( /** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d')), {size: [size, size], pixelRatio: 1}); // 设置样式 vectorContext.setStyle(new ol.style.Style({ fill: new ol.style.Fill({color: 'rgba(255, 153, 0, 0.4)'}), stroke: new ol.style.Stroke({color: 'rgba(255, 204, 0, 0.2)', width: 2}) })); // 绘制几何体 vectorContext.drawGeometry(new ol.geom.Polygon([symbol.map(scaleFunction)])); style = new ol.style.Style({ image: new ol.style.Icon({ img: canvas, imgSize: [size, size], rotation: 1.2 }) }); styleCache[size] = style; } return style; }; var vector = new ol.layer.Vector({ source: new ol.source.Vector({ url: 'https://openlayers.org/en/v4.2.0/examples/data/kml/2012_Earthquakes_Mag5.kml', format: new ol.format.KML({ extractStyles: false }) }), style: styleFunction }); var raster = new ol.layer.Tile({ source: new ol.source.Stamen({ layer: 'toner' }) }); var map = new ol.Map({ layers: [raster, vector], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); </script> </body></html>
阅读全文
0 0
- Earthquakes with custom symbols——自定义地震样式
- Earthquakes Heatmap——地震热点图
- Autocompletetextview with custom adapter and filter(Autocompletetextview 用户自定义下拉框样式)
- android自定义View_1——Custom Drawing
- Custom Tooltips——自定义工具提示
- Custom Controls——自定义控件
- Custom Icon——自定义图标
- Custom Interactions——自定义交互式控件
- Custom Animation——自定义动画
- Creating Apps With Material Design —— Defining Custom Animations
- Android API——自定义组件(Custom Components)
- AndroidAnnotations——Enhance custom classes 优化自定义类
- AndroidAnnotations——Enhance custom views 优化自定义组件
- AndroidAnnotations——Enhance custom views 优化自定义组件
- android自定义View_0——Create a custom view class
- Elasticsearch custom analyzer with custom pattern(自定义Analyzer的分词pattern)
- Debugging with Symbols
- Android自定义View——自定义样式
- mysql数据库------疑问
- 字符流中第一个不重复的字符
- FastDFS安装、配置、部署(三)-Storage配置详解
- 微信公众号开发之绑定用户数据关系
- jQuery基础介绍
- Earthquakes with custom symbols——自定义地震样式
- 使用Navicat for MySQL设置定时备份数据库和数据恢复
- leetcode 动态规划练习
- arm linux之data abort异常处理
- Git 使用笔记
- Ubuntu解压或压缩zip,tar,tar.gz,tar.bz2的命令
- dialog单选
- 封装一个带toolbar的活动,toolbar只写一次
- c#泛型编程(类,方法,委托)