【openlayers框架学习】七：绘制线要素以及点击画线功能
文章目录
- openlayers入门
- 25 openlayers添加线要素（Feature->geometry:LineString）
- 26 点击画线功能
openlayers入门
25 openlayers添加线要素（Feature->geometry:LineString）
main.js
import './style.css';
import Map from 'ol/Map';
import 'ol/ol.css';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
import VectorLayer from 'ol/layer/Vector.js';
import Style from 'ol/style/Style';
import Feature from 'ol/Feature';
import { LineString, Point } from 'ol/geom';
import { Vector } from "ol/source";
import Icon from 'ol/style/Icon';
import CircleStyle from 'ol/style/Circle.js';
import Fill from 'ol/style/Fill';
import Text from 'ol/style/Text.js';
import Stroke from 'ol/style/Stroke';
import VectorSource from 'ol/source/Vector';
const center = [114.25, 30.59];
const view = new View({center: center,zoom: 4,projection: "EPSG:4326",
});
//城市矢量地图-高德地图瓦片
const gaodeSource = new XYZ({url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
});
const gaodeLayer = new TileLayer({source: gaodeSource,
});
const map = new Map({target: "map",view: view,layers: [gaodeLayer],
});
//绘制线要素 画一条从武汉到北京的的直线
const lineFeature = new Feature({geometry: new LineString([[114.25,30.59],[116.46,39.92]]),
});
lineFeature.setStyle(new Style({stroke: new Stroke({color: "red",}),}),
);
const vectorSource = new VectorSource({features:[lineFeature],
});
const vectorLayer = new VectorLayer({source:vectorSource,
});
map.addLayer(vectorLayer);
26 点击画线功能
index.html
<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite App</title></head><body><div id="map"></div><script type="module" src="/src/main.js"></script></body>
</html>
main.js
import './style.css';
import Map from 'ol/Map';
import 'ol/ol.css';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
import VectorLayer from 'ol/layer/Vector.js';
import Style from 'ol/style/Style';
import Feature from 'ol/Feature';
import { LineString, Point } from 'ol/geom';
import { Vector } from "ol/source";
import Icon from 'ol/style/Icon';
import CircleStyle from 'ol/style/Circle.js';
import Fill from 'ol/style/Fill';
import Text from 'ol/style/Text.js';
import Stroke from 'ol/style/Stroke';
import VectorSource from 'ol/source/Vector';
const center = [114.25, 30.59];
const view = new View({center: center,zoom: 4,projection: "EPSG:4326",
});
//城市矢量地图-高德地图瓦片
const gaodeSource = new XYZ({url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
});
const gaodeLayer = new TileLayer({source: gaodeSource,
});
const map = new Map({target: "map",view: view,layers: [gaodeLayer],
});
// //绘制线要素 画一条从武汉到北京的的直线
// const lineFeature = new Feature({
// geometry: new LineString([
// [114.25,30.59],
// [116.46,39.92]
// ]),
// });
// lineFeature.setStyle(
// new Style({
// stroke: new Stroke({
// color: "red",
// }),
// }),
// );
const vectorSource = new VectorSource({features:[],
});
const vectorLayer = new VectorLayer({source:vectorSource,
});
map.addLayer(vectorLayer);
let lineArr = [];
map.on('click',function(e){//去掉之前的要素vectorSource.clear();let coordinate = e.coordinate;lineArr.push(coordinate);if(lineArr.length === 2){let lineFeature = new Feature({geometry: new LineString(lineArr),});lineFeature.setStyle(new Style({stroke: new Stroke({color: "red",width: 8,}),}));vectorSource.addFeature(lineFeature);lineArr = [];}});
style.css
*{padding: 0;margin: 0;box-sizing: border-box;
}
#map{width: 100vw;height: 100vh;
}