做企业网站设计与实现,怎么做门户网站,汽车网站代码,兰州网络推广方向官网demo地址#xff1a; LineString Arrows 这篇介绍了在地图上绘制箭头。
创建一个矢量数据源#xff0c;将其绑定为draw的数据源并展示在矢量图层上。 const source new VectorSource();const vector new VectorLayer({source: source,style: styleFunction,});map.ad…
官网demo地址 LineString Arrows 这篇介绍了在地图上绘制箭头。
创建一个矢量数据源将其绑定为draw的数据源并展示在矢量图层上。 const source new VectorSource();const vector new VectorLayer({source: source,style: styleFunction,});map.addInteraction(new Draw({source: source,type: LineString,}));
绘制直线时通过style函数将直线的末端添加箭头图标。通过forEachSegment 函数拿到箭头的起点和终点坐标使用 Math.atan2计算出箭头图标的旋转角度。
const styleFunction function (feature) {const geometry feature.getGeometry();const styles [new Style({stroke: new 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);styles.push(new Style({geometry: new Point(end),image: new Icon({src: https://openlayers.org/en/latest/examples/data/arrow.png,anchor: [0.75, 0.5],rotateWithView: true,rotation: -rotation,}),}));});return styles;};
完整代码
templatediv classboxh1LineString Arrows/h1div idmap classmap/div/div
/templatescript
import StadiaMaps from ol/source/StadiaMaps.js;
import Draw from ol/interaction/Draw.js;
import Map from ol/Map.js;
import Point from ol/geom/Point.js;
import View from ol/View.js;
import { Icon, Stroke, Style } from ol/style.js;
import { OSM, Vector as VectorSource } from ol/source.js;
import { Tile as TileLayer, Vector as VectorLayer } from ol/layer.js;
import { get } from ol/proj.js;
export default {name: ,components: {},data() {return {map: null,};},computed: {},created() {},mounted() {const layer new TileLayer({source: new StadiaMaps({layer: stamen_terrain_background,}),});const source new VectorSource();const styleFunction function (feature) {const geometry feature.getGeometry();const styles [new Style({stroke: new 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);styles.push(new Style({geometry: new Point(end),image: new Icon({src: https://openlayers.org/en/latest/examples/data/arrow.png,anchor: [0.75, 0.5],rotateWithView: true,rotation: -rotation,}),}));});return styles;};const vector new VectorLayer({source: source,style: styleFunction,});const extent get(EPSG:3857).getExtent().slice();extent[0] extent[0];extent[2] extent[2];const map new Map({layers: [layer, vector],target: map,view: new View({center: [-11000000, 4600000],zoom: 4,extent,}),});map.addInteraction(new Draw({source: source,type: LineString,}));},methods: {},
};
/scriptstyle langscss scoped
#map {width: 100%;height: 500px;
}
.box {height: 100%;
}/style
