<!--********************************************************************
* Copyright© 2000 - 2022 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title data-i18n="resources.title_tiledMapLayer3857"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
<script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
</head>
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
<div id="map" style="width: 100%; height: 100%"></div>
<script type="text/javascript">
var map,
url =
(window.isLocal ? window.server : 'https://iserver.supermap.io') +
'/iserver/services/map-china400/rest/maps/China';
// 方式一：1.调用 ol.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
// ol.supermap.initMap(url, {
// mapOptions: {
// controls: ol.control
// .defaults({ attributionOptions: { collapsed: false } })
// .extend([new ol.supermap.control.Logo()])
// }
// });
/* 方式二：1.调用 ol.supermap.MapService，获取 SuperMap iServer 地图服务的地图信息
2.调用 ol.supermap.viewOptionsFromMapJSON 获取地图视图参数
3.调用 ol.Map 创建地图
4.调用 ol.layer.Tile 与 ol.source.TileSuperMapRest 创建底图
*/
new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
const mapObj = serviceResult.result;
window.maps = map = new ol.Map({
target: 'map',
controls: ol.control
.defaults({ attributionOptions: { collapsed: false } })
.extend([new ol.supermap.control.Logo()]),
view: new ol.View(ol.supermap.viewOptionsFromMapJSON(mapObj))
});
var layer = new ol.layer.Tile({
source: new ol.source.TileSuperMapRest(ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapObj, true))
});
map.addLayer(layer);
map.addControl(new ol.supermap.control.ScaleLine());
//
// #################################################################################################
// 从这里 往上的 都是
// https://iclient.supermap.io/examples/openlayers/editor.html#01_tiledMapLayer3857
// 的原本内容
// 往下的，才是绘制箭头
// #################################################################################################
//
const coords = [[-1986139.7429620195, 78271.51696402021], [4070118.882129064, -596820.3168506557], [821850.928122214, 870770.6262247274], [-3492866.4445194136, 1399103.365731866]] // 该地图所用为3857底图，坐标值不是经纬度
const sourceVector = new ol.source.Vector()
const feature = new ol.Feature({
geometry: new ol.geom.LineString([coords[0], coords[1], coords[2], coords[3]])
})
sourceVector.addFeature(feature)
const styleFunction = function (feature) {
const geometry = feature.getGeometry();
const styles = [
// linestring
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2,
}),
}),
];
geometry.forEachSegment(function (start, end) {
const dx = end[0] - start[0];
const dy = end[1] - start[1];
const rotation = Math.atan2(dy, dx);
const coord = [start[0] + dx/2, start[1] + dy / 2]
// arrows
styles.push(
new ol.style.Style({
geometry: new ol.geom.Point(coord),
image: new ol.style.Icon({
src: 'https://bpic.51yuansu.com/pic2/cover/00/48/42/5815eb37ed3d8_610.jpg',
anchor: [0.75, 0.5],
rotateWithView: true,
rotation: -rotation,
scale: 0.03
}),
})
);
});
return styles;
};
//#######################################################################################//
//# !!!IMPORTANT:在layer初始化时传入了style配置，设置的风格函数，会返回一个style #//
//#######################################################################################//
const layerVector = new ol.layer.Vector({
source: sourceVector,
style: styleFunction,// !!!IMPORTANT
})
map.addLayer(layerVector);
});
</script>
</body>
</html>
RESULT:
Reference:
- supermap 3857
- openlayers line-arrows
