增加popup示例

src/widgets/basic/SearchPoi/QueryPopup.tsx

+import { useRef } from "react"
+import styles from "./index.module.less"
+
+export default function (props) {
+  const attr = useRef<any>({ ...props.attr })
+
+  return (
+    <div className={"mars3d-popup-content-wrapper mars3d-popup-background"}>
+      <span className="mars3d-popup-close-button mars3d-popup-color closeButton"> × </span>
+
+      <div className="mars3d-popup-content-wrapper mars3d-popup-background">
+        <div className="mars3d-template-titile">
+          <a href={"https://www.amap.com/detail/" + attr.current.id} target="_black">
+            {attr.current.name}
+          </a>
+        </div>
+        <div className={`mars3d-template-content ${styles["mars3d-template-content"]}`}>
+          {attr.current.tel && attr.current.tel.length ? (
+            <div>
+              <label>电话:</label> {attr.current.tel}
+            </div>
+          ) : (
+            ""
+          )}
+
+          <div>
+            {attr.current.address ? (
+              <div>
+                <label>地址:</label> {attr.current.address}
+              </div>
+            ) : (
+              ""
+            )}
+          </div>
+          <div>
+            {attr.current.type ? (
+              <div>
+                <label>类别:</label> {attr.current.type}
+              </div>
+            ) : (
+              ""
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/widgets/basic/SearchPoi/index.module.less

@@ -139,3 +139,8 @@
     }
   }
 }
+
+.mars3d-template-content {
+  padding: 12px;
+  padding-top: 0;
+}

src/widgets/basic/SearchPoi/index.tsx

@@ -5,6 +5,9 @@ import * as mapWork from "./map"
 import { useLifecycle } from "@mars/widgets/common/uses/useLifecycle"
 import styles from "./index.module.less"
 
+import { renderToString } from "react-dom/server"
+import QueryPopup from "./QueryPopup"
+
 const storageName = "mars3d_queryGaodePOI"
 const url = "//www.amap.com/detail/"
 
@@ -22,6 +25,22 @@ export default function (props) {
     if (searchTxt === "") {
       setSearchListShow(false)
     }
+
+    // 绑定popup
+    mapWork.graphicLayer.bindPopup(
+      (event) => {
+        const attr = event.graphic.attr || {}
+        if (!attr) {
+          return
+        }
+
+        // 示例比较特殊，使用 renderToString 返回一个html元素；
+        // 也可使用 createPortal ，具体用法参考react文档 或 mars3d基础项目
+        const html = renderToString(<QueryPopup attr={attr} />)
+        return html
+      },
+      { template: false }
+    )
   })
 
   let timer = useRef<any>()

src/widgets/basic/SearchPoi/map.ts

@@ -7,7 +7,7 @@ import * as mars3d from "mars3d"
 const Cesium = mars3d.Cesium
 
 let map: mars3d.Map // 地图对象
-let graphicLayer: mars3d.layer.GraphicLayer
+export let graphicLayer: mars3d.layer.GraphicLayer
 let queryPoi: mars3d.query.GaodePOI // GaodePOI查询
 let address: any = null
 
@@ -24,30 +24,6 @@ export function onMounted(mapInstance: mars3d.Map): void {
     pid: 99 // 图层管理 中使用，父节点id
   })
 
-  graphicLayer.bindPopup(function (event: any) {
-    const item = event.graphic?.attr
-    if (!item) {
-      return
-    }
-    let inHtml = `<div class="mars3d-template-titile"><a href="https://www.amap.com/detail/${item.id}"  target="_black" style="color: #ffffff; ">${item.name}</a></div><div class="mars3d-template-content" >`
-
-    if (item.tel !== "") {
-      inHtml += "<div><label>电话:</label>" + item.tel + "</div>"
-    }
-
-    if (item.address) {
-      inHtml += "<div><label>地址:</label>" + item.address + "</div>"
-    }
-    if (item.type) {
-      const fl = item.type
-      if (fl !== "") {
-        inHtml += "<div><label>类别:</label>" + fl + "</div>"
-      }
-    }
-    inHtml += "</div>"
-    return inHtml
-  })
-
   map.addLayer(graphicLayer)
 
   map.on(mars3d.EventType.cameraChanged, cameraChanged)