React+Openlayuers 模板(学习中，持续更新)

基础模板

基础

1. import React, { createRef, useEffect, useRef } from 'react';
2. import { Map, View, Feature, Overlay } from 'ol';
3. import reactDom from 'react-dom';
4. import TileLayer from 'ol/layer/Tile';
5. import { OSM } from 'ol/source';
6. import { Point, LineString } from 'ol/geom'; //点
7. import { Icon, Stroke, Style } from 'ol/style';
8. import VectorLayer from 'ol/layer/Vector';
9. import VectorSource from 'ol/source/Vector';
10. import 'ol/ol.css';
11. import styles from './index.less';
12. import poiImg from '@/assets/images/house.png';
13. import ycdl from '../json/ycdl.json'
14. const Index: React.FC = () => {
15. // 地图
16. const map = useRef
18. // 地图容器
19. const mapDom = createRef
21. useEffect(() => {
22. // 初始化地图
23. initMap()
24. // 加载标注
25. createFeature(ycdl.features[0].geometry.coordinates, poiImg, 'iconFeature');
26. //加载线
27. createLine(ycdl.features[0].geometry.coordinates, poiImg, 'lineFeature');
28. //加载信息框
29. createInfo()
32. * 初始化地图
34. const initMap = () => {
35. map.current = new Map({
36. target: 'map',
37. layers: [
38. new TileLayer({
39. source: new OSM(),
40. }),
41. ],
42. view: new View({
43. center: [111.286962, 30.69217],
44. projection: 'EPSG:4326',
45. zoom: 14,
46. }),
49. //创建标注
50. const createFeature = (featureData: Array) => {
51. , featureImg: string, layerId: string
52. // 创建标注
53. if (featureData.length > 0) {
54. let iconFeatures: any;
55. iconFeatures = new Array();
56. featureData.forEach((v, index) => {
57. iconFeatures.push(new Feature({
58. geometry: new Point([...v])
60. iconFeatures[index].setId(`icon ${index}`)
62. // 将标注属性添加到矢量数据源中
63. let iconSource = new VectorSource({
64. features: iconFeatures
66. //将标注矢量数据源添加到矢量层
67. let iconLayer = new VectorLayer({
68. source: iconSource,
69. zIndex: 3,
70. style: () => {
71. return new Style({
72. image: new Icon({
73. anchor: [0.5, 1],
74. scale: 0.12,
75. src: featureImg
80. // 将矢量层添加到地图
81. map.current.addLayer(iconLayer);
85. * 创建线
87. const createLine = (lineData: Array) => {
88. , lineColor: string, layerId: string
89. let lineFeature: any;
90. if (lineData.length > 0) {
91. lineFeature = new Feature({
92. geometry: new LineString([...lineData])
95. // 将划线属性添加到矢量数据源中
96. let lineSource = new VectorSource({})
97. lineSource.addFeature(lineFeature);
98. let lineLayer = new VectorLayer({
99. source: lineSource,
100. zIndex: 2,
101. style: () => {
102. return new Style({
103. stroke: new Stroke({
104. width: 4,
105. color: 'rgb(0,255,0)'
110. // 将矢量层添加到地图
111. map.current.addLayer(lineLayer);
114. * 创建信息框
116. const createInfo = () => {
117. //创建overlay容器
118. const overlayDom = document.createElement('div');
119. overlayDom.className = 'overlayDom';
120. mapDom.current?.appendChild(overlayDom);
121. //创建内部信息容器
122. const overlayInfo = document.createElement('div');
123. overlayInfo.className = 'overlayInfo';
124. overlayDom.appendChild(overlayInfo)
125. //创建overlay
126. const overlay = new Overlay({
127. element: overlayDom, // overlay包含的DOM
128. autoPan: true, // 当overlay超出地图边界时，地图自动移动
129. positioning: 'bottom-center',
130. offset: [0, -50], // 偏移量，单位像素
131. stopEvent: true, // 事件传播
132. autoPanAnimation: {
133. // 设置autoPan的动画
134. duration: 500
135. },
136. autoPanMargin: 150
138. //将overlay添加到地图
139. map.current.addOverlay(overlay)
140. //设置地图左键点击事件
141. map.current.on('click', (event: any) => {
142. if (overlayInfo.innerHTML !== ' ') {
143. // 清空
144. reactDom.unmountComponentAtNode(overlayInfo);
147. const feature = map.current.forEachFeatureAtPixel(event.pixel, function (feature: any, vectorLayer: any) {
148. return feature;
150. if (feature && feature.id_ != undefined) {
151. const infoData = feature.getGeometry().flatCoordinates;
152. const infoDom = (

153. 经度: {infoData[0]}, 维度:{infoData[1]}
154. div>
156. //将overlayInfo插入infoDom
157. reactDom.render(infoDom, overlayInfo);
158. // 设置overlay位置
159. overlay.setPosition(infoData)
163. return (
166. span>
169. export default Index