修改bug

marsgis · Dec 19, 2021 · 6ce3512 · 6ce3512
1 parent fd7d467
commit 6ce3512
Show file tree

Hide file tree

Showing 12 changed files with 119 additions and 11 deletions.
diff --git a/public/config/example.json b/public/config/example.json
@@ -2158,8 +2158,9 @@
           },
           {
             "name": "全球城市白膜(OSM在线)",
+            "main": "layer-tileset/type/osmBuildings",
             "date": "2021-11-10",
-            "main": "layer-tileset/type/osmBuildings"
+            "usePannel": true
           }
         ]
       },

diff --git a/src/example/graphic/divGraphic/basis/map.js b/src/example/graphic/divGraphic/basis/map.js
@@ -24,7 +24,7 @@ export function onMounted(mapInstance) {
   })
 
   // 创建DIV数据图层
-  graphicLayer = new mars3d.layer.DivLayer()
+  graphicLayer = new mars3d.layer.GraphicLayer()
   map.addLayer(graphicLayer)
 
   // 在layer上绑定监听事件

diff --git a/src/example/graphic/divGraphic/divLightPoint/map.js b/src/example/graphic/divGraphic/divLightPoint/map.js
@@ -75,7 +75,7 @@ function addFeature(arr) {
   const pointColorArr = ["#f33349", "#f79a2c", "#f2fa19", "#95e40c", "#1ffee6"]
 
   // 创建DIV数据图层
-  const graphicLayer = new mars3d.layer.DivLayer()
+  const graphicLayer = new mars3d.layer.GraphicLayer()
   map.addLayer(graphicLayer)
 
   // 在layer上绑定监听事件

diff --git a/src/example/graphic/divGraphic/echarts-liqiudfill/map.js b/src/example/graphic/divGraphic/echarts-liqiudfill/map.js
@@ -30,7 +30,7 @@ export function onMounted(mapInstance) {
   map.addLayer(tiles3dLayer)
 
   // 创建div数据图层
-  graphicLayer = new mars3d.layer.DivLayer()
+  graphicLayer = new mars3d.layer.GraphicLayer()
   map.addLayer(graphicLayer)
 
   // 添加矢量数据

diff --git a/src/example/graphic/divGraphic/echarts-pie/map.js b/src/example/graphic/divGraphic/echarts-pie/map.js
@@ -20,7 +20,7 @@ export function onMounted(mapInstance) {
   map = mapInstance // 记录首次创建的map
 
   // 创建div图层
-  graphicLayer = new mars3d.layer.DivLayer()
+  graphicLayer = new mars3d.layer.GraphicLayer()
   map.addLayer(graphicLayer)
 
   const arrData = [

diff --git a/src/example/graphic/divGraphic/ident/map.js b/src/example/graphic/divGraphic/ident/map.js
@@ -41,7 +41,7 @@ export function onMounted(mapInstance) {
   map.addLayer(tiles3dLayer)
 
   // 创建DIV数据图层
-  graphicLayer = new mars3d.layer.DivLayer()
+  graphicLayer = new mars3d.layer.GraphicLayer()
   map.addLayer(graphicLayer)
 
   // 初始加载

diff --git a/src/example/graphic/divGraphic/video-hls/map.js b/src/example/graphic/divGraphic/video-hls/map.js
@@ -30,7 +30,7 @@ export function onMounted(mapInstance) {
   map.addLayer(tiles3dLayer)
 
   // 创建DIV数据图层
-  const graphicLayer = new mars3d.layer.DivLayer()
+  const graphicLayer = new mars3d.layer.GraphicLayer()
   map.addLayer(graphicLayer)
 
   graphicLayer.on(mars3d.EventType.click, function (event) {

diff --git a/src/example/graphic/divGraphic/video/map.js b/src/example/graphic/divGraphic/video/map.js
@@ -30,7 +30,7 @@ export function onMounted(mapInstance) {
   map.addLayer(tiles3dLayer)
 
   // 创建DIV数据图层
-  const graphicLayer = new mars3d.layer.DivLayer()
+  const graphicLayer = new mars3d.layer.GraphicLayer()
   map.addLayer(graphicLayer)
 
   graphicLayer.on(mars3d.EventType.click, function (event) {

diff --git a/src/example/graphic/entity/billboard-canvas/map.js b/src/example/graphic/entity/billboard-canvas/map.js
@@ -41,7 +41,7 @@ export function onMounted(mapInstance) {
   map.addLayer(tiles3dLayer)
 
   // 创建DIV数据图层
-  graphicLayer = new mars3d.layer.DivLayer()
+  graphicLayer = new mars3d.layer.GraphicLayer()
   map.addLayer(graphicLayer)
 
   // 初始加载

diff --git a/src/example/graphic/roam/air/map.js b/src/example/graphic/roam/air/map.js
@@ -114,7 +114,7 @@ function showRealTimeInfo(params, _alltime) {
 
 function addDivPoint(position) {
   // 创建DIV数据图层
-  const divLayer = new mars3d.layer.DivLayer()
+  const divLayer = new mars3d.layer.GraphicLayer()
   map.addLayer(divLayer)
 
   const graphic = new mars3d.graphic.DivGraphic({

diff --git a/src/example/layer-tileset/type/osmBuildings/index.vue b/src/example/layer-tileset/type/osmBuildings/index.vue
@@ -0,0 +1,35 @@
+<template>
+  <pannel class="infoView">
+    <div class="f-mb">
+      <a-space>
+        <mars-button @click="setStyle1">原始样式</mars-button>
+        <mars-button @click="setStyle2">特效样式</mars-button>
+      </a-space>
+    </div>
+
+    <div>
+      <a-space>
+        <span>按颜色着色:</span>
+        <mars-color-picker @change="selectColor" v-model:value="color" />
+      </a-space>
+    </div>
+  </pannel>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import Pannel from "@/components/marsgis/pannel.vue"
+import * as mapWork from "./map.js"
+
+const color = ref("#4B61E1")
+
+const setStyle1 = () => {
+  mapWork.setStyle1()
+}
+const setStyle2 = () => {
+  mapWork.setStyle2()
+}
+const selectColor = () => {
+  mapWork.selectColor(color.value)
+}
+</script>
diff --git a/src/example/layer-tileset/type/osmBuildings/map.js b/src/example/layer-tileset/type/osmBuildings/map.js
@@ -1,6 +1,7 @@
 import * as mars3d from "mars3d"
 
 let map // mars3d.Map三维地图对象
+let osmBuildingsLayer
 
 // 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
 export const mapOptions = {
@@ -18,7 +19,8 @@ export const mapOptions = {
 export function onMounted(mapInstance) {
   map = mapInstance // 记录map
 
-  const osmBuildingsLayer = new mars3d.layer.OsmBuildingsLayer({
+
+  osmBuildingsLayer = new mars3d.layer.OsmBuildingsLayer({
     highlight: {
       type: "click",
       color: "#00FF00"
@@ -35,3 +37,73 @@ export function onMounted(mapInstance) {
 export function onUnmounted() {
   map = null
 }
+
+export function setStyle1() {
+  if (osmBuildingsLayer) {
+    osmBuildingsLayer.destroy()
+  }
+
+
+  Cesium.ExperimentalFeatures.enableModelExperimental = false;
+
+  osmBuildingsLayer = new mars3d.layer.OsmBuildingsLayer({
+    highlight: {
+      type: "click",
+      color: "#00FF00"
+    },
+    popup: "all"
+  })
+  map.addLayer(osmBuildingsLayer)
+}
+
+export function setStyle2() {
+  if (osmBuildingsLayer) {
+    osmBuildingsLayer.destroy()
+  }
+
+  const fsShader = `
+  void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
+  {
+    vec4 position = czm_inverseModelView * vec4(fsInput.attributes.positionEC,1); // 位置
+
+    // 注意shader中写浮点数是，一定要带小数点，否则会报错，比如0需要写成0.0，1要写成1.0
+    float _baseHeight = 0.0; // 物体的基础高度，需要修改成一个合适的建筑基础高度
+    float _heightRange = 80.0; // 高亮的范围(_baseHeight ~ _baseHeight + _heightRange)
+    float _glowRange = 50.0; // 光环的移动范围(高度)
+
+    // 建筑基础色
+    float mars_height = position.z - _baseHeight;
+    float mars_a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;
+    float mars_a12 = mars_height / _heightRange + sin(mars_a11) * 0.1;
+    material.diffuse = vec3(0.0, 0.0, 1.0); // 颜色
+    material.diffuse *= vec3(mars_a12);// 渐变
+
+    // 动态光环
+    float time = fract(czm_frameNumber / 360.0);
+    time = abs(time - 0.5) * 2.0;
+    float mars_h = clamp(mars_height / _glowRange, 0.0, 1.0);
+    float mars_diff = step(0.005, abs(mars_h - time));
+    material.diffuse += material.diffuse * (1.0 - mars_diff);
+  } `
+
+  osmBuildingsLayer = new mars3d.layer.OsmBuildingsLayer({
+    customShader: new Cesium.CustomShader({
+      lightingModel: Cesium.LightingModel.UNLIT,
+      fragmentShaderText: fsShader
+    }),
+    highlight: {
+      type: "click",
+      color: "#00FF00"
+    },
+    popup: "all"
+  })
+  map.addLayer(osmBuildingsLayer)
+}
+
+export function selectColor(col) {
+  osmBuildingsLayer.style = new Cesium.Cesium3DTileStyle({
+    color: {
+      conditions: [["true", `color("${col}")`]]
+    }
+  })
+}