內容概覽
1.基于openlayers6實作線水流動效果
2.源代碼demo下載
效果圖如下：
大概實作思路如下：
1.創建矢量圖層；
2.設定矢量圖層樣式，以樣式組形式；
3.矢量圖層樣式組底層保持不變，改變矢量圖層的要素feature屬性值，動態更新頂層樣式的線間隔lineDashOffset屬性值，達到線水流動效果，
關鍵點：矢量圖層的樣式style內部更新渲染機制，在圖層可見范圍，地圖縮放會自動觸發；矢量圖層的要素設定屬性值變化的話，也會觸發，
- 實作代碼如下，原始碼demo下載在文章尾部
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
// import XYZ from 'ol/source/XYZ';
import {OSM,TileArcGISRest, Vector as VectorSource} from 'ol/source';
import 'ol/ol.css';
import VectorLayer from 'ol/layer/Vector';
// import VectorSource from 'ol/source/Vector';
import { Style, Fill, Stroke, Text } from 'ol/style';
import GeoJSON from 'ol/format/GeoJSON';
const geojsonObject = {
'type': 'FeatureCollection',
'crs': {
'type': 'name',
'properties': {
'name': 'EPSG:3857',
},
},
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [
[-5e6, -5e6],
[0, -5e6],
],
},
},
],
};
const vectorSource = new VectorSource({
features: new GeoJSON().readFeatures(geojsonObject),
});
const vectorlayer = new VectorLayer({
source: vectorSource,
style: function (feature) {
//控制顯隱
let style = null;
style = getStyle(feature, true);
return style;
}
});
const map = new Map({
layers: [
// new TileLayer({
// source: new OSM(),
// }),
new TileLayer({
source: new TileArcGISRest({
url: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",
}),
}),
vectorlayer,
],
target: 'map',
view: new View({
center: [0, 0],
zoom: 2,
}),
});
function getStyle(feature, isFlow) {
let style;
const geomtype = feature.getGeometry().getType();
if (geomtype == "LineString") {
style = getLineStyle(feature, isFlow);
}
return style;
}
function getLineStyle(feature, isFlow) {
let _font = "12px Arial";
const name = feature.get("name") ? feature.get("name") : "水流效果";
const extend = feature.get("extend");
const direction = extend && extend.direction || 0; // 0代表正方向 -1代表反方向
let styles = [
new Style({
stroke: new Stroke({
color: "rgba(30,144,255, 0.7)",
width: 2,
lineDash: [0]
}),
text: new Text({
text: name,
fill: new Fill({
color: '#FFFF00',
}),
font: _font,
offsetY: 20,
placement: "line"
}),
})
];
if (isFlow) {
//判斷是否有水流效果
styles.push(new Style({
stroke: new Stroke({
// color: [204, 204, 255, 1],
color: [255, 250, 250, 1],
width: 2,
lineDash: [20, 27], //一組線段和間距互動的陣列，可以控制虛線的長度
……
})
}));
……
}
// console.log('矢量樣式渲染');
return styles;
}
點擊跳轉到小專欄文章，完整源代碼demo在文章尾部
GIS之家作品店鋪：GIS之家作品店鋪GIS之家原始碼咨詢：GIS之家webgis入門開發系列demo源代碼咨詢
掃碼關注GIS之家微信公眾號，訊息發送“gis之家”可免費獲取地圖資料以及arcgis系列安裝包等資源
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/440432.html
標籤：其他