基础模板

基础

  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