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>
版权声明：本文为zhang2312600_a原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。