openlayer

Openlayers 是开源的前端地图框架,基于Javacript开发，免费、开源的前端地图开发库,
可以很容易的开发出WebGIS系统。
链接: 网站主页

它的作用主要是用于展现数据并且提供相应的地图操作工具。

采用HTML5最新的渲染技术Canvas 2D, WebGL,性能极高。采用Javacript ES6最新的语法，可以实现按需导入，非常的轻量级，非适用于移动GIS开发的场景。

Openlayers采用面向对象程序设计（OOP）的思维方法进行设计、开发。把GIS系统中的属性、功能拆分成多个部分，为每一个部分抽象设计出对应的Class(类）。每个Class(类）有自己的属性、自己的行为，通过这些不同的Class(类）相互作用，一起构建了Openlayers的GIS能力。

Openlayers系列（一）之-入门介绍 https://zhuanlan.zhihu.com/p/529043771

简单用例

1.加载kml文件，并修饰例子

<html lang = "en"><head><link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css"><script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script><script src="https://cdn.bootcss.com/openlayers/4.6.5/ol.js"></script><style>html,body {width: 100%;height: 100%;margin: 0px;}.map {width: 100%;height: 100%;margin: 0px;}</style><script src="https://openlayers.org/en/v3.20.1/build/ol.js" type="text/javascript"></script></head><body><div id="map" class="map"><div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%; touch-action: none;"><canvas class="ol-unselectable" style="width: 100%; height: 100%;" width="1920" height="922"></canvas><div class="ol-overlaycontainer"></div><div class="ol-overlaycontainer-stopevent"><div class="ol-zoom ol-unselectable ol-control"><button class="ol-zoom-in" type="button" title="Zoom in">+</button><button class="ol-zoom-out" type="button" title="Zoom out">−</button></div><div class="ol-rotate ol-unselectable ol-control ol-hidden"><button class="ol-rotate-reset" type="button" title="Reset rotation"><span class="ol-compass" style="transform: rotate(0rad);">⇧</span></button></div><div class="ol-attribution ol-unselectable ol-control ol-collapsed"><ul><li style=""><a href="https://openlayers.org/"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAHGAAABxgEXwfpGAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAhNQTFRFAP//AICAgP//AFVVQECAK1VVSbbbYL/fJ05idsTYJFtbbcjbJllmZszWWMTOIFhoHlNiZszTa9DdUcHNHlNlV8XRIVdiasrUHlZjIVZjaMnVH1RlIFRkH1RkH1ZlasvYasvXVsPQH1VkacnVa8vWIVZjIFRjVMPQa8rXIVVkXsXRsNveIFVkIFZlIVVj3eDeh6GmbMvXH1ZkIFRka8rWbMvXIFVkIFVjIFVkbMvWH1VjbMvWIFVlbcvWIFVla8vVIFVkbMvWbMvVH1VkbMvWIFVlbcvWIFVkbcvVbMvWjNPbIFVkU8LPwMzNIFVkbczWIFVkbsvWbMvXIFVkRnB8bcvW2+TkW8XRIFVkIlZlJVloJlpoKlxrLl9tMmJwOWd0Omh1RXF8TneCT3iDUHiDU8LPVMLPVcLPVcPQVsPPVsPQV8PQWMTQWsTQW8TQXMXSXsXRX4SNX8bSYMfTYcfTYsfTY8jUZcfSZsnUaIqTacrVasrVa8jTa8rWbI2VbMvWbcvWdJObdcvUdszUd8vVeJaee87Yfc3WgJyjhqGnitDYjaarldPZnrK2oNbborW5o9bbo9fbpLa6q9ndrL3ArtndscDDutzfu8fJwN7gwt7gxc/QyuHhy+HizeHi0NfX0+Pj19zb1+Tj2uXk29/e3uLg3+Lh3+bl4uXj4ufl4+fl5Ofl5ufl5ujm5+jmySDnBAAAAFp0Uk5TAAECAgMEBAYHCA0NDg4UGRogIiMmKSssLzU7PkJJT1JTVFliY2hrdHZ3foSFhYeJjY2QkpugqbG1tre5w8zQ09XY3uXn6+zx8vT09vf4+Pj5+fr6/P39/f3+gz7SsAAAAVVJREFUOMtjYKA7EBDnwCPLrObS1BRiLoJLnte6CQy8FLHLCzs2QUG4FjZ5GbcmBDDjxJBXDWxCBrb8aM4zbkIDzpLYnAcE9VXlJSWlZRU13koIeW57mGx5XjoMZEUqwxWYQaQbSzLSkYGfKFSe0QMsX5WbjgY0YS4MBplemI4BdGBW+DQ11eZiymfqQuXZIjqwyadPNoSZ4L+0FVM6e+oGI6g8a9iKNT3o8kVzNkzRg5lgl7p4wyRUL9Yt2jAxVh6mQCogae6GmflI8p0r13VFWTHBQ0rWPW7ahgWVcPm+9cuLoyy4kCJDzCm6d8PSFoh0zvQNC5OjDJhQopPPJqph1doJBUD5tnkbZiUEqaCnB3bTqLTFG1bPn71kw4b+GFdpLElKIzRxxgYgWNYc5SCENVHKeUaltHdXx0dZ8uBI1hJ2UUDgq82CM2MwKeibqAvSO7MCABq0wXEPiqWEAAAAAElFTkSuQmCC"></a></li><li>© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.</li></ul><button type="button" title="Attributions"><span>i</span></button></div></div></div></div><script type="module">//箭头var arrow = "https://github.com/frogfans/Openlayer3-LineString/blob/master/image/arrow.png?raw=true";//起始位置var center = [103.9271879196, 30.7462617980];//标记数据集var source = new ol.source.Vector();//获取样式var styleFunction = function(feature) {var geometry = feature.getGeometry();//线段样式var styles = [new ol.style.Style({fill: new ol.style.Fill({color: '#0044CC'}),stroke: new ol.style.Stroke({lineDash: [1, 3, 5],width: 2,color: [255, 0, 0, 1]})})];//箭头样式geometry.forEachSegment(function(start, end) {var arrowLonLat = [(end[0] + start[0]) / 2, (end[1] + start[1]) / 2];var dx = end[0] - start[0];var dy = end[1] - start[1];var rotation = Math.atan2(dy, dx);styles.push(new ol.style.Style({geometry: new ol.geom.Point(arrowLonLat),image: new ol.style.Icon({src: arrow,anchor: [0.75, 0.5],rotateWithView: true,rotation: -rotation})}));});return styles;};//标记层var layer = new ol.layer.Vector({source: new ol.source.Vector()});//散列点数组var coordinate = new Array();//散列点var coordinate1 = [104.1005229950, 30.6743128087];var coordinate2 = [103.9271879196, 30.7462617980];var coordinate3 = [103.6227035522, 30.9932085864];var coordinate4 = [103.5752069950, 31.4663367378];var coordinate5 = [103.4307861328, 30.1941019446];var coordinate6 = [106.4500522614, 29.5811456252];var coordinate7 = [106.5885615349, 29.5679608922];var coordinate8 = [107.7666950226, 29.4161988273];var coordinate9 = [118.1862562895, 24.4891501310];var coordinate10 = [118.1982564926, 24.4947641146];coordinate.push(coordinate1);coordinate.push(coordinate2);coordinate.push(coordinate3);coordinate.push(coordinate4);coordinate.push(coordinate5);coordinate.push(coordinate6);coordinate.push(coordinate7);coordinate.push(coordinate8);coordinate.push(coordinate9);coordinate.push(coordinate10);var geometry = new ol.geom.LineString();for (var i = 0; i < coordinate.length; i++) {geometry.appendCoordinate(ol.proj.transform(coordinate[i], 'EPSG:4326', 'EPSG:3857'));// 创建一个Feature，并设置好在地图上的位置var anchor = new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform(coordinate[i], 'EPSG:4326', 'EPSG:3857'))});// 设置样式，在样式中就可以设置图标anchor.setStyle(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'})})}));// 添加到之前的创建的layer中去layer.getSource().addFeature(anchor);}var feature = new ol.Feature({geometry: geometry});source.addFeature(feature);//标记点集var vector = new ol.layer.Vector({source: source,style: styleFunction});//地图层var raster = new ol.layer.Tile({source: new ol.source.OSM()});
/*const vector1 = new ol.source.Vector({source: new ol.({url: 'Floor_2d_1_1665830172.kml',format: new ol.format.KML({extractStyles: false,}),}),style: styleFunction,
});*/var vectorSource = new ol.source.Vector({//1.通过GeoServer生成的KML文件，保存到此网页文件所在的目录//2.也可以直接使用生成这个文件的链接，动态生成数据文件url : 'Floor_2d_1_1665830172.kml',format : new ol.format.KML()});var vectorLayer = new ol.layer.Vector({source : vectorSource});//总图层var map = new ol.Map({//layers: [raster, vector, layer,vectorLayer],layers: [vectorLayer],target: 'map',view: new ol.View({center: ol.proj.transform(center, 'EPSG:4326', 'EPSG:3857'),zoom: 5})});</script></body>
</html>

openlayers前端地图框架相关推荐

WebGIS常用的前端地图框架
WebGIS常用的前端地图框架 Leaflet Leaflet 是最著名的前端地图可视化库,它开源.体积小.结构清晰.简单易用. Mapbox GL JS Mapbox GL JS 是目前最新潮的前端 ...
前端常用的地图框架（webGIS）
1. Leaflet Leaflet 是最著名的前端地图可视化库,它开源.体积小.结构清晰.简单易用. 2. Mapbox GL JS Mapbox GL JS 是目前最新潮的前端地图库,它的矢量压缩 ...
【GIS | WebGis的对比】Webgis地图框架的对比
blog 主流webGis框架优劣比较四大Webgis地图框架的对比选择! WebGIS完全自学指南Openlayers,Cesium,ArcGIS API for JS等 OpenLayersle ...
Openlayers前端复用Turf.js生成平头Buffer
Openlayers前端复用Turf.js生成平头Buffer,实现如下效果: 代码如下: <!doctype html> <html lang="en"> ...
VUE常用UI组件插件及框架-vue前端UI框架收集
UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...
什么是ECharts？前端图表框架echarts详解
在web开发项目过程中,经常会有需要绘制图标的情况,简单的图表可以用canvas来绘制,但是遇到复杂的图标canvas无法满足其功能,遇到这种情况怎么办呢?别着急,今天为大家推荐一款前端大佬都备受青睐 ...
前端Js框架 UI框架汇总特性适用范围选择
身为一个资深后端工程师,面对层出不穷的前端框架,总让人眼花缭乱,做一个综合解析贴,从全局着眼,让我们明白各种前端框架的应用范围,为如何选择前端框架,从不同的维度提供一些线索,做为一个长期优化贴,欢迎指 ...
web前端技术框架选型参考
一.出发点随着Web技术的不断发展,前端架构框架.UI框架.构建工具.CSS预处理等层出不穷,各有千秋.太多的框架在形成初期,都曾在web领域掀起过一场技术浪潮,可有些却仅仅是昙花一现,随着他们用 ...
oracle 前端ui框架,Layui(前端UI框架) 2.6.4 官方最新版
Layui最好用的前端ui框架是一款带着浓烈情怀的国产前端UI框架,她追求极简,又不失丰盈的内在,说她是史上最轻量的结晶,似乎并不为过.一切都源自于她对原生态的执着,对前端社区的那些噪杂声音的过滤,以 ...

openlayers前端地图框架

openlayer

简单用例

1.加载kml文件，并修饰例子

openlayers前端地图框架相关推荐

最新文章

热门文章