gis-map-xinjiang 0.0.2 → 0.0.4

package/package.json

@@ -1,25 +1,16 @@
 {
   "name": "gis-map-xinjiang",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "GIS通用组件 - Vue 3 版本",
   "main": "dist/gismap.umd.js",
   "module": "dist/gismap.es.js",
   "files": [
-    "dist",
-    "packages/**/*"
+    "dist/*"
   ],
-  "exports": {
-    ".": {
-      "import": "./dist/gismap.es.js",
-      "require": "./dist/gismap.umd.js"
-    },
-    "./packages/*": "./packages/*"
-  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview",
-    "lib": "vite build"
+    "preview": "vite preview"
   },
   "dependencies": {
     "@supermap/iclient-ol": "^11.1.1",
@@ -27,12 +18,13 @@
     "axios": "^1.7.2",
     "echarts": "^5.1.0",
     "flv.js": "^1.6.2",
+    "gis-map-xinjiang": "^0.0.3",
     "ol": "^7.5.2",
     "ol-echarts": "^4.0.1",
     "ol-ext": "^4.0.22",
     "ol-mapbox-style": "^12.3.2",
     "proj4": "^2.14.0",
-    "vue": "^3.5.18"
+    "vue": "^3.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.0",
@@ -50,4 +42,4 @@
   ],
   "author": "HHF",
   "license": "MIT"
-}
+}

package/packages/gisMapXinJiang/component/ClusterList.vue

@@ -1,140 +0,0 @@
-<template>
-  <div class="clusterListPopup">
-    <ul class="paginate-list">
-      <li
-        class="list-item"
-        v-for="(item, index) in clusterList"
-        :key="index"
-        :class="{ active: selectedIndex === index }" 
-        @click="danji(item, index)"
-      >
-        <!-- <img class="item-icon" :src="item.iconUrl" /> -->
-        <div class="item-content" :title="item.otherInfo.name">
-          {{ item.otherInfo.name }}
-        </div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    popupAttr: Array,
-  },
-  data() {
-    return {
-      clusterList: [],
-      rightComponent: null,
-      popupAttributes: null,
-      selectedIndex: null // 当前选中的索引
-    };
-  },
-  mounted() {
-    this.selectedIndex = 0;
-  },
-  computed: {},
-  methods: {
-    danji(item, index) {
-      this.selectedIndex = index;
-    },
-    
-  },
-  watch: {
-    popupAttr: {
-      handler(newVal, oldVal) {
-        this.clusterList = newVal.map((e) => e.getProperties());
-      },
-      immediate: true,
-    },
-  },
-};
-</script>
-<style scoped>
-.clusterListPopup {
-  width: 2.75rem;
-  height: 1.9rem;
-  font-size: 0.1rem;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-ul li {
-  list-style-type: none;
-}
-.paginate-list li {
-  cursor: pointer;
-  padding: 0.032rem;
-}
-
-.paginate-list li.active {
-  background: linear-gradient(90deg, #01AAFD 0%, rgba(23, 148, 255, 0) 100%);
-  color: white;
-}
-.list-item {
-  height: 0.156rem;
-  padding: 1.3% 0;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: left;
-  border-bottom: thin solid rgba(255, 255, 255, 0.3);
-}
-.list-item:hover {
-  /* color: #007bff; */
-  background: linear-gradient(90deg, #01AAFD 0%, rgba(23, 148, 255, 0) 100%);
-}
-.item-icon {
-  width: 0.16rem;
-  height: 0.16rem;
-  margin-right: 0.065rem;
-}
-.item-content {
-  letter-spacing: 1px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.paginate-list {
-  height: 100%;
-  width: 0.65rem;
-  padding: 0;
-  margin: 1% 0 0 0;
-  overflow: auto;
-  font-size: 0.073rem;
-  background: rgba(0,112,195,0.3);
-}
-*::-webkit-scrollbar {
-  width: 0.07rem;
-  height: 0.07rem;
-}
-*::-webkit-scrollbar-button {
-  width: 0;
-  height: 0;
-  display: none;
-}
-*::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
-*::-webkit-scrollbar-thumb {
-  min-height: 0.078rem;
-  border: 0.026rem solid transparent;
-  background-clip: content-box;
-  border-radius: 7px;
-  background-color: #c8d5e1;
-}
-*::-webkit-scrollbar-thumb:hover {
-  background-color: #a8bbcf;
-}
-*::-webkit-scrollbar-thumb:active {
-  background-color: #87a2bd;
-}
-*::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-*::-webkit-scrollbar-track-piece {
-  background-color: transparent;
-}
-
-</style>

package/packages/gisMapXinJiang/index.vue

@@ -1,183 +0,0 @@
-<template>
-  <div :class="themeClass">
-    <div
-      id="map"
-      :class="mapBackground"
-      :style="{ '--height': mapBoxHeight }"
-    ></div>
-    <div class="popupBox" v-show="shopPopup" ref="popup">
-      <div id="popupHeader">
-        <div id="popupHeaderTitle">详细信息</div>
-        <div id="closePopup" @click="closePopup"></div>
-      </div>
-      <div id="popupContent">
-        <component
-          :is="currentTabComponent"
-          :popupAttr="popupAttributes"
-          ref="infoWindowRef"
-          @clickPointEvent="clickPointEvent"
-        ></component>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, watch, defineProps, defineEmits } from 'vue'
-import "ol/ol.css";
-import { Map, View } from "ol";
-import { defaults } from "ol/control";
-// import "ol-mapbox-style/dist/olms.js";
-import { fromLonLat } from "ol/proj";
-import { useBaseLayers } from "./js/initBaseLayers";
-
-// 定义props
-const props = defineProps({
-  mapBoxHeight: {
-    type: String,
-    default: "100vh",
-  },
-  mapZoom: {
-    type: String,
-    default: "8.3",
-  },
-  mapCenter: {
-    type: Array,
-    default: () => [118.65, 36.23],
-  },
-  themeStyle: {
-    type: String,
-    default: "dark",
-  },
-});
-
-// 定义emits
-const emit = defineEmits(['clickPointEvent']);
-
-// 响应式数据
-const map = ref(null);
-const shopPopup = ref(false);
-const currentTabComponent = ref(null);
-const popupAttributes = ref(null);
-const popup = ref(null);
-const infoWindowRef = ref(null);
-
-// 计算属性
-const normalizedThemeStyle = computed(() => {
-  return ["dark", "light", "yingxiang"].includes(props.themeStyle)
-    ? props.themeStyle
-    : "dark";
-});
-
-const themeClass = computed(() => {
-  return {
-    "theme-dark": normalizedThemeStyle.value === "dark",
-    "theme-light": normalizedThemeStyle.value === "light",
-    "theme-yingxiang": normalizedThemeStyle.value === "yingxiang",
-  };
-});
-
-const mapBackground = computed(() => {
-  return {
-    "map-dark-background": normalizedThemeStyle.value === "dark",
-    "map-light-background": normalizedThemeStyle.value === "light",
-    "map-yingxiang-background": normalizedThemeStyle.value === "yingxiang",
-  };
-});
-
-// 使用 useBaseLayers composable
-const {
-  initBaseLayers,
-  overlayPopup
-} = useBaseLayers(map, normalizedThemeStyle, emit);
-
-// 方法
-const initMap = () => {
-  map.value = new Map({
-    target: "map",
-    view: new View({
-      center: props.mapCenter,
-      zoom: parseFloat(props.mapZoom),
-      projection: "EPSG:4326",
-      extent: [50, 23, 122, 58],
-    }),
-    controls: defaults({
-      attribution: false,
-      zoom: false,
-      rotate: false,
-    }),
-  });
-  
-  // 调用初始化基础图层的方法
-  initBaseLayers();
-};
-
-const showPopup = () => {
-  shopPopup.value = true;
-};
-
-const closePopup = () => {
-  if (infoWindowRef.value) {
-    if (typeof infoWindowRef.value.destroyFlv === "function") {
-      infoWindowRef.value.destroyFlv();
-    }
-  }
-  shopPopup.value = false;
-  // overlayPopup 从 useBaseLayers 中获取
-  if (overlayPopup.value) {
-    overlayPopup.value.setPosition(undefined);
-  }
-};
-
-const clickPointEvent = (obj) => {
-  emit("clickPointEvent", obj);
-};
-
-// 监听器
-watch(() => props.mapZoom, (newVal) => {
-  if (map.value) {
-    const view = map.value.getView();
-    view.setZoom(Number(newVal));
-  }
-});
-
-// 生命周期钩子
-onMounted(() => {
-  initMap();
-});
-</script>
-
-<style scoped>
-#map {
-  width: 100%;
-  height: var(--height);
-}
-.map-dark-background {
-  background: linear-gradient(to right, #1b2639 40%, #183157 60%);
-}
-.map-light-background {
-  background: #eeeee9;
-}
-.map-yingxiang-background {
-  background: transparent;
-}
-.theme-dark {
-  --border-color: #0061b5;
-  --background-color: rgba(1, 18, 56, 0.8);
-  --checkbox-label-color: #ffffff;
-  --checkbox-border-color: #0169c8;
-}
-
-.theme-light {
-  --border-color: #adacac;
-  --background-color: rgba(255, 255, 255, 0.8);
-  --checkbox-label-color: #000000;
-  --checkbox-border-color: #adacac;
-}
-.theme-yingxiang{
-  --border-color: #adacac;
-  --background-color: rgba(255, 255, 255, 0.65);
-  --checkbox-label-color: #000000;
-  --checkbox-border-color: #adacac;
-}
-</style>