Domovská stránka Prehľadávať Pomoc
Registrovať Prihlásiť sa
lianghj
/
queenshow
1
0
Fork 0
Súbory Issues 0 Pull requesty 0 Wiki
Prechádzať zdrojové kódy

map

qinyan 1 rok pred
rodič
bd9f69d5d2
commit
775c072822
10 zmenil súbory, kde vykonal 223 pridanie a 4 odobranie
Rozdelené zobrazenie Ukázať štatistiku rozdielnych dát
  1. 11 0
      package-lock.json
  2. 1 0
      package.json
  3. 7 0
      public/index.html
  4. 9 0
      src/modules/editor/assets/icons/address.svg
  5. 21 0
      src/modules/editor/components/CompUI/basicUI/Map/component.tsx
  6. 27 0
      src/modules/editor/components/CompUI/basicUI/Map/index.ts
  7. 2 1
      src/modules/editor/components/CompUI/basicUI/index.ts
  8. 126 0
      src/modules/editor/components/CompUI/formItems/MapAttr.tsx
  9. 14 3
      src/modules/editor/components/Viewport/Slider/SliderLeft/BaseComp.tsx
  10. 5 0
      yarn.lock

+ 11 - 0
package-lock.json
Zobraziť súbor 

@@ -8,6 +8,7 @@
 
       "name": "queen.cloud",
 
       "version": "0.0.1",
 
       "dependencies": {
 
+        "@amap/amap-jsapi-loader": "^1.0.1",
 
         "@ckeditor/ckeditor5-alignment": "^38.0.0",
 
         "@ckeditor/ckeditor5-basic-styles": "^38.0.0",
 
         "@ckeditor/ckeditor5-build-classic": "^38.0.1",
 
@@ -117,6 +118,11 @@
 
         "node": "8 || 9 || 10 || 11 || 12 || 13 || 14 || 15 || 16 || 17 || 18 || 19"
 
       }
 
     },
 
+    "node_modules/@amap/amap-jsapi-loader": {
 
+      "version": "1.0.1",
 
+      "resolved": "https://registry.npmjs.org/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
 
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
 
+    },
 
     "node_modules/@ampproject/remapping": {
 
       "version": "2.2.1",
 
       "resolved": "http://124.70.149.18:4873/@ampproject%2fremapping/-/remapping-2.2.1.tgz",
 
@@ -16775,6 +16781,11 @@
 
         "js-message": "1.0.7"
 
       }
 
     },
 
+    "@amap/amap-jsapi-loader": {
 
+      "version": "1.0.1",
 
+      "resolved": "https://registry.npmjs.org/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
 
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
 
+    },
 
     "@ampproject/remapping": {
 
       "version": "2.2.1",
 
       "resolved": "http://124.70.149.18:4873/@ampproject%2fremapping/-/remapping-2.2.1.tgz",

+ 1 - 0
package.json
Zobraziť súbor 

@@ -15,6 +15,7 @@
 
     "deploy": "npm run build && npm run uploadOss && npm run uploadServer"
 
   },
 
   "dependencies": {
 
+    "@amap/amap-jsapi-loader": "^1.0.1",
 
     "@ckeditor/ckeditor5-alignment": "^38.0.0",
 
     "@ckeditor/ckeditor5-basic-styles": "^38.0.0",
 
     "@ckeditor/ckeditor5-build-classic": "^38.0.1",

+ 7 - 0
public/index.html
Zobraziť súbor 

@@ -23,6 +23,13 @@
 
         s.parentNode.insertBefore(hm, s);
 
       })();
 
     </script>
 
+    <script type="text/javascript">
 
+      window._AMapSecurityConfig = {
 
+        securityJsCode: 'bf7d8bf1e71d89263dcbf4829882791d',
 
+      }  </script>
 
+    <script type="text/javascript"
 
+      src="https://webapi.amap.com/maps?v=2.0&key=e8d3513c8551b20ec90b991249fa59a1&plugin=AMap.AutoComplete,AMap.Geocoder"></script>
 
+
 
   </head>
 
 
   <body>

+ 9 - 0
src/modules/editor/assets/icons/address.svg
Zobraziť súbor 

@@ -0,0 +1,9 @@
 
+<svg t="1689925448619" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1494"
 
+    width="64" height="64">
 
+    <path
 
+        d="M832 389.3c-0.5 49.1-16.2 94.1-37.5 137.4-31.8 65-74 123-119.8 178.6-42.6 51.7-88.5 100.6-137.4 146.4-17.1 16-32.7 16.5-50.2 0.8-90.6-81.4-172.1-170.6-234.3-276.1-10.1-17.2-19.3-34.9-27.2-53.2-7.5-17.4-1-35.5 15.1-43 16.2-7.5 33.9-0.9 41.8 16.2 37.2 80.8 90.6 149.5 150 214.6 22.9 25.1 46.9 50.2 71.8 73.4 3.1 2.9 9 4.2 13.4-0.2 82.4-83 158.5-170 214.6-273.6C748.6 480.5 768 425.9 768 389c0-52.3-5.7-75.5-30.3-121-46.8-86.5-119.2-140-218.7-140-113.1 0-213.4 69.6-249 177.3-8.9 27.1-13.6 54.8-14 83.3-0.3 20.4-13.7 34.7-32.1 34.7-18.5 0-32-14.8-31.9-34.8 0.4-151.5 104.8-282.8 252-316.8C565.8 43.6 696.2 94.1 769.9 198c40.7 57.3 60.9 121.2 62.1 191.3z"
 
+        p-id="1495" fill="#a9abaf"></path>
 
+    <path
 
+        d="M512.5 256c-70.9-0.1-128.5 57.2-128.5 128 0 70.3 57.3 127.9 127.5 128 70.8 0.2 128.5-57.3 128.5-128 0-70.4-57.3-127.9-127.5-128z m0.6 192c-36 0.3-65.2-28.4-65.1-64.1 0.1-35.3 28.8-63.9 64.4-63.9 34.7 0 63.5 28.7 63.6 63.6 0.1 34.9-28.3 64.1-62.9 64.4zM960 928v-0.4-1-0.6c0-0.4 0-0.7-0.1-1.1 0-0.2 0-0.4-0.1-0.5 0-0.3-0.1-0.6-0.1-1 0-0.2-0.1-0.4-0.1-0.7 0-0.2-0.1-0.5-0.1-0.7-0.1-0.3-0.1-0.6-0.2-1 0-0.1 0-0.2-0.1-0.3-0.9-3.9-2.4-7.5-4.6-10.7L827 689.3c-8.6-14.9-27.8-20-42.6-11.4l-1.4 0.8c-14.9 8.6-20 27.8-11.4 42.6L872.5 896h-721l100.3-173.7c8.8-15.2 3.5-34.9-11.7-43.7-15.2-8.8-34.9-3.5-43.7 11.7L68.3 912c-1.2 2.1-2.1 4.2-2.8 6.5v0.1c-0.1 0.4-0.3 0.9-0.4 1.3 0 0.1-0.1 0.3-0.1 0.4-0.1 0.3-0.2 0.7-0.2 1 0 0.2-0.1 0.5-0.1 0.7 0 0.2-0.1 0.5-0.1 0.7-0.1 0.3-0.1 0.7-0.1 1 0 0.2 0 0.3-0.1 0.5 0 0.4-0.1 0.8-0.1 1.2v0.2c-0.1 0.8-0.1 1.5-0.1 2.3 0 4.4 0.9 8.7 2.6 12.5 2.6 6.2 7.2 11.6 13.4 15.2 4.5 2.6 9.4 4 14.2 4.2h833.8c16.8 0 30.7-13.2 31.9-29.7v-0.2-1-0.7c-0.1 0-0.1-0.1-0.1-0.2z"
 
+        p-id="1496" fill="#a9abaf"></path>
 
+</svg>

+ 21 - 0
src/modules/editor/components/CompUI/basicUI/Map/component.tsx
Zobraziť súbor 

@@ -0,0 +1,21 @@
 
+import { defineComponent } from "vue";
 
+import { string } from "vue-types";
 
+import { useCompData } from ".";
 
+import { useEditor } from "../../../..";
 
+import { View } from "../View";
 
+
 
+export const Component = defineComponent({
 
+  props: {
 
+    compId: string().isRequired,
 
+  },
 
+  setup(props) {
 
+    const { helper, controls, store } = useEditor();
 
+    const data = useCompData(props.compId);
 
+
 
+    return () => (
 
+      <View compId={props.compId}>
 
+        <div>地图</div>
 
+      </View>
 
+    );
 
+  },
 
+});

+ 27 - 0
src/modules/editor/components/CompUI/basicUI/Map/index.ts
Zobraziť súbor 

@@ -0,0 +1,27 @@
 
+import { createAttrsForm } from "../../defines/createAttrsForm";
 
+import { createCompHooks } from "../../defines/createCompHooks";
 
+import MapAttr from "../../formItems/MapAttr";
 
+
 
+export { Component } from "./component";
 
+
 
+export const options = {
 
+  name: "地图",
 
+  thumbnail: require("@/modules/editor/assets/icons/address.svg"),
 
+};
 
+
 
+export const { createComp, useCompData } = createCompHooks({
 
+  value: {
 
+    address: "",
 
+  },
 
+  layout: {
 
+    size: [750, 750],
 
+  },
 
+});
 
+
 
+export const Form = createAttrsForm([
 
+  {
 
+    // label: "颜色",
 
+    dataIndex: "value.address",
 
+    component: MapAttr,
 
+  },
 
+]);

+ 2 - 1
src/modules/editor/components/CompUI/basicUI/index.ts
Zobraziť súbor 

@@ -11,4 +11,5 @@ export * as Arc from "./Arc";
 
 export * as Ellipse from "./Ellipse";
 
 export * as Triangle from "./Triangle";
 
 export * as QuadraticCurve from "./QuadraticCurve";
 
-export * as Polygon from "./Polygon";
 
+export * as Polygon from "./Polygon";
 
+export * as Map from "./Map";

+ 126 - 0
src/modules/editor/components/CompUI/formItems/MapAttr.tsx
Zobraziť súbor 

@@ -0,0 +1,126 @@
 
+// import AMapLoader from "@amap/amap-jsapi-loader";
 
+import { Input } from "ant-design-vue";
 
+import { defineComponent, onMounted, reactive, ref } from "vue";
 
+declare const AMap: any;
 
+
 
+export default defineComponent({
 
+  emits: ["change"],
 
+  setup(props, { emit }) {
 
+    // const AMap = ref(AMap);
 
+    const map = ref();
 
+    const marker = ref();
 
+    const geocoder = ref();
 
+    const autoComplete = ref();
 
+
 
+    const state = reactive({
 
+      address: "天安门",
 
+      lnglat: [116.397428, 39.90923],
 
+    });
 
+
 
+    function clickMap(e: any) {
 
+      state.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
 
+      updateMarker();
 
+      regeoCode();
 
+    }
 
+
 
+    function updateMarker() {
 
+      marker.value.setPosition(state.lnglat);
 
+      map.value.add(marker.value);
 
+      map.value.setFitView(marker.value);
 
+    }
 
+
 
+    function geoCode() {
 
+      geocoder.value.getLocation(
 
+        state.address,
 
+        (status: string, result: any) => {
 
+          if (status === "complete" && result.geocodes.length) {
 
+            const lnglat = result.geocodes[0].location;
 
+            state.lnglat = lnglat;
 
+            updateMarker();
 
+          } else {
 
+            console.error("根据地址查询位置失败");
 
+          }
 
+        }
 
+      );
 
+    }
 
+
 
+    function regeoCode() {
 
+      geocoder.value.getAddress(
 
+        state.lnglat,
 
+        function (status: any, result: any) {
 
+          if (status === "complete" && result.regeocode) {
 
+            const address = result.regeocode.formattedAddress;
 
+            state.address = address;
 
+          } else {
 
+            console.error("根据经纬度查询地址失败");
 
+          }
 
+        }
 
+      );
 
+    }
 
+
 
+    const searchAddress = () => {
 
+      autoComplete.value.search(
 
+        state.address,
 
+        function (status: any, result: any) {
 
+          console.error("result: ", result);
 
+          // 搜索成功时，result即是对应的匹配数据
 
+        }
 
+      );
 
+    };
 
+
 
+    const initMap = () => {
 
+      map.value = new AMap.Map("container", {
 
+        //设置地图容器id
 
+        viewMode: "3D", //是否为3D地图模式
 
+        zoom: 11, //初始化地图级别
 
+        center: state.lnglat, //初始化地图中心点位置
 
+      });
 
+      // AMapLoader.load({
 
+      //   key: "e8d3513c8551b20ec90b991249fa59a1", // 申请好的Web端开发者Key，首次调用 load 时必填
 
+      //   version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 
+      //   plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.MouseTool"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
 
+      //   Loca: {
 
+      //     version: "2.0.0",
 
+      //   },
 
+      // })
 
+      //   .then((res) => {
 
+
 
+      // AMap.plugin(["AMap.Geocoder", "AMap.AutoComplete"], () => {
 
+      // 使用geocoder做地理/逆地理编码
 
+      geocoder.value = new AMap.Geocoder();
 
+      autoComplete.value = new AMap.AutoComplete({ city: "全国" });
 
+
 
+      // });
 
+
 
+      marker.value = new AMap.Marker({
 
+        position: state.lnglat, //位置
 
+      });
 
+      map.value.add(marker.value); //添加到地图
 
+
 
+      map.value.on("click", clickMap);
 
+      // })
 
+      // .catch((e) => {
 
+      //   console.log("error", e);
 
+      // });
 
+    };
 
+
 
+    onMounted(() => {
 
+      initMap();
 
+    });
 
+
 
+    return () => {
 
+      return (
 
+        <div class="w-1/1">
 
+          <Input.Search
 
+            value={state.address}
 
+            onChange={(e) => (state.address = e.target.value || "")}
 
+            placeholder="请输入地名"
 
+            class="w-1/1"
 
+            onSearch={searchAddress}
 
+          />
 
+          <div id="container" class="w-1/1 h-200px mt-10px"></div>
 
+        </div>
 
+      );
 
+    };
 
+  },
 
+});

+ 14 - 3
src/modules/editor/components/Viewport/Slider/SliderLeft/BaseComp.tsx
Zobraziť súbor 

@@ -13,9 +13,20 @@ export default defineComponent({
 
 
     const state = useReactive(() => ({
 
       basicComps() {
 
-        return ["Text", "Image", "Video", "Web3D", "Rectage", "Line", "Arc", "Ellipse", "Triangle", "QuadraticCurve", "Polygon"].map(
 
-          (key) => compUICtrl.state.components.get(key) as any
 
-        );
 
+        return [
 
+          "Text",
 
+          "Image",
 
+          "Video",
 
+          "Web3D",
 
+          "Rectage",
 
+          "Line",
 
+          "Arc",
 
+          "Ellipse",
 
+          "Triangle",
 
+          "QuadraticCurve",
 
+          "Polygon",
 
+          // "Map",
 
+        ].map((key) => compUICtrl.state.components.get(key) as any);
 
       },
 
     }));

+ 5 - 0
yarn.lock
Zobraziť súbor 

@@ -11,6 +11,11 @@
 
     "event-pubsub" "4.3.0"
 
     "js-message" "1.0.7"
 
 
+"@amap/amap-jsapi-loader@^1.0.1":
 
+  "integrity" "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
 
+  "resolved" "https://registry.npmjs.org/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz"
 
+  "version" "1.0.1"
 
+
 
 "@ampproject/remapping@^2.2.0":
 
   "integrity" "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg=="
 
   "resolved" "http://124.70.149.18:4873/@ampproject%2fremapping/-/remapping-2.2.1.tgz"