gis-map-xinjiang 0.0.2 → 0.0.4

package/packages/gisMapXinJiang/js/initBaseLayers.js

@@ -1,550 +0,0 @@
-import "ol-ext/dist/ol-ext.css";
-import StrokePattern from "ol-ext/style/StrokePattern";
-import FillPattern from "ol-ext/style/FillPattern";
-import { Feature } from "ol";
-import {
-  Tile as TileLayer,
-  Vector as VectorLayer,
-  Image as ImageLayer,
-  Heatmap as HeatmapLayer,
-} from "ol/layer";
-import VectorTileLayer from "ol/layer/VectorTile";
-import {
-  Vector as VectorSource,
-  TileArcGISRest,
-  TileWMS,
-  ImageStatic,
-  XYZ,
-  WMTS,
-  ImageCanvas,
-  TileImage,
-} from "ol/source";
-import { Point } from "ol/geom";
-import {
-  Circle as CircleStyle,
-  Fill,
-  Stroke,
-  Style,
-  Text,
-  Icon,
-  Circle,
-} from "ol/style";
-import { boundingExtent } from "ol/extent";
-import GeoJSON from "ol/format/GeoJSON";
-import MVT from "ol/format/MVT";
-import Overlay from "ol/Overlay";
-import { fromLonLat, transformExtent} from "ol/proj";
-import WMTSTileGrid from "ol/tilegrid/WMTS";
-import { get as getProjection } from "ol/proj";
-import { getTopLeft, getWidth } from "ol/extent";
-import WFS from "ol/format/WFS";
-import proj4 from "proj4";
-import {
-  Tianditu,
-  TileSuperMapRest,
-  VectorTileSuperMapRest,
-  MapboxStyles,
-} from "@supermap/iclient-ol";
-import * as echarts from "echarts";
-// import "./olms.js";
-import * as turf from "@turf/turf";
-import EChartsLayer from "ol-echarts";
-import { ref, computed, watch } from 'vue';
-import ClusterList from "../component/ClusterList.vue";
-
-// 创建可组合函数替代原来的 mixin
-export function useBaseLayers(mapRef, themeStyleRef, emit) {
-  // 响应式数据
-  const lastHoverFeature = ref(null); // 记录上一次悬停的要素
-  const isCluster = ref(false);
-  const echartslayer = ref(null);
-  const congestedRoadLayer = ref(null);
-  const tiandituLayer = ref(null);
-  const overlayPopup = ref(null);
-  const initialPoint = ref(null);
-  const popupHeight = ref(null);
-  const popupWidth = ref(null);
-  const china_full_Layer = ref(null);
-  const currentTabComponent = ref(null);
-  const popupAttributes = ref(null);
-
-  // URL 和样式配置
-  const darkUrl = "http://service.sdmap.gov.cn/tileservice/dsfg_asdxb?";
-  const lightUrl = "https://service.sdmap.gov.cn/tileservice/dsfg_qsb?";
-  const yingxiangUrl = "https://service.sdmap.gov.cn/tileservice/sdrasterpubmap?";
-  const geoJSONUrl = "/china_full.json";
-  const xjJSONUrl = "/xinjiang.json";
-  const sdAreaUrl = "/sdArea.json";
-  const subwayLineUrl = "/ditieline.json";
-  const darkFillColor = "#1b2639";
-  const lightFillColor = "#eeeee9";
-  const yingxiangFillColor = "#adb0aa";
-  const darkStrokeColor = "#3578E0";
-  const lightStrokeColor = "#b4b4b1";
-  const yingxiangStrokeColor = "#d3d3d3";
-
-  // 计算属性
-  const normalizedThemeStyle = computed(() => {
-    return ["dark", "light", "yingxiang"].includes(themeStyleRef.value)
-      ? themeStyleRef.value
-      : "dark";
-  });
-
-  // 方法
-  const initBaseLayers = () => {
-    // 根据当前主题设置初始图层
-    let tiandituUrl, fillColor, strokeColor;
-    if (normalizedThemeStyle.value === "light") {
-      tiandituUrl = lightUrl;
-      fillColor = lightFillColor;
-      strokeColor = lightStrokeColor;
-    } else if (normalizedThemeStyle.value === "yingxiang") {
-      tiandituUrl = yingxiangUrl;
-      fillColor = yingxiangFillColor;
-      strokeColor = yingxiangStrokeColor;
-    } else {
-      tiandituUrl = darkUrl;
-      fillColor = darkFillColor;
-      strokeColor = darkStrokeColor;
-    }
-
-    tiandituLayer.value = new TileLayer({
-      source: new Tianditu({
-        url: tiandituUrl,
-        key: "d02c0b2c57b4ba04f74cbccbb138f130",
-        projection: "EPSG:4326",
-      }),
-      zIndex: 1,
-    });
-    mapRef.value.addLayer(tiandituLayer.value);
-
-    // 测试新疆影像
-    let xinjiangYXLayer = new TileLayer({
-      layerName: "xinjiangYXLayer",
-      source: new TileSuperMapRest({
-        url: 'http://10.105.1.49:8090/iserver/services/XJyingxiang_2000/rest/maps/XJyingxiang_2000'
-      }),
-      zIndex: 12,
-      projection: 'EPSG:4326'
-    });
-    mapRef.value.addLayer(xinjiangYXLayer);
-    
-    // 测试新疆高速路网
-    let xinjiangGSLayer = new TileLayer({
-      layerName: "xinjiangGSLayer",
-      source: new TileSuperMapRest({
-        url: 'http://10.105.1.49:8090/iserver/services/map-luxian/rest/maps/年报高速国道'
-      }),
-      zIndex: 13,
-      projection: 'EPSG:4326'
-    });
-    mapRef.value.addLayer(xinjiangGSLayer);
-
-    const addXinjiang3DEffect = () => {
-      fetch(xjJSONUrl)
-        .then(response => response.json())
-        .then(data => {
-          for (let i = 1; i <= 10; i++) {
-            const r = Math.round(5 * (1 - (i-1)/9) + 3 * ((i-1)/9));
-            const g = Math.round(126 * (1 - (i-1)/9) + 37 * ((i-1)/9));
-            const b = Math.round(230 * (1 - (i-1)/9) + 95 * ((i-1)/9));
-            const alpha = 1;
-            const shadowLayer = new VectorLayer({
-              source: new VectorSource({
-                features: new GeoJSON().readFeatures(data, {
-                  dataProjection: 'EPSG:4326',
-                  featureProjection: 'EPSG:4326'
-                })
-              }),
-              style: new Style({
-                fill: new Fill({
-                  color: `rgba(${r}, ${g}, ${b}, ${alpha})`
-                })
-              }),
-              zIndex: 11 - i
-            });
-            shadowLayer.getSource().forEachFeature(feature => {
-              const geometry = feature.getGeometry();
-              if (geometry) {
-                const newGeometry = geometry.clone();
-                newGeometry.translate(0, -0.07 * i);
-                feature.setGeometry(newGeometry);
-              }
-            });
-            mapRef.value.addLayer(shadowLayer);
-          }
-          const topLayer = new VectorLayer({
-            source: new VectorSource({
-              features: new GeoJSON().readFeatures(data, {
-                dataProjection: 'EPSG:4326',
-                featureProjection: 'EPSG:4326'
-              })
-            }),
-            style: new Style({
-              fill: new Fill({
-                color: '#03255F'
-              }),
-              stroke: new Stroke({
-                color: '#057EE6',
-                width: 8
-              })
-            }),
-            zIndex: 11
-          });
-          mapRef.value.addLayer(topLayer);
-        })
-        .catch(error => {
-          console.error('加载新疆区域数据失败:', error);
-        });
-    };
-    
-    setTimeout(addXinjiang3DEffect, 1000);
-    
-    // 监听点击事件
-    mapRef.value.on("click", (e) => {
-      let mousePoint = e.coordinate;
-      initialPoint.value = mousePoint;
-      let popupHeaderTitle = document.getElementById("popupHeaderTitle");
-      let feature = mapRef.value.forEachFeatureAtPixel(e.pixel, (feature) => {
-        return feature;
-      });
-      
-      if (feature) {
-        if (feature.getProperties().features) {
-          if (feature.getProperties().features.length > 1) {
-            const features = feature.getProperties().features;
-            if (mapRef.value.getView().getZoom() >= 18) {
-              popupHeight.value = 350;
-              popupWidth.value = 430;
-              currentTabComponent.value = ClusterList;
-              popupAttributes.value = features;
-              if (popupHeaderTitle) {
-                popupHeaderTitle.innerHTML = "";
-                popupHeaderTitle.innerHTML = "点位列表";
-              }
-              // showPopup 函数需要在主组件中实现
-              emit('showPopup');
-              let fontSize = Number(
-                document
-                  .getElementsByTagName("html")[0]
-                  .style.fontSize.split("px")[0]
-              );
-              let popupHeightValue = (popupHeight.value / 153.6) * fontSize;
-              let popupWidthValue = (popupWidth.value / 153.6) * fontSize;
-
-              overlayPopup.value.setPosition(mousePoint);
-              overlayPopup.value.setOffset([-popupWidthValue / 2, -popupHeightValue]);
-
-              let pixelPoint = mapRef.value.getPixelFromCoordinate(mousePoint);
-              let newpixelPoint = [pixelPoint[0], pixelPoint[1] - 150];
-              let newCenterPoint =
-                mapRef.value.getCoordinateFromPixel(newpixelPoint);
-              mapRef.value.getView().animate({
-                center: newCenterPoint,
-                duration: 800,
-              });
-
-              // overlayPopup.set("popupBS", "clusterList");
-            } else {
-              mapRef.value.getView().animate({
-                center: feature.getGeometry().getCoordinates(),
-                zoom: mapRef.value.getView().getZoom() * 2,
-                duration: 1200,
-              });
-            }
-          } else {
-            let properties = feature
-              .getProperties()
-              .features[0].getProperties();
-            if (properties) {
-              if (properties.isDrawn) return;
-              if (properties.popoup === false) {
-                emit("clickPointEvent", properties);
-                return;
-              }
-              const type = properties.type;
-              const data = properties;
-              if (type) {
-                switch (type) {
-                  // 根据需要添加 switch 逻辑
-                }
-                // showPopup 函数需要在主组件中实现
-                emit('showPopup');
-              }
-            } else {
-              // closePopup 函数需要在主组件中实现
-              emit('closePopup');
-            }
-            
-            let fontSize = Number(
-              document
-                .getElementsByTagName("html")[0]
-                .style.fontSize.split("px")[0]
-            );
-            let popupHeightValue = (popupHeight.value / 153.6) * fontSize;
-            let popupWidthValue = (popupWidth.value / 153.6) * fontSize;
-
-            overlayPopup.value.setPosition(mousePoint);
-            overlayPopup.value.setOffset([-popupWidthValue / 2, -popupHeightValue]);
-
-            let pixelPoint = mapRef.value.getPixelFromCoordinate(mousePoint);
-            let newpixelPoint = [pixelPoint[0], pixelPoint[1] - 150];
-            let newCenterPoint =
-              mapRef.value.getCoordinateFromPixel(newpixelPoint);
-            mapRef.value.getView().animate({
-              center: newCenterPoint,
-              duration: 800,
-            });
-          }
-        } else {
-          let properties = feature.getProperties();
-          if (properties) {
-            if (properties.isDrawn) return;
-            if (properties.popoup === false) {
-              emit("clickPointEvent", properties);
-              return;
-            }
-            const type = properties.type;
-            if (type) {
-              // 根据需要添加 switch 逻辑
-            } else {
-              // closePopup 函数需要在主组件中实现
-              emit('closePopup');
-            }
-          } else {
-            // closePopup 函数需要在主组件中实现
-            emit('closePopup');
-          }
-          
-          let fontSize = Number(
-            document
-              .getElementsByTagName("html")[0]
-              .style.fontSize.split("px")[0]
-          );
-          let popupHeightValue = (popupHeight.value / 192) * fontSize;
-          let popupWidthValue = (popupWidth.value / 192) * fontSize;
-
-          overlayPopup.value.setPosition(mousePoint);
-          overlayPopup.value.setOffset([-popupWidthValue / 2, -popupHeightValue]);
-          let pixelPoint = mapRef.value.getPixelFromCoordinate(mousePoint);
-          let newpixelPoint = [pixelPoint[0], pixelPoint[1] - 150];
-          let newCenterPoint = mapRef.value.getCoordinateFromPixel(newpixelPoint);
-          mapRef.value.getView().animate({
-            center: newCenterPoint,
-            duration: 800,
-          });
-        }
-      } else {
-        // closePopup 函数需要在主组件中实现
-        emit('closePopup');
-      }
-    });
-    
-    mapRef.value.on("pointermove", (e) => {
-      let feature = mapRef.value.forEachFeatureAtPixel(e.pixel, (feature) => {
-        return feature;
-      });
-      
-      if (feature !== lastHoverFeature.value) {
-        if (lastHoverFeature.value) {
-          emit(
-            "pointerOutEvent",
-            lastHoverFeature.value.getProperties()
-          );
-        }
-        if (feature) {
-          let pixelPoint = null;
-          if (
-            feature.getProperties().longitude &&
-            feature.getProperties().latitude
-          ) {
-            let latlon = [
-              feature.getProperties().longitude,
-              feature.getProperties().latitude,
-            ];
-            pixelPoint = mapRef.value.getPixelFromCoordinate(latlon);
-          }
-          emit("pointerMoveEvent", feature.getProperties(), pixelPoint);
-        }
-        lastHoverFeature.value = feature;
-      }
-    });
-  };
-
-  // 监听主题样式变化
-  watch(themeStyleRef, (val) => {
-    if (val === "dark") {
-      if (tiandituLayer.value) {
-        mapRef.value.removeLayer(tiandituLayer.value);
-        if (china_full_Layer.value) {
-          mapRef.value.removeLayer(china_full_Layer.value);
-        }
-        tiandituLayer.value = new TileLayer({
-          source: new Tianditu({
-            url: darkUrl,
-            key: "d02c0b2c57b4ba04f74cbccbb138f130",
-            projection: "EPSG:4326",
-          }),
-          zIndex: 1,
-        });
-        mapRef.value.addLayer(tiandituLayer.value);
-        fetch(geoJSONUrl)
-          .then((response) => response.json())
-          .then((data) => {
-            let geoJSONFormat = new GeoJSON();
-            china_full_Layer.value = new VectorLayer({
-              layerName: "xxxx",
-              source: new VectorSource({
-                format: geoJSONFormat,
-                features: geoJSONFormat.readFeatures(data, {
-                  dataProjection: "EPSG:4326",
-                  featureProjection: "EPSG:4326",
-                }),
-              }),
-              zIndex: 3,
-              style: function (feature) {
-                return new Style({
-                  fill: new Fill({
-                    color: darkFillColor,
-                  }),
-                  stroke: new Stroke({
-                    color: darkStrokeColor,
-                    width: 1,
-                  }),
-                });
-              },
-            });
-            mapRef.value.addLayer(china_full_Layer.value);
-          });
-      }
-    } else if (val === "light") {
-      mapRef.value.removeLayer(tiandituLayer.value);
-      if (china_full_Layer.value) {
-        mapRef.value.removeLayer(china_full_Layer.value);
-      }
-      tiandituLayer.value = new TileLayer({
-        source: new Tianditu({
-          url: lightUrl,
-          key: "d02c0b2c57b4ba04f74cbccbb138f130",
-          projection: "EPSG:4326",
-        }),
-        zIndex: 1,
-      });
-      mapRef.value.addLayer(tiandituLayer.value);
-
-      fetch(geoJSONUrl)
-        .then((response) => response.json())
-        .then((data) => {
-          let geoJSONFormat = new GeoJSON();
-          china_full_Layer.value = new VectorLayer({
-            layerName: "xxxx",
-            source: new VectorSource({
-              format: geoJSONFormat,
-              features: geoJSONFormat.readFeatures(data, {
-                dataProjection: "EPSG:4326",
-                featureProjection: "EPSG:4326",
-              }),
-            }),
-            zIndex: 3,
-            style: function (feature) {
-              return new Style({
-                fill: new Fill({
-                  color: lightFillColor,
-                }),
-                stroke: new Stroke({
-                  color: lightStrokeColor,
-                  width: 1,
-                }),
-              });
-            },
-          });
-          mapRef.value.addLayer(china_full_Layer.value);
-        });
-    } else if (val === "yingxiang") {
-      mapRef.value.removeLayer(tiandituLayer.value);
-      if (china_full_Layer.value) {
-        mapRef.value.removeLayer(china_full_Layer.value);
-      }
-      tiandituLayer.value = new TileLayer({
-        source: new Tianditu({
-          url: yingxiangUrl,
-          key: "d02c0b2c57b4ba04f74cbccbb138f130",
-          projection: "EPSG:4326",
-        }),
-        zIndex: 1,
-      });
-      mapRef.value.addLayer(tiandituLayer.value);
-
-      fetch(geoJSONUrl)
-        .then((response) => response.json())
-        .then((data) => {
-          let geoJSONFormat = new GeoJSON();
-          china_full_Layer.value = new VectorLayer({
-            layerName: "xxxx",
-            source: new VectorSource({
-              format: geoJSONFormat,
-              features: geoJSONFormat.readFeatures(data, {
-                dataProjection: "EPSG:4326",
-                featureProjection: "EPSG:4326",
-              }),
-            }),
-            zIndex: 3,
-            style: function (feature) {
-              return new Style({
-                fill: new Fill({
-                  color: yingxiangFillColor,
-                }),
-                stroke: new Stroke({
-                  color: yingxiangStrokeColor,
-                  width: 1,
-                }),
-              });
-            },
-          });
-          mapRef.value.addLayer(china_full_Layer.value);
-        });
-    }
-  });
-
-  // 返回需要在组件中使用的属性和方法
-  return {
-    // 数据属性
-    lastHoverFeature,
-    isCluster,
-    echartslayer,
-    congestedRoadLayer,
-    tiandituLayer,
-    overlayPopup,
-    initialPoint,
-    popupHeight,
-    popupWidth,
-    china_full_Layer,
-    currentTabComponent,
-    popupAttributes,
-    
-    // URL 和样式配置
-    darkUrl,
-    lightUrl,
-    yingxiangUrl,
-    geoJSONUrl,
-    xjJSONUrl,
-    sdAreaUrl,
-    subwayLineUrl,
-    darkFillColor,
-    lightFillColor,
-    yingxiangFillColor,
-    darkStrokeColor,
-    lightStrokeColor,
-    yingxiangStrokeColor,
-    
-    // 计算属性
-    normalizedThemeStyle,
-    
-    // 方法
-    initBaseLayers,
-  };
-}
-
-export default {
-  useBaseLayers
-};