gis-map-xinjiang 0.0.4 → 0.0.5

package/package.json

@@ -1,16 +1,25 @@
 {
   "name": "gis-map-xinjiang",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "GIS通用组件 - Vue 3 版本",
   "main": "dist/gismap.umd.js",
   "module": "dist/gismap.es.js",
   "files": [
-    "dist/*"
+    "dist",
+    "packages/**/*"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/gismap.es.js",
+      "require": "./dist/gismap.umd.js"
+    },
+    "./packages/*": "./packages/*"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lib": "vite build"
   },
   "dependencies": {
     "@supermap/iclient-ol": "^11.1.1",

package/packages/gisMapXinJiang/component/ClusterList.vue

@@ -0,0 +1,140 @@
+<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

@@ -0,0 +1,183 @@
+<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>