Newer
Older
KaiFengPC / src / views / gisMapPage / gisMapFunction.js
@zhangdeliang zhangdeliang on 23 May 11 KB 初始化项目
  1. const mapConfig = {
  2. container: 'map',
  3. adcode: 411600,
  4. zoom: 13.6,
  5. pitch: 55,
  6. bearing: 0,
  7. fog: false,
  8. antialias: true, // 是否开启抗锯齿
  9. cursor: 'default',
  10. center: [113.953, 30.906],
  11. minZoom: 3,
  12. maxZoom: 22,
  13. isHotspot: false,
  14. isHotspotActive: false,
  15. };
  16. export default class NewFiberMapOperate {
  17. //地图实例
  18. map = null;
  19. //三维场景对象
  20. virtualSpaceObj = null;
  21. RunLineLayer = null;
  22. RayLayerObj = null;
  23. imageLayers = [];
  24. features = [];
  25. callbacks = {
  26. featureClick: undefined,
  27. };
  28.  
  29. constructor(container, options) {
  30. this.initMap(container, options);
  31. }
  32.  
  33. initMap(container, options) {
  34. let self = this;
  35. let config = Object.assign(mapConfig, options);
  36. config.container = container || config.container;
  37. config.style = {
  38. version: 8,
  39. sources: {
  40. 'raster-tiles': {
  41. type: 'raster',
  42. tiles: ['http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'],
  43. tileSize: 256,
  44. },
  45. },
  46. layers: [{ id: 'simple-tiles', type: 'raster', source: 'raster-tiles', minzoom: 0, maxzoom: 22 }],
  47. };
  48. self.map = new LKMap.Map(container, config);
  49. //self.map.setStyle(import.meta.env.VITE_APP_MAP_SRC + 'static/libs/map/nightblue.json');
  50. }
  51.  
  52. //光效
  53. pointlight(geojson, key, lightColor) {
  54. let self = this;
  55. return geojson.features.forEach((feature, index) => {
  56. let feature_84 = gcoord.transform(feature, gcoord.WGS84, gcoord.GCJ02);
  57. let coordinates = feature_84.geometry.coordinates;
  58. let rayList = [
  59. {
  60. id: 'Diffusion' + index,
  61. type: 'Diffusion',
  62. radius: 250,
  63. color: lightColor ? lightColor : '#ff0',
  64. position: [coordinates[0], coordinates[1], 0],
  65. speed: 10,
  66. DiffusionOptions: {
  67. count: 1,
  68. width: 5,
  69. },
  70. rotation: {
  71. x: 90,
  72. y: 0,
  73. z: 0,
  74. },
  75. newfiberId: key,
  76. },
  77. ];
  78. self.RayLayerObj.addModel(rayList, e => {});
  79. gcoord.transform(feature, gcoord.GCJ02, gcoord.WGS84);
  80. });
  81. }
  82. //添加点
  83. /**
  84. *
  85. * @param {*} geojson
  86. * @param {*} icon
  87. * @param {*} visible true/false
  88. * @returns
  89. */
  90. addMarker(geojson, icon, id, visible, iconSize) {
  91. let self = this;
  92. console.log('geojson', geojson);
  93. return geojson.features.map(feature => {
  94. let feature_84 = gcoord.transform(feature, gcoord.WGS84, gcoord.GCJ02);
  95. let lonlat = feature_84.geometry.coordinates;
  96. let marker = new LKMap.Marker({
  97. map: self.map,
  98. position: new LKMap.LngLat(...lonlat),
  99. anchor: 'bottom',
  100. extData: feature.properties,
  101. visible: visible,
  102. icon: new LKMap.Icon({
  103. size: iconSize ? new LKMap.Size(iconSize[0], iconSize[1]) : new LKMap.Size(45, 79),
  104. image: icon,
  105. scope: [0, 25],
  106. anchor: 'top-center',
  107. }),
  108. label: {
  109. scope: [15, 25],
  110. content:
  111. feature.properties.name ||
  112. feature.properties.Name ||
  113. feature.properties.stName ||
  114. feature.properties.pointNumber ||
  115. feature.properties.sewageName ||
  116. feature.properties.sectionName ||
  117. feature.properties.pumpName,
  118. direction: 'top',
  119. offset: new LKMap.Pixel(0, -5),
  120. style: {
  121. 'background-color': 'rgba(255,255,255,1)',
  122. padding: '5px 10px',
  123. 'border-radius': '4px',
  124. color: 'black',
  125. 'box-shadow': '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
  126. },
  127. },
  128. });
  129. marker.newfiberId = id;
  130. self.features.push(marker);
  131. if (self.callbacks.featureClick)
  132. self.features.flat(Infinity).forEach(i => {
  133. self.featureClick(i, self.callbacks.featureClick);
  134. });
  135. gcoord.transform(feature, gcoord.GCJ02, gcoord.WGS84);
  136. return marker;
  137. });
  138. }
  139. noClickMarker(geojson, icon, id) {
  140. let self = this;
  141. return geojson.features.map(feature => {
  142. let feature_84 = gcoord.transform(feature, gcoord.WGS84, gcoord.GCJ02);
  143. let lonlat = feature_84.geometry.coordinates;
  144. let marker = new LKMap.Marker({
  145. map: self.map,
  146. position: new LKMap.LngLat(...lonlat),
  147. anchor: 'bottom',
  148. extData: feature.properties,
  149. icon: new LKMap.Icon({
  150. size: new LKMap.Size(34, 65),
  151. image: icon,
  152. scope: [5, -25],
  153. anchor: 'top-center',
  154. }),
  155. });
  156. marker.newfiberId = id;
  157. self.features.push(marker);
  158. return marker;
  159. });
  160. }
  161. //添加线
  162. addGeojsonLine(geojson, id, color) {
  163. let self = this;
  164. return geojson.features.map(feature => {
  165. let feature_84 = gcoord.transform(feature, gcoord.WGS84, gcoord.GCJ02);
  166. let lonlat = feature_84.geometry.coordinates;
  167. let polyline = new LKMap.Polyline({
  168. map: self.map,
  169. path: new LKMap.LngLat(...lonlat),
  170. strokeWeight: 6,
  171. extData: feature.properties,
  172. strokeColor: color ? color : '#47E44E',
  173. });
  174. polyline.newfiberId = id;
  175. self.features.push(polyline);
  176. return polyline;
  177. });
  178. }
  179. //添加面
  180. addGeojsonPolygon(geojson, id, visible, color) {
  181. let self = this;
  182. return geojson.features.map(feature => {
  183. let feature_84 = gcoord.transform(feature, gcoord.WGS84, gcoord.GCJ02);
  184. let lonlat = feature_84.geometry.coordinates[0];
  185. let polygon = new LKMap.Polygon({
  186. map: self.map,
  187. path: lonlat,
  188. strokeWeight: 1,
  189. strokeColor: '#f8f2f3',
  190. strokeOpacity: 1,
  191. fillColor: !!color ? color : !!feature.properties.fillColor ? feature.properties.fillColor : self.randomRgb(),
  192. fillOpacity: 0.8,
  193. extData: feature.properties,
  194. visible: visible,
  195. });
  196. polygon.newfiberId = id;
  197. self.features.push(polygon);
  198. //gcoord.transform(feature, gcoord.GCJ02, gcoord.WGS84);
  199. return polygon;
  200. });
  201. }
  202. //动态水体
  203. addDynamicWater(geojson, id) {
  204. let self = this;
  205. // 通过plugin方法加载VirtualSpace三维场景插件
  206. self.map.plugin(['VirtualSpace'], function () {
  207. // 实例化三维场景类
  208. let VirtualSpaceObject = new LKMap.VirtualSpace({
  209. map: self.map, // 必传
  210. defaultLights: true,
  211. sky: true,
  212. // fogColor:'#e6c9a3',
  213. // sky3: true,
  214. skyType: 'daylight', // 'daylight': 白天 'night':晚上 'morning':清晨 'sunset':日落
  215. // skyLightColor: '#ffffff',
  216. // skyLightIntensity: 1,
  217. GltfDoubleSide: false, // 高精地图是否开启双面绘制
  218.  
  219. // isDrawBuildings: true
  220. });
  221. // 通过VirtualSpaceObject初始化类
  222. let waterLayerObj = new VirtualSpaceObject.WaterLayer({
  223. VirtualSpace: VirtualSpaceObject, // 将场景对象传给水面,必传
  224. });
  225. geojson.features.forEach((feature, index) => {
  226. let feature_84 = gcoord.transform(feature, gcoord.WGS84, gcoord.GCJ02);
  227. let geojson = feature_84.geometry.coordinates;
  228. waterLayerObj.addModel({
  229. id: id + index,
  230. scale: 1,
  231. distortionScale: 3,
  232. data: geojson,
  233. waterColor: '#5470c6',
  234. size: 1,
  235. });
  236. });
  237. });
  238. }
  239. //添加白膜
  240. addBuilding(geojson, id) {
  241. let self = this;
  242. self.map.addLayer({
  243. id: id,
  244. type: 'fill-extrusion',
  245. source: {
  246. type: 'geojson',
  247. data: geojson,
  248. },
  249. // //绘画功能
  250. paint: {
  251. // Get the fill-extrusion-color from the source 'color' property. 从source 'color'属性获取fill- extrusive -color。
  252. // 'fill-extrusion-color':'rgba(200, 100, 240, 0.4)',
  253. // "fill-extrusion-color":['get','color'],//加载数据中的颜色
  254. 'fill-extrusion-color': {
  255. //根据数值中加载相对应颜色
  256. property: 'extend_3', // this will be your density property form you geojson
  257. stops: [
  258. [10, '#155ed7'],
  259. [20, '#2d6edb'],
  260. [30, '#447edf'],
  261. [80, '#5386da'],
  262. [100, '#7ba0dc'],
  263. [125, '#a1bfef'],
  264. [300, '#a1bfef'],
  265. ],
  266. },
  267. // 从source 'height'属性获取填充-挤出-高度。
  268. 'fill-extrusion-height': ['get', 'extend_3'],
  269. 'fill-extrusion-opacity': 1,
  270. },
  271. });
  272. }
  273. //添加wms
  274. addWMSLaters(key) {
  275. let self = this;
  276. let bboxs = [113.88115996100544, 30.80362587198562, 114.1592539075588, 31.005052001897184];
  277. let url = '/geoserver/xiaoganMapServer/wms?';
  278. let wasParam = {
  279. SERVICE: 'WMS',
  280. VERSION: '1.1.0',
  281. REQUEST: 'GetMap',
  282. FORMAT: 'image/png',
  283. TRANSPARENT: true,
  284. LAYERS: `xiaoganMapServer:${key}`,
  285. SRS: 'EPSG:3857',
  286. WIDTH: 256,
  287. HEIGHT: 256,
  288. };
  289. url =
  290. url +
  291. Object.keys(wasParam)
  292. .map(key => `${key}=${wasParam[key]}`)
  293. .join('&');
  294. let wmsLayer = new LKMap.TileLayer.WMS({
  295. getTileUrl: bbox => {
  296. let b = turf.bboxPolygon(bboxs);
  297. let a = turf.bboxPolygon(bbox.split(',').map(Number));
  298. a = gcoord.transform(a, gcoord.WebMercator, gcoord.WGS84);
  299. let i = turf.intersect(b, a);
  300. if (!!!i) return '';
  301. return url + `&bbox=${turf.bbox(gcoord.transform(a, gcoord.GCJ02, gcoord.WebMercator)).join(',')}`;
  302. },
  303. });
  304. wmsLayer.setMap(self.map);
  305. wmsLayer.newfiberId = key;
  306. self.features.push(wmsLayer);
  307. }
  308. //添加动态线
  309. addRunLine(geojson, key) {
  310. let self = this;
  311. let feature_84 = gcoord.transform(geojson.features[0], gcoord.WGS84, gcoord.GCJ02);
  312. let coordinates = feature_84.geometry.coordinates;
  313. let runLineList = [
  314. {
  315. image: 'https://lkimgyt.luokuang.com/1655260316814.png',
  316. height: 0,
  317. from: coordinates[0],
  318. to: coordinates[1],
  319. speed: 2,
  320. width: 20,
  321. newfiberId: key,
  322. },
  323. ];
  324. self.RunLineLayer.addLine(runLineList, e => {});
  325. // });
  326. }
  327. //添加弹窗
  328. createPopup(documentId, position) {
  329. let self = this;
  330. let position_gcj = gcoord.transform(turf.point(position), gcoord.WGS84, gcoord.GCJ02).geometry.coordinates;
  331. let element = document.getElementById(documentId);
  332. // 添加信息窗体
  333. let inforWindow = new LKMap.InforWindow({
  334. anchor: 'bottom',
  335. className: 'customClassName',
  336. content: element,
  337. isCustom: true, //使用自定义窗体
  338. showShadow: true, // 控制是否显示信息窗体阴影
  339. showShadowOffset: new LKMap.Pixel(0, -11), // 设置阴影偏移量
  340. });
  341. inforWindow.open(self.map, position_gcj);
  342. return inforWindow;
  343. }
  344. //feature点击事件
  345. featureClick(feature, callback) {
  346. if (feature.type !== 'tileLayer') feature.on('click', e => callback(e));
  347. }
  348. //获取图层
  349. getLayer(id) {
  350. let feature = [];
  351. this.features.forEach(item => {
  352. if (item.newfiberId && item.newfiberId == id) {
  353. feature.push(item);
  354. } else if (item.id && item.id == id) {
  355. feature.push(item);
  356. }
  357. });
  358. return feature;
  359. }
  360. //显隐控制
  361. setVisible(id, visible) {
  362. let feature = this.getLayer(id);
  363. feature.forEach(item => {
  364. visible == true ? item.show() : item.hide();
  365. });
  366. }
  367. //移除图层
  368. removeLayer(id) {
  369. let feature = this.getLayer(id);
  370. this.features.forEach((feature, index) => {
  371. if (feature.newfiberId && feature.newfiberId == id) {
  372. delete this.features[index];
  373. }
  374. });
  375. feature.forEach(item => {
  376. item.remove();
  377. });
  378. this.features = this.features.filter(Boolean);
  379. }
  380. //rgb颜色随机
  381. randomRgb() {
  382. const r = Math.floor(Math.random() * 256);
  383. const g = Math.floor(Math.random() * 256);
  384. const b = Math.floor(Math.random() * 256);
  385. return `rgba(${r},${g},${b},0.5)`;
  386. }
  387. }