同步代码

Author: muyao1987

public/config/example.json

@@ -2409,6 +2409,13 @@
             "api": "Regular.html",
             "hasPannel": true
           },
+          {
+            "name": "平行四边形",
+            "thumbnail": "graphic-entity-polygon-parallelogram.jpg",
+            "main": "graphic/entity/polygon-parallelogram",
+            "api": "Parallelogram.html",
+            "hasPannel": true
+          },
           {
             "name": "井",
             "thumbnail": "graphic-primitive-pit.jpg",

public/config/thumbnail/control-basis-clockAnimate-duration.jpg

@@ -1,8 +1,8 @@
 /**
  * Mars3D三维可视化平台  mars3d
  *
- * 版本信息：v3.8.7
- * 编译日期：2024-11-14 18:36
+ * 版本信息：v3.8.8
+ * 编译日期：2024-11-23 11:59
  * 版权所有：Copyright by 火星科技  http://mars3d.cn
  * 使用单位：免费公开版 ，2024-08-01
  */

public/config/thumbnail/control-basis-compass.jpg

@@ -28,6 +28,8 @@ function init() {
       }).then(function (m) {
         parentGlobal._mapInstance = m
         parentGlobal.mapWork = window
+
+        parentGlobal.map = m // only for test
       })
       // parentGlobal._mapInstance = initMapFun(json.map3d)
       // parentGlobal.mapWork = window // 这句话是将当前js对象绑定赋予给index.项目内进行调用

public/config/thumbnail/control-basis-cubeView.jpg

@@ -7,7 +7,7 @@ let terrainClip
 // 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并)
 export const mapOptions = {
   scene: {
-    center: { lat: 30.773023, lng: 116.473055, alt: 133111.3, heading: 40.4, pitch: -47.9 },
+    center: { lat: 21.748008, lng: 113.230533, alt: 699712.9, heading: 350.3, pitch: -52 },
     orderIndependentTranslucency: false,
     backgroundImage: "url(//data.mars3d.cn/img/busines/background1.jpg)",
     showMoon: false,
@@ -27,7 +27,9 @@ export const mapOptions = {
 }
 
 // 行政区划编码(全国统一，可以按需修改其他省市县编码)
-const xzqhCode = "340100"
+const xzqhCode = "430000"
+
+const wallHeight = 40000 // 墙高
 
 /**
  * 初始化地图业务，生命周期钩子函数（必须）
@@ -94,8 +96,8 @@ export function onMounted(mapInstance) {
       const wall = new mars3d.graphic.WallPrimitive({
         positions: options.positions,
         style: {
-          setHeight: -20000,
-          diffHeight: 20000, // 墙高
+          setHeight: -wallHeight,
+          diffHeight: wallHeight, // 墙高
           width: 10,
           materialType: mars3d.MaterialType.Image2,
           materialOptions: {
@@ -160,7 +162,7 @@ function addCenterGraphi(attr) {
     position: attr.centroid,
     style: {
       html: `<div class="mars-four-color mars3d-animation">
-                <img src="${getImage()}"  class="four-color_bg"></img>
+                <img src="//data.mars3d.cn/img/marker/bg/${getImage()}"  class="four-color_bg"></img>
                 <div class="four-color_name">${attr.name}</div>
             </div>`,
       horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
@@ -172,29 +174,21 @@ function addCenterGraphi(attr) {
   graphicLayer.addGraphic(divGraphic)
 }
 
-// 简化geojson的坐标
-function simplifyGeoJSON(geojson) {
-  try {
-    geojson = turf.simplify(geojson, { tolerance: 0.009, highQuality: true, mutate: true })
-  } catch (e) {
-    //
-  }
-  return geojson
-}
+
 
 // 根据随机数字取图片
 function getImage() {
   const num = Math.floor(Math.random() * 5)
   switch (num) {
     case 1:
-      return "/img/icon/map-title-y.png"
+      return "map-title-y.png"
     case 2:
-      return "/img/icon/map-title-h.png"
+      return "map-title-h.png"
     case 3:
-      return "/img/icon/map-title-o.png"
+      return "map-title-o.png"
     case 4:
-      return "/img/icon/map-title-r.png"
+      return "map-title-r.png"
     default:
-      return "/img/icon/map-title-b.png"
+      return "map-title-b.png"
   }
 }

public/config/thumbnail/control-basis-mapSplit.jpg

@@ -6,7 +6,7 @@ export let graphicLayer // 矢量图层对象
 // 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
 export const mapOptions = {
   scene: {
-    center: { lat: 30.053342, lng: 117.677104, alt: 187118, heading: 350, pitch: -50 },
+    center: { lat: 21.748008, lng: 113.230533, alt: 699712.9, heading: 350.3, pitch: -52 },
     showSun: false,
     showMoon: false,
     showSkyBox: false,
@@ -26,6 +26,11 @@ export const mapOptions = {
   layers: []
 }
 
+// 行政区划编码(全国统一，可以按需修改其他省市县编码)
+const xzqhCode = "430000"
+
+const wallHeight = 40000 // 墙高
+
 /**
  * 初始化地图业务，生命周期钩子函数（必须）
  * 框架在地图初始化完成后自动调用该函数
@@ -35,15 +40,14 @@ export const mapOptions = {
 export function onMounted(mapInstance) {
   map = mapInstance // 记录map
 
-  // 合肥市边界墙
   const borderWall = new mars3d.layer.GeoJsonLayer({
-    name: "合肥市边界墙",
-    url: "//data.mars3d.cn/file/geojson/areas/340100.json",
+    name: "边界墙",
+    url: `//data.mars3d.cn/file/geojson/areas/${xzqhCode}.json`,
     symbol: {
       type: "wallP",
       styleOptions: {
-        setHeight: -25000,
-        diffHeight: 25000, // 墙高
+        setHeight: -wallHeight,
+        diffHeight: wallHeight, // 墙高
         materialType: mars3d.MaterialType.Image2,
         materialOptions: {
           image: "//data.mars3d.cn/img/textures/fence-top.png",
@@ -54,10 +58,6 @@ export function onMounted(mapInstance) {
   })
   map.addLayer(borderWall)
 
-  // 创建矢量数据图层
-  graphicLayer = new mars3d.layer.GraphicLayer()
-  map.addLayer(graphicLayer)
-
   addGraphics()
 }
 
@@ -77,76 +77,69 @@ export function onUnmounted() {
  *polygon面 PolylineEntity线  光锥体  和 LED数字显示
  * @returns {void} 无
  */
-function addGraphics() {
-  mars3d.Util.fetchJson({ url: "//data.mars3d.cn/file/geojson/areas/340100_full.json" })
-    .then(function (geojson) {
-      const arr = mars3d.Util.geoJsonToGraphics(geojson) // 解析geojson
-
-      for (let i = 0; i < arr.length; i++) {
-        const item = arr[i]
-
-        // polygon面
-        const polygonEntity = new mars3d.graphic.PolygonEntity({
-          positions: item.positions,
-          style: {
-            fill: true,
-            color: "#4881a7",
-            opacity: 0.5,
-            label: {
-              text: item.attr.name,
-              font_size: 20,
-              color: "#ffffff",
-              font_family: "楷体",
-              outline: true,
-              outlineColor: "black",
-              setHeight: 2000,
-              visibleDepth: false,
-              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 500000),
-              scaleByDistance: new Cesium.NearFarScalar(200000, 1.0, 500000, 0.5)
-            }
-          }
-        })
-        graphicLayer.addGraphic(polygonEntity)
-
-        // PolylineEntity线
-        const graphicLine = new mars3d.graphic.PolylineEntity({
-          positions: item.positions,
-          style: {
-            color: "rgba(255,255,255,0.5)",
-            width: 1
-          }
-        })
-        graphicLayer.addGraphic(graphicLine)
-
-        // 中心点
-        const center = item.attr.centroid
-
-        // 光锥体
-        const coneGlow = new mars3d.graphic.LightCone({
-          position: center,
-          style: {
-            radius: 1500,
-            height: 15000
-          }
-        })
-        graphicLayer.addGraphic(coneGlow)
-
-        // LED数字显示
-        const number = Math.floor(Math.random() * (4000 - 3000 + 1) + 3000) // 随机数字 3000-4000
-        const graphic = new mars3d.graphic.DivGraphic({
-          position: [center[0], center[1], 12000],
-          style: {
-            html: `<div class ="coneNum">${number}`,
-            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-            verticalOrigin: Cesium.VerticalOrigin.CENTER,
-            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 500000),
-            scaleByDistance: new Cesium.NearFarScalar(200000, 1.0, 500000, 0.5)
+async function addGraphics() {
+  const url = `//data.mars3d.cn/file/geojson/areas/${xzqhCode}_full.json`
+  const geojson = await mars3d.Util.fetchJson({ url: url })
+
+  const arr = mars3d.Util.geoJsonToGraphics(geojson) // 解析geojson
+
+  // 创建矢量数据图层
+  graphicLayer = new mars3d.layer.GraphicLayer()
+  map.addLayer(graphicLayer)
+
+  for (let i = 0; i < arr.length; i++) {
+    const item = arr[i]
+    if (!item.isMultiMax) {
+      continue
+    }
+    // polygon面
+    const polygonEntity = new mars3d.graphic.PolygonEntity({
+      positions: item.positions,
+      style: {
+        fill: true,
+        color: "#4881a7",
+        opacity: 0.5,
+        outline: true,
+        outlineStyle: {
+          color: "rgba(255,255,255,0.5)",
+          width: 1
+        },
+        // 高亮时的样式
+        highlight: {
+          opacity: 0.9,
+          outlineStyle: {
+            width: 2
           }
-        })
-        graphicLayer.addGraphic(graphic)
+        }
       }
     })
-    .catch(function (error) {
-      console.log("加载JSON出错", error)
+    graphicLayer.addGraphic(polygonEntity)
+
+    // 中心点
+    const center = item.attr.centroid
+
+    // 光锥体
+    const coneGlow = new mars3d.graphic.LightCone({
+      position: center,
+      style: {
+        radius: wallHeight * 0.1,
+        height: wallHeight
+      }
+    })
+    graphicLayer.addGraphic(coneGlow)
+
+    // LED数字显示
+    const number = Math.floor(Math.random() * (400 - 300 + 1) + 300) // 随机数字
+    const graphic = new mars3d.graphic.DivGraphic({
+      position: [center[0], center[1], wallHeight],
+      style: {
+        html: `<div class ="coneNum">${item.attr.name}:${number}</div>`,
+        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+        verticalOrigin: Cesium.VerticalOrigin.CENTER,
+        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 2000000),
+        scaleByDistance: new Cesium.NearFarScalar(500000, 1.0, 1000000, 0.5)
+      }
     })
+    graphicLayer.addGraphic(graphic)
+  }
 }

public/config/thumbnail/control-basis-overviewmap.jpg

@@ -94,6 +94,7 @@ function addGraphicLayer() {
 
   // ui面板信息展示
   fixedRoute.on(mars3d.EventType.change, mars3d.Util.funThrottle((event) => {
+    // 取实时信息，可以通过  fixedRoute.info
     eventTarget.fire("roamLineChange", event)
   }, 500))
 

public/config/thumbnail/control-basis-subtitles.jpg

@@ -156,6 +156,7 @@ function addGraphicLayer() {
     model: {
       url: "//data.mars3d.cn/gltf/mars/MQ-9-Predator.glb",
       scale: 1,
+      heading: 0,
       minimumPixelSize: 100
     },
     path: {
@@ -178,6 +179,7 @@ function addGraphicLayer() {
 
   // ui面板信息展示
   fixedRoute.on(mars3d.EventType.change, mars3d.Util.funThrottle((event) => {
+    // 取实时信息，可以通过  fixedRoute.info
     eventTarget.fire("roamLineChange", event)
   }, 500))
 

public/config/thumbnail/control-cesium-fullscreenButton.jpg

@@ -93,6 +93,7 @@ function addRoamLine() {
 
   // ui面板信息展示
   fixedRoute.on(mars3d.EventType.change, mars3d.Util.funThrottle((event) => {
+    // 取实时信息，可以通过  fixedRoute.info
     eventTarget.fire("roamLineChange", event)
   }, 500))
 

public/config/thumbnail/control-cesium-webvr.jpg

@@ -99,6 +99,7 @@ function addGraphicLayer() {
   })
   // ui面板信息展示
   fixedRoute.on(mars3d.EventType.change, mars3d.Util.funThrottle((event) => {
+    // 取实时信息，可以通过  fixedRoute.info
     eventTarget.fire("roamLineChange", event)
   }, 500))
 

public/config/thumbnail/control-inside-popup.jpg

@@ -95,6 +95,7 @@ function addGraphicLayer(arr) {
 
   // ui面板信息展示
   fixedRoute.on(mars3d.EventType.change, mars3d.Util.funThrottle((event) => {
+    // 取实时信息，可以通过  fixedRoute.info
     eventTarget.fire("roamLineChange", event)
   }, 500))
 

public/config/thumbnail/control-inside-tooltip.jpg

@@ -36,6 +36,7 @@ export function onMounted(mapInstance) {
 
   // ui面板信息展示
   fixedRoute.on(mars3d.EventType.change, mars3d.Util.funThrottle((event) => {
+    // 取实时信息，可以通过  fixedRoute.info
     eventTarget.fire("roamLineChange", event)
   }, 500))
 

public/config/thumbnail/effect-bloom.jpg

@@ -105,6 +105,7 @@ function addGraphicLayer() {
 
   // ui面板信息展示
   fixedRoute.on(mars3d.EventType.change, mars3d.Util.funThrottle((event) => {
+    // 取实时信息，可以通过  fixedRoute.info
     eventTarget.fire("roamLineChange", event)
   }, 500))
 

public/config/thumbnail/effect-brightness.jpg

@@ -0,0 +1,16 @@
+import { MarsPannel } from "@mars/components/MarsUI"
+import { GraphicLayerState } from "@mars/components/MarsSample/GraphicLayerState"
+import { LocationTo } from "@mars/components/MarsSample/LocationTo"
+
+function UIComponent() {
+  return (
+    <>
+      <MarsPannel visible={true} top={10} right={10}>
+        <GraphicLayerState drawLabel1={"绘制面"} drawLabel2={"绘制立体面"} />
+      </MarsPannel>
+      <LocationTo />
+    </>
+  )
+}
+
+export default UIComponent