README.md

@@ -37,7 +37,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 
     - 刘梦祥
 
-  - 默认加载西虹桥三维模型和盘龙天地三维模型
+  - 默认加载西虹桥三维模型和蟠龙天地三维模型
 
     - 张乃文给刘梦祥数据
 

public/static/config/config.js

@@ -17,6 +17,17 @@ var userLoginConfig = {
 // var oauthUrl = "http://10.235.245.174:8888/"
 var oauthUrl = "http://121.43.55.7:10086"
 
+// 蟠龙天地偏移常量（通过调试工具得到）
+const PLTD_3DTILE_OPTIONS = {
+    rx: 0.07,
+    ry: -0.19,
+    rz: 0,
+    lon: 0,
+    height: -0.8,
+    lat: 0,
+    scale: 1
+};
+
 // 系统配置（LiuMengxiang）
 const systemConfig = {
     // 系统名称
@@ -28,14 +39,59 @@ const systemConfig = {
     // tdt_tk: "e90d56e5a09d1767899ad45846b0cefd"
     tdt_tk: "51a3c33c0ec351619c33a24461c0ba95",
     data3DTiles: {
-        "盘龙天地": {
-            "地面": "/static/data/3dTiles/pltd_3dt/dm",
-            "建筑": "/static/data/3dTiles/pltd_3dt/jz",
-            "水系": "/static/data/3dTiles/pltd_3dt/sx",
-            "小品": "/static/data/3dTiles/pltd_3dt/xp",
+        "蟠龙天地": {
+            "地面": {
+                url: "/static/data/3dTiles/pltd_3dt/dm",
+                scale: PLTD_3DTILE_OPTIONS.scale,
+                rx: PLTD_3DTILE_OPTIONS.rx,
+                ry: PLTD_3DTILE_OPTIONS.ry,
+                rz: PLTD_3DTILE_OPTIONS.rz,
+                lon: PLTD_3DTILE_OPTIONS.lon,
+                height: PLTD_3DTILE_OPTIONS.height,
+                lat: PLTD_3DTILE_OPTIONS.lat,
+            },
+            "建筑": {
+                url: "/static/data/3dTiles/pltd_3dt/jz",
+                scale: PLTD_3DTILE_OPTIONS.scale,
+                rx: PLTD_3DTILE_OPTIONS.rx,
+                ry: PLTD_3DTILE_OPTIONS.ry,
+                rz: PLTD_3DTILE_OPTIONS.rz,
+                lon: PLTD_3DTILE_OPTIONS.lon,
+                height: PLTD_3DTILE_OPTIONS.height,
+                lat: PLTD_3DTILE_OPTIONS.lat,
+            },
+            "水系": {
+                url: "/static/data/3dTiles/pltd_3dt/sx",
+                scale: PLTD_3DTILE_OPTIONS.scale,
+                rx: PLTD_3DTILE_OPTIONS.rx,
+                ry: PLTD_3DTILE_OPTIONS.ry,
+                rz: PLTD_3DTILE_OPTIONS.rz,
+                lon: PLTD_3DTILE_OPTIONS.lon,
+                height: PLTD_3DTILE_OPTIONS.height,
+                lat: PLTD_3DTILE_OPTIONS.lat,
+            },
+            "小品": {
+                url: "/static/data/3dTiles/pltd_3dt/xp",
+                scale: PLTD_3DTILE_OPTIONS.scale,
+                rx: PLTD_3DTILE_OPTIONS.rx,
+                ry: PLTD_3DTILE_OPTIONS.ry,
+                rz: PLTD_3DTILE_OPTIONS.rz,
+                lon: PLTD_3DTILE_OPTIONS.lon,
+                height: PLTD_3DTILE_OPTIONS.height,
+                lat: PLTD_3DTILE_OPTIONS.lat,
+            },
         },
         "西虹桥": {
-            "全部": "/static/data/3dTiles/xhq_3dt",
+            "全部": {
+                url: "/static/data/3dTiles/xhq_3dt",
+                scale: 1,
+                rx: 0.05,
+                ry: -0.15,
+                rz: 0,
+                lon: -0.0003,
+                height: -24.8,
+                lat: -0.0003,
+            },
         }
     }
 }

public/static/data/西虹区民营医疗.geojson

@@ -3,25 +3,25 @@
 "name": "西虹区民营医疗",
 "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
 "features": [
-{ "type": "Feature", "properties": { "法定代表人": "徐维宁", "街镇": "徐泾镇", "联系电话": "69760346", "地址": "上海市青浦区徐泾镇方家塘路188号、198号102室", "统一社会信用代码": "91310118591601480B", "性质": "营利性", "单位名称": "上海缔青口腔门诊部", "layer": "西虹桥民营医疗机构" }, "geometry": { "type": "Point", "coordinates": [ 121.3082, 31.1631 ] } },
-{ "type": "Feature", "properties": { "法定代表人": "何燕", "街镇": "徐泾镇", "联系电话": "13621935365", "地址": "青浦区徐泾镇诸光路366弄8号202室", "统一社会信用代码": "91310118MA1JL42L66", "性质": "营利性", "单位名称": "上海佑恩口腔门诊部", "layer": "西虹桥民营医疗机构" }, "geometry": { "type": "Point", "coordinates": [ 121.3111, 31.1659 ] } },
-{ "type": "Feature", "properties": { "法定代表人": "邱梦琦", "街镇": "徐泾镇", "联系电话": "5.9778288E7", "地址": "上海市青浦区徐泾镇蟠中路377号、389号东半间", "统一社会信用代码": "91310118MA1JN0YU3M", "性质": "营利性", "单位名称": "上海维佳康卡尔口腔门诊部", "layer": "西虹桥民营医疗机构" }, "geometry": { "type": "Point", "coordinates": [ 121.279, 31.1855 ] } },
-{ "type": "Feature", "properties": { "法定代表人": "康相辉", "街镇": "徐泾镇", "联系电话": "1.3512132325E10", "地址": "上海市青浦区诸光路1588弄328号、330号、332号", "统一社会信用代码": "91310118MA1JNTXC9Y", "性质": "营利性", "单位名称": "上海迪贝口腔门诊部", "layer": "西虹桥民营医疗机构" }, "geometry": { "type": "Point", "coordinates": [ 121.2986, 31.1846 ] } },
-{ "type": "Feature", "properties": { "法定代表人": "单华清", "街镇": "徐泾镇", "联系电话": "1.3564158276E10", "地址": "上海市青浦区徐泾镇谢卫路1399号、1411号二层", "统一社会信用代码": "91310118MA1JPC62XJ", "性质": "营利性", "单位名称": "上海卓曜口腔门诊部", "layer": "西虹桥民营医疗机构" }, "geometry": { "type": "Point", "coordinates": [ 121.2886, 31.1741 ] } },
-{ "type": "Feature", "properties": { "法定代表人": "张弘毅", "街镇": "徐泾镇", "联系电话": "6.9227822E7", "地址": "上海市青浦区徐泾镇龙联路59弄89弄12、16、20号，涞清路68、72号", "统一社会信用代码": "91310118MACE193P5N", "性质": "营利性", "单位名称": "上海莱天弘正口腔门诊部", "layer": "西虹桥民营医疗机构" }, "geometry": { "type": "Point", "coordinates": [ 121.2927, 31.1979 ] } },
-{ "type": "Feature", "properties": { "法定代表人": "沈思嘉", "街镇": "徐泾镇", "联系电话": "3.9888872E7", "地址": "上海市青浦区徐泾镇高光路145号、153号、161号、方家塘路180弄65号201-202室、301-305室", "统一社会信用代码": "91310118MA1JM68E8E", "性质": "营利性", "单位名称": "上海微加医疗美容门诊部", "layer": "西虹桥民营医疗机构" }, "geometry": { "type": "Point", "coordinates": [ 121.3079, 31.1648 ] } },
-{ "type": "Feature", "properties": { "法定代表人": "肖小飞", "街镇": "徐泾镇", "联系电话": "021-5227512", "地址": "上海市青浦区徐泾镇谢卫路1389弄3号、1387号一层；谢卫路1379号、1377号、1369号、1361号、1349号、1347号二层", "统一社会信用代码": "91310118MA1JNNPDXY", "性质": "非营利性", "单位名称": "上海娜美医疗美容门诊部", "layer": "西虹桥民营医疗机构" }, "geometry": { "type": "Point", "coordinates": [ 121.2894, 31.174 ] } },
-{ "type": "Feature", "properties": { "法定代表人": "周奕波", "街镇": "徐泾镇", "联系电话": "1.3262737777E10", "地址": "上海市青浦区徐泾镇徐祥路38号4幢108、206、207、301-314室", "统一社会信用代码": "91310118MA1JNT457K", "性质": "非营利性", "单位名称": "上海安禾美阁医疗美容门诊部", "layer": "西虹桥民营医疗机构" }, "geometry": { "type": "Point", "coordinates": [ 121.2658, 31.2009 ] } },
-{ "type": "Feature", "properties": { "法定代表人": "赵高迪", "街镇": "徐泾镇", "联系电话": "1.3601833505E10", "地址": "上海市青浦区徐泾镇双联路68、88号1幢120室、121室、220室、221室、222室、320室、321室、322室", "统一社会信用代码": "91310118MA1JP0RP9F", "性质": "非营利性", "单位名称": "上海旗美医疗美容门诊部", "layer": "西虹桥民营医疗机构" }, "geometry": { "type": "Point", "coordinates": [ 121.271, 31.1954 ] } },
-{ "type": "Feature", "properties": { "法定代表人": "陈冬梅", "街镇": "徐泾镇", "联系电话": "1.3564958264E10", "地址": "上海市青浦区方家塘路138号1层、152号1层、方家塘路180弄28号1层、方家塘路180弄32号1层，方家塘路180弄26号201-204室", "统一社会信用代码": "91310118MA1JPB2D19", "性质": "非营利性", "单位名称": "上海桉锘美医疗美容门诊部", "layer": "西虹桥民营医疗机构" }, "geometry": { "type": "Point", "coordinates": [ 121.3088, 31.1636 ] } },
-{ "type": "Feature", "properties": { "法定代表人": "秦萍", "街镇": "徐泾镇", "联系电话": "5.9881606E7", "地址": "上海市青浦区徐民路308弄30号、32号、33号", "统一社会信用代码": "91310118MA1JNWN21J", "性质": "营利性", "单位名称": "上海威沃眼科门诊部", "layer": "西虹桥民营医疗机构" }, "geometry": { "type": "Point", "coordinates": [ 121.282, 31.1846 ] } },
-{ "type": "Feature", "properties": { "法定代表人": "姜声华", "街镇": "徐泾镇", "联系电话": "1.3916810567E10", "地址": "上海市青浦区徐泾镇方家塘路180弄39号1层、37号2层", "统一社会信用代码": "91310118MAD6DNDC01", "性质": "营利性", "单位名称": "上海太敬康复医疗中心", "layer": "西虹桥民营医疗机构" }, "geometry": { "type": "Point", "coordinates": [ 121.3094, 31.1636 ] } },
-{ "type": "Feature", "properties": { "法定代表人": "陈冬梅", "街镇": "徐泾镇", "联系电话": "1.3564958264E10", "地址": "上海市青浦区方家塘路138号1层、152号1层、方家塘路180弄28号1层、方家塘路180弄32号1层，方家塘路180弄26号201-204室", "统一社会信用代码": "91310118MA1JPB2D19", "性质": "", "单位名称": "上海桉锘美医疗美容门诊部", "layer": "西虹桥民营医疗机构" }, "geometry": { "type": "Point", "coordinates": [ 121.3088, 31.1636 ] } },
-{ "type": "Feature", "properties": { "法定代表人": "季建刚", "街镇": "徐泾镇", "联系电话": "1.3671831728E10", "地址": "青浦区徐泾镇卉恒路718弄9号", "统一社会信用代码": "92310118MA1M0PDD6G", "性质": "营利性", "单位名称": "上海季建刚中医诊所", "layer": "西虹桥民营医疗机构" }, "geometry": { "type": "Point", "coordinates": [ 121.2802, 31.185 ] } },
-{ "type": "Feature", "properties": { "法定代表人": "潘佳亮", "街镇": "徐泾镇", "联系电话": "1.7610248683E10", "地址": "上海市青浦区徐泾镇诸光路1588弄300号202室", "统一社会信用代码": "91310118MA1JPB029B", "性质": "营利性", "单位名称": "上海游小方中医诊所", "layer": "西虹桥民营医疗机构" }, "geometry": { "type": "Point", "coordinates": [ 121.2984, 31.1869 ] } },
-{ "type": "Feature", "properties": { "法定代表人": "陈雪球", "街镇": "徐泾镇", "联系电话": "6.2498057E7", "地址": "上海市青浦区徐泾镇沪青平公路1818号230室", "统一社会信用代码": "52310118MJ5305881C", "性质": "非营利性", "单位名称": "上海济家汇泾护理站", "layer": "西虹桥民营医疗机构" }, "geometry": { "type": "Point", "coordinates": [ 121.2776, 31.1716 ] } },
-{ "type": "Feature", "properties": { "法定代表人": "宋冬雷", "街镇": "徐泾镇", "联系电话": "6.0866731E7", "地址": "上海市青浦区徐泾镇华徐公路988号1幢、2幢、3幢、4幢、5幢", "统一社会信用代码": "91310118MA1JLPYU03", "性质": "营利性", "单位名称": "上海冬雷脑科医院", "layer": "西虹桥民营医院" }, "geometry": { "type": "Point", "coordinates": [ 121.2607, 31.2042 ] } },
-{ "type": "Feature", "properties": { "法定代表人": "李占和", "街镇": "徐泾镇", "联系电话": "57673300", "地址": "上海市青浦区徐泾镇华徐公路988号6幢-1层西侧、1层102室及6-11层", "统一社会信用代码": "91310114093633770T", "性质": "营利性", "单位名称": "上海禾滨康复医院", "layer": "西虹桥民营医院" }, "geometry": { "type": "Point", "coordinates": [ 121.2602, 31.2052 ] } },
-{ "type": "Feature", "properties": { "法定代表人": "方波", "街镇": "徐泾镇", "联系电话": "13310132119", "地址": "上海市青浦区徐泾镇蟠中路373号-1，蟠龙路670号102室、103室、104室、105，209室-1、210室-1、211室-1、212室-1，会恒路718弄41号102、103室", "统一社会信用代码": "91310118MA1JNX482W", "性质": "营利性", "单位名称": "上海圣娅医疗美容医院有限公司", "layer": "西虹桥民营医院" }, "geometry": { "type": "Point", "coordinates": [ 121.2793, 31.1851 ] } }
+{ "type": "Feature", "properties": { "法定代表人": "徐维宁", "街镇": "徐泾镇", "联系电话": "69760346", "地址": "上海市青浦区徐泾镇方家塘路188号、198号102室", "统一社会信用代码": "91310118591601480B", "性质": "营利性", "单位名称": "上海缔青口腔门诊部" }, "geometry": { "type": "Point", "coordinates": [ 121.3082, 31.1631 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "何燕", "街镇": "徐泾镇", "联系电话": "13621935365", "地址": "青浦区徐泾镇诸光路366弄8号202室", "统一社会信用代码": "91310118MA1JL42L66", "性质": "营利性", "单位名称": "上海佑恩口腔门诊部" }, "geometry": { "type": "Point", "coordinates": [ 121.3111, 31.1659 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "邱梦琦", "街镇": "徐泾镇", "联系电话": "5.9778288E7", "地址": "上海市青浦区徐泾镇蟠中路377号、389号东半间", "统一社会信用代码": "91310118MA1JN0YU3M", "性质": "营利性", "单位名称": "上海维佳康卡尔口腔门诊部" }, "geometry": { "type": "Point", "coordinates": [ 121.279, 31.1855 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "康相辉", "街镇": "徐泾镇", "联系电话": "1.3512132325E10", "地址": "上海市青浦区诸光路1588弄328号、330号、332号", "统一社会信用代码": "91310118MA1JNTXC9Y", "性质": "营利性", "单位名称": "上海迪贝口腔门诊部" }, "geometry": { "type": "Point", "coordinates": [ 121.2986, 31.1846 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "单华清", "街镇": "徐泾镇", "联系电话": "1.3564158276E10", "地址": "上海市青浦区徐泾镇谢卫路1399号、1411号二层", "统一社会信用代码": "91310118MA1JPC62XJ", "性质": "营利性", "单位名称": "上海卓曜口腔门诊部" }, "geometry": { "type": "Point", "coordinates": [ 121.2886, 31.1741 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "张弘毅", "街镇": "徐泾镇", "联系电话": "6.9227822E7", "地址": "上海市青浦区徐泾镇龙联路59弄89弄12、16、20号，涞清路68、72号", "统一社会信用代码": "91310118MACE193P5N", "性质": "营利性", "单位名称": "上海莱天弘正口腔门诊部" }, "geometry": { "type": "Point", "coordinates": [ 121.2927, 31.1979 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "沈思嘉", "街镇": "徐泾镇", "联系电话": "3.9888872E7", "地址": "上海市青浦区徐泾镇高光路145号、153号、161号、方家塘路180弄65号201-202室、301-305室", "统一社会信用代码": "91310118MA1JM68E8E", "性质": "营利性", "单位名称": "上海微加医疗美容门诊部" }, "geometry": { "type": "Point", "coordinates": [ 121.3079, 31.1648 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "肖小飞", "街镇": "徐泾镇", "联系电话": "021-5227512", "地址": "上海市青浦区徐泾镇谢卫路1389弄3号、1387号一层；谢卫路1379号、1377号、1369号、1361号、1349号、1347号二层", "统一社会信用代码": "91310118MA1JNNPDXY", "性质": "非营利性", "单位名称": "上海娜美医疗美容门诊部" }, "geometry": { "type": "Point", "coordinates": [ 121.2894, 31.174 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "周奕波", "街镇": "徐泾镇", "联系电话": "1.3262737777E10", "地址": "上海市青浦区徐泾镇徐祥路38号4幢108、206、207、301-314室", "统一社会信用代码": "91310118MA1JNT457K", "性质": "非营利性", "单位名称": "上海安禾美阁医疗美容门诊部" }, "geometry": { "type": "Point", "coordinates": [ 121.2658, 31.2009 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "赵高迪", "街镇": "徐泾镇", "联系电话": "1.3601833505E10", "地址": "上海市青浦区徐泾镇双联路68、88号1幢120室、121室、220室、221室、222室、320室、321室、322室", "统一社会信用代码": "91310118MA1JP0RP9F", "性质": "非营利性", "单位名称": "上海旗美医疗美容门诊部" }, "geometry": { "type": "Point", "coordinates": [ 121.271, 31.1954 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "陈冬梅", "街镇": "徐泾镇", "联系电话": "1.3564958264E10", "地址": "上海市青浦区方家塘路138号1层、152号1层、方家塘路180弄28号1层、方家塘路180弄32号1层，方家塘路180弄26号201-204室", "统一社会信用代码": "91310118MA1JPB2D19", "性质": "非营利性", "单位名称": "上海桉锘美医疗美容门诊部" }, "geometry": { "type": "Point", "coordinates": [ 121.3088, 31.1636 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "秦萍", "街镇": "徐泾镇", "联系电话": "5.9881606E7", "地址": "上海市青浦区徐民路308弄30号、32号、33号", "统一社会信用代码": "91310118MA1JNWN21J", "性质": "营利性", "单位名称": "上海威沃眼科门诊部" }, "geometry": { "type": "Point", "coordinates": [ 121.282, 31.1846 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "姜声华", "街镇": "徐泾镇", "联系电话": "1.3916810567E10", "地址": "上海市青浦区徐泾镇方家塘路180弄39号1层、37号2层", "统一社会信用代码": "91310118MAD6DNDC01", "性质": "营利性", "单位名称": "上海太敬康复医疗中心" }, "geometry": { "type": "Point", "coordinates": [ 121.3094, 31.1636 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "陈冬梅", "街镇": "徐泾镇", "联系电话": "1.3564958264E10", "地址": "上海市青浦区方家塘路138号1层、152号1层、方家塘路180弄28号1层、方家塘路180弄32号1层，方家塘路180弄26号201-204室", "统一社会信用代码": "91310118MA1JPB2D19", "性质": "", "单位名称": "上海桉锘美医疗美容门诊部" }, "geometry": { "type": "Point", "coordinates": [ 121.3088, 31.1636 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "季建刚", "街镇": "徐泾镇", "联系电话": "1.3671831728E10", "地址": "青浦区徐泾镇卉恒路718弄9号", "统一社会信用代码": "92310118MA1M0PDD6G", "性质": "营利性", "单位名称": "上海季建刚中医诊所" }, "geometry": { "type": "Point", "coordinates": [ 121.2802, 31.185 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "潘佳亮", "街镇": "徐泾镇", "联系电话": "1.7610248683E10", "地址": "上海市青浦区徐泾镇诸光路1588弄300号202室", "统一社会信用代码": "91310118MA1JPB029B", "性质": "营利性", "单位名称": "上海游小方中医诊所" }, "geometry": { "type": "Point", "coordinates": [ 121.2984, 31.1869 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "陈雪球", "街镇": "徐泾镇", "联系电话": "6.2498057E7", "地址": "上海市青浦区徐泾镇沪青平公路1818号230室", "统一社会信用代码": "52310118MJ5305881C", "性质": "非营利性", "单位名称": "上海济家汇泾护理站" }, "geometry": { "type": "Point", "coordinates": [ 121.2776, 31.1716 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "宋冬雷", "街镇": "徐泾镇", "联系电话": "6.0866731E7", "地址": "上海市青浦区徐泾镇华徐公路988号1幢、2幢、3幢、4幢、5幢", "统一社会信用代码": "91310118MA1JLPYU03", "性质": "营利性", "单位名称": "上海冬雷脑科医院" }, "geometry": { "type": "Point", "coordinates": [ 121.2607, 31.2042 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "李占和", "街镇": "徐泾镇", "联系电话": "57673300", "地址": "上海市青浦区徐泾镇华徐公路988号6幢-1层西侧、1层102室及6-11层", "统一社会信用代码": "91310114093633770T", "性质": "营利性", "单位名称": "上海禾滨康复医院" }, "geometry": { "type": "Point", "coordinates": [ 121.2602, 31.2052 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "方波", "街镇": "徐泾镇", "联系电话": "13310132119", "地址": "上海市青浦区徐泾镇蟠中路373号-1，蟠龙路670号102室、103室、104室、105，209室-1、210室-1、211室-1、212室-1，会恒路718弄41号102、103室", "统一社会信用代码": "91310118MA1JNX482W", "性质": "营利性", "单位名称": "上海圣娅医疗美容医院有限公司" }, "geometry": { "type": "Point", "coordinates": [ 121.2793, 31.1851 ] } }
 ]
 }

public/static/data/西虹桥公立医疗.geojson

@@ -1,8 +1,48 @@
 {
-"type": "FeatureCollection",
-"name": "西虹桥2024医疗机构",
-"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
-"features": [
-
-]
-}
+    "type": "FeatureCollection",
+    "features":
+    [
+        {
+            "type": "Feature",
+            "properties":
+            {
+                "经纬度": "121.2352658156005,31.178187044483817",
+                "纬度": "31.178187044483817",
+                "机构": "徐泾北大居社区卫生服务中心",
+                "经度": "121.2352658156005",
+                "地址": "青浦区徐泾镇乐高路19号",
+                "备注": ""
+            },
+            "geometry":
+            {
+                "type": "Point",
+                "coordinates":
+                [
+                    121.2352658156005,
+                    31.178187044483817
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties":
+            {
+                "经纬度": "121.26640489991136,31.178221445817382",
+                "纬度": "31.178221445817382",
+                "机构": "徐泾镇社区卫生服务中心",
+                "经度": "121.26640489991136",
+                "地址": "青浦区徐泾镇徐民路1088号",
+                "备注": ""
+            },
+            "geometry":
+            {
+                "type": "Point",
+                "coordinates":
+                [
+                    121.26640489991136,
+                    31.178221445817382
+                ]
+            }
+        }
+    ]
+}

public/static/data/西虹桥私立学校.geojson

@@ -1,140 +1,12 @@
 {
-    "type": "FeatureCollection",
-    "name": "西虹桥学校",
-    "crs":
-    {
-        "type": "name",
-        "properties":
-        {
-            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
-        }
-    },
-    "features":
-    [
-        {
-            "type": "Feature",
-            "properties":
-            {
-                "法定代表人": "戚珍方",
-                "书记": "梁龙飞",
-                "联系人": "戚珍方",
-                "电话": "13661746540",
-                "党建形式": "第四联合支部",
-                "地址": "徐泾镇华徐公路588号2幢",
-                "机构类别": "幼儿园",
-                "单位名称": "上海青浦区蟠龙民办幼儿园",
-                "类型": "民非",
-                "layer": "西虹桥私立幼儿园"
-            },
-            "geometry":
-            {
-                "type": "Point",
-                "coordinates":
-                [
-                    121.272184348101732,
-                    31.190923951309109
-                ]
-            }
-        },
-        {
-            "type": "Feature",
-            "properties":
-            {
-                "法定代表人": "李鸽艳",
-                "书记": "程文新",
-                "联系人": "吴  洁",
-                "电话": "13472716285",
-                "党建形式": "第六联合支部",
-                "地址": "高泾路586号",
-                "机构类别": "幼儿园",
-                "单位名称": "上海私立蒙特梭利幼儿园",
-                "类型": "民非",
-                "layer": "西虹桥私立幼儿园"
-            },
-            "geometry":
-            {
-                "type": "Point",
-                "coordinates":
-                [
-                    121.292827917423708,
-                    31.164854576398138
-                ]
-            }
-        },
-        {
-            "type": "Feature",
-            "properties":
-            {
-                "法定代表人": "李  霞",
-                "书记": "程文新",
-                "联系人": "葛海燕",
-                "电话": "18616281689",
-                "党建形式": "第六联合支部",
-                "地址": "青浦区沪清平公路1358号161栋",
-                "机构类别": "幼儿园",
-                "单位名称": "上海市青浦民办悦田幼儿园",
-                "类型": "民非",
-                "layer": "西虹桥私立幼儿园"
-            },
-            "geometry":
-            {
-                "type": "Point",
-                "coordinates":
-                [
-                    121.310292704101627,
-                    31.176935279481537
-                ]
-            }
-        },
-        {
-            "type": "Feature",
-            "properties":
-            {
-                "法定代表人": "张丽",
-                "书记": "蒋  蕾",
-                "联系人": "张丽",
-                "电话": "1.5000602962E10",
-                "党建形式": "第十四联合支部",
-                "地址": "青浦区徐泾镇龙联路255号",
-                "机构类别": "幼儿园",
-                "单位名称": "上海青浦爱菊幼儿园有限公司",
-                "类型": "非公",
-                "layer": "西虹桥私立幼儿园"
-            },
-            "geometry":
-            {
-                "type": "Point",
-                "coordinates":
-                [
-                    121.284864526799439,
-                    31.195124923511052
-                ]
-            }
-        },
-        {
-            "type": "Feature",
-            "properties":
-            {
-                "法定代表人": "徐  俭",
-                "书记": "沈建英",
-                "联系人": "谷沈静",
-                "电话": "18817956189",
-                "党建形式": "独立支部",
-                "地址": "徐泾镇京华路128号",
-                "机构类别": "中小学",
-                "单位名称": "上海青浦区世外学校",
-                "类型": "民非",
-                "layer": "西虹桥私立中小学"
-            },
-            "geometry":
-            {
-                "type": "Point",
-                "coordinates":
-                [
-                    121.277311438005128,
-                    31.192269827974979
-                ]
-            }
-        }
-    ]
-}
+"type": "FeatureCollection",
+"name": "西虹桥学校",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "法定代表人": "戚珍方", "书记": "梁龙飞", "联系人": "戚珍方", "电话": "13661746540", "党建形式": "第四联合支部", "地址": "徐泾镇华徐公路588号2幢", "机构类别": "幼儿园", "单位名称": "上海青浦区蟠龙民办幼儿园", "类型": "民非" }, "geometry": { "type": "Point", "coordinates": [ 121.272184348101732, 31.190923951309109 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "李鸽艳", "书记": "程文新", "联系人": "吴  洁", "电话": "13472716285", "党建形式": "第六联合支部", "地址": "高泾路586号", "机构类别": "幼儿园", "单位名称": "上海私立蒙特梭利幼儿园", "类型": "民非" }, "geometry": { "type": "Point", "coordinates": [ 121.292827917423708, 31.164854576398138 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "李  霞", "书记": "程文新", "联系人": "葛海燕", "电话": "18616281689", "党建形式": "第六联合支部", "地址": "青浦区沪清平公路1358号161栋", "机构类别": "幼儿园", "单位名称": "上海市青浦民办悦田幼儿园", "类型": "民非" }, "geometry": { "type": "Point", "coordinates": [ 121.310292704101627, 31.176935279481537 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "张丽", "书记": "蒋  蕾", "联系人": "张丽", "电话": "1.5000602962E10", "党建形式": "第十四联合支部", "地址": "青浦区徐泾镇龙联路255号", "机构类别": "幼儿园", "单位名称": "上海青浦爱菊幼儿园有限公司", "类型": "非公" }, "geometry": { "type": "Point", "coordinates": [ 121.284864526799439, 31.195124923511052 ] } },
+{ "type": "Feature", "properties": { "法定代表人": "徐  俭", "书记": "沈建英", "联系人": "谷沈静", "电话": "18817956189", "党建形式": "独立支部", "地址": "徐泾镇京华路128号", "机构类别": "中小学", "单位名称": "上海青浦区世外学校", "类型": "民非" }, "geometry": { "type": "Point", "coordinates": [ 121.277311438005128, 31.192269827974979 ] } }
+]
+}

src/components/Edge.vue

@@ -14,6 +14,24 @@
       style="--el-switch-on-color: #409eff; --el-switch-off-color: #ff4949"
       @change="elSwitchChange"
     />
+    <el-dialog v-if="from!=null" v-model="dialogFormVisible" title="详细信息" width="500">
+      <div class="info_container">
+        <el-form :model="form">
+          <el-form-item
+            v-for="(value, key) in from"
+            :key="key"
+            :label="key"
+            :label-width="'120px'"
+          >{{ value }}</el-form-item>
+        </el-form>
+      </div>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogFormVisible = false;from=null">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -72,7 +90,10 @@ export default {
           }
         }
       ],
-      elSwitchValue: false
+      elSwitchValue: false,
+
+      from: null,
+      dialogFormVisible: false
     };
   },
   mounted() {
@@ -89,12 +110,13 @@ export default {
     },
 
     elSwitchChange(status) {
-      let that = this;
-      this.radio == 0;
+      this.radio == "0";
       if (status) {
-        that.show();
+        this.show();
+        this.openClick();
       } else {
-        that.hide();
+        this.hide();
+        this.closeClick();
       }
     },
 
@@ -112,6 +134,36 @@ export default {
       viewer.dataSources.remove(edgeQJ.geojsonDataSource);
       edgeQJ.geojsonDataSource = null;
     },
+    openClick() {
+      let that = this;
+      if (edgeQJ.handler) return;
+      // 绑定点击事件
+      edgeQJ.handler = new SkyScenery.ScreenSpaceEventHandler(viewer.canvas);
+      edgeQJ.handler.setInputAction(function(movement) {
+        var pick = viewer.scene.pick(movement.position); // 拾取鼠标所在的entity
+        if (SkyScenery.defined(pick)) {
+          let entity = pick.id;
+          if (!entity) return;
+          if (entity.type && entity.type == "edge") {
+            let properties = entity.properties.getValue();
+            console.log(properties);
+            that.from = properties;
+            that.dialogFormVisible = true;
+            // openEntityPropertiesDialog(properties, entity.layerId);
+          }
+        }
+      }, SkyScenery.ScreenSpaceEventType.LEFT_CLICK);
+    },
+    closeClick() {
+      if (edgeQJ.handler) {
+        edgeQJ.handler.removeInputAction(
+          SkyScenery.ScreenSpaceEventType.LEFT_CLICK
+        );
+        edgeQJ.handler = null;
+      }
+      this.dialogFormVisible = false;
+      this.from = null;
+    },
 
     // 加载geojson数据
     addGeoJson(url, options) {
@@ -130,41 +182,59 @@ export default {
       //     innerColor: "#ffffff",
       //     alpha: 0.7
       //   }
-      // }; 
+      // };
       SkyScenery.GeoJsonDataSource.load(url).then(function(dataSource) {
-        viewer.dataSources.add(dataSource);
-        edgeQJ.geojsonDataSource = dataSource;
         var entities = dataSource.entities.values;
         for (var i = 0; i < entities.length; i++) {
           var entity = entities[i];
-          if (entity.billboard) {
-            entity.billboard = undefined;
-            entity.billboard = new SkyScenery.BillboardGraphics({
-              image: options.point.imgUrl,
-              width: 50,
-              height: 50,
-              pixelOffset: new SkyScenery.Cartesian2(0, -25),
-              heightReference: SkyScenery.HeightReference.CLAMP_TO_GROUND
-            });
-          }
-          if (entity.polyline) {
-            entity.polyline.width = options.polyline.width;
-            entity.polyline.material = SkyScenery.Color.fromCssColorString(
-              options.polyline.color
-            ).withAlpha(options.polyline.alpha); // 颜色
-          }
+          //   if (entity.billboard) {
+          //     entity.billboard = undefined;
+          //     entity.billboard = new SkyScenery.BillboardGraphics({
+          //       image: options.point.imgUrl,
+          //       width: 50,
+          //       height: 50,
+          //       pixelOffset: new SkyScenery.Cartesian2(0, -25),
+          //       heightReference: SkyScenery.HeightReference.CLAMP_TO_GROUND
+          //     });
+          //   }
+          //   if (entity.polyline) {
+          //     entity.polyline.width = options.polyline.width;
+          //     entity.polyline.material = SkyScenery.Color.fromCssColorString(
+          //       options.polyline.color
+          //     ).withAlpha(options.polyline.alpha); // 颜色
+          //   }
           if (entity.polygon) {
-            entity.polygon.height = 0.2;
-            entity.polygon.outline = true; // 边框是否显示
-            entity.polygon.outlineColor = SkyScenery.Color.fromCssColorString(
-              options.polygon.outerColor
-            ); // 边框颜色
-            entity.polygon.outlineWidth = options.polygon.outerWidth; // 边框宽度
-            entity.polygon.material = SkyScenery.Color.fromCssColorString(
-              options.polygon.innerColor
-            ).withAlpha(options.polygon.alpha); // 填充色
+            // viewer.scene.globe.depthTestAgainstTerrain = true; //深度检测
+            entity.polygon.heightReference =
+                SkyScenery.HeightReference.CLAMP_TO_GROUND;
+            // entity.polygon.extrudedHeightReference =
+            //     SkyScenery.HeightReference.CLAMP_TO_GROUND;
+              // SkyScenery.HeightReference.NONE;
+            entity.polygon.perPositionHeight = true;
+            // entity.polygon.zIndex = 2;
+
+            // entity.polygon.height = 6;
+            // entity.polygon.outline = true; // 边框是否显示
+            // entity.polygon.outlineColor = SkyScenery.Color.fromCssColorString(
+            //   options.polygon.outerColor
+            // ); // 边框颜色
+            // entity.polygon.outlineWidth = options.polygon.outerWidth; // 边框宽度
+            // entity.polygon.material = SkyScenery.Color.fromCssColorString(
+            //   options.polygon.innerColor
+            // ).withAlpha(options.polygon.alpha); // 填充色
+
+            // entity.polygon.outline = true;
+            // entity.polygon.outlineWidth = 5; // 边框宽度
+            // entity.polygon.height = 5;
+            // entity.polygon.material = new SkyScenery.ImageMaterialProperty({
+            //   image: "/static/image/b2.png", // 图片路径
+            //   transparent: true // 是否透明
+            // });
           }
+          entity.type = "edge";
         }
+        viewer.dataSources.add(dataSource);
+        edgeQJ.geojsonDataSource = dataSource;
       });
     },
 
@@ -175,8 +245,8 @@ export default {
         .then(data => {
           let positions = data.features[0].geometry.coordinates[0];
           edgeQJ.edgeEntity = that.addDynamicWall(positions, {
-            maxH: 100,
-            color: "#00c4ff80",
+            maxH: 150,
+            color: "#0060fc",
             duration: 3000
           });
         });
@@ -228,5 +298,10 @@ export default {
     margin-left: 20px;
     vertical-align: top;
   }
+  .info_container {
+    height: 300px;
+    overflow: hidden;
+    overflow-y: auto;
+  }
 }
 </style>

src/components/Layers.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="layer">
+    <div class="title">重点图层</div>
+    <div>
+      <el-row v-for="(item,index) in arr" :key="index">
+        <el-checkbox v-model="item.added" :label="item.label" @change="addedChange(item)" />
+        <el-switch
+          v-model="item.show"
+          class="ml-2"
+          style="--el-switch-on-color: #409eff; --el-switch-off-color: #ff4949"
+          @change="hideChange(item)"
+          :disabled="!item.added"
+        />
+      </el-row>
+    </div>
+    <el-dialog v-if="from!=null" v-model="dialogFormVisible" title="详细信息" width="500">
+      <div class="info_container">
+        <el-form :model="form">
+          <el-form-item
+            v-for="(value, key) in from"
+            :key="key"
+            :label="key"
+            :label-width="'120px'"
+          >{{ value }}</el-form-item>
+        </el-form>
+      </div>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogFormVisible = false;from=null">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+  
+<script>
+export default {
+  data() {
+    let arr = [
+      {
+        label: "公立学校",
+        url: "./static/data/西虹桥公立学校.geojson",
+        style: {
+          point: {
+            imgUrl: "/static/image/layer/point.png"
+          }
+        }
+      },
+      {
+        label: "私立学校",
+        url: "./static/data/西虹桥私立学校.geojson",
+        style: {
+          point: {
+            imgUrl: "/static/image/layer/point.png"
+          }
+        }
+      },
+      {
+        label: "公立医院",
+        url: "./static/data/西虹桥公立医疗.geojson",
+        style: {
+          point: {
+            imgUrl: "/static/image/layer/point.png"
+          }
+        }
+      },
+      {
+        label: "私立医院",
+        url: "./static/data/西虹区民营医疗.geojson",
+        style: {
+          point: {
+            imgUrl: "/static/image/layer/point.png"
+          }
+        }
+      },
+      {
+        label: "养老机构",
+        url: "./static/data/西虹桥养老机构.geojson",
+        style: {
+          point: {
+            imgUrl: "/static/image/layer/point.png"
+          }
+        }
+      }
+    ];
+    arr = arr.map(function(item, index) {
+      item.id = "layer" + index;
+      item.added = false;
+      item.show = true;
+      return item;
+    });
+    return {
+      arr: arr,
+      from: null,
+      dialogFormVisible: false
+    };
+  },
+  mounted() {
+    window.layerQJ = {
+      geojsonDataSource: {}
+    };
+  },
+  methods: {
+    addedChange(item) {
+      console.log(item);
+      if (item.added) {
+        // 添加图层
+        this.addGeoJson(item.url, item.style, item.id);
+      } else {
+        item.show = true;
+        // 移除图层
+        if (layerQJ.geojsonDataSource[item.id] != null) {
+        }
+        viewer.dataSources.remove(layerQJ.geojsonDataSource[item.id]);
+        layerQJ.geojsonDataSource[item.id] = null;
+        delete layerQJ.geojsonDataSource[item.id];
+      }
+    },
+    hideChange(item) {
+      // 控制显隐
+      if (item.show) {
+        if (layerQJ.geojsonDataSource[item.id])
+          layerQJ.geojsonDataSource[item.id].show = true;
+      } else {
+        if (layerQJ.geojsonDataSource[item.id])
+          layerQJ.geojsonDataSource[item.id].show = false;
+      }
+    },
+
+    openClick() {
+      let that = this;
+      if (layerQJ.handler) return;
+      // 绑定点击事件
+      layerQJ.handler = new SkyScenery.ScreenSpaceEventHandler(viewer.canvas);
+      layerQJ.handler.setInputAction(function(movement) {
+        var pick = viewer.scene.pick(movement.position); // 拾取鼠标所在的entity
+        if (SkyScenery.defined(pick)) {
+          let entity = pick.id;
+          if (!entity) return;
+          if (entity.type && entity.type == "layers") {
+            let properties = entity.properties.getValue();
+            console.log(properties);
+            that.from = properties;
+            that.dialogFormVisible = true;
+            // openEntityPropertiesDialog(properties, entity.layerId);
+          }
+        }
+      }, SkyScenery.ScreenSpaceEventType.LEFT_CLICK);
+    },
+
+    // closeClick() {
+    //   if (layerQJ.handler) {
+    //     layerQJ.handler.removeInputAction(
+    //       SkyScenery.ScreenSpaceEventType.LEFT_CLICK
+    //     );
+    //     layerQJ.handler = null;
+    //   }
+    //   this.dialogFormVisible = false;
+    //   this.from = null;
+    // },
+
+    // 加载geojson数据
+    addGeoJson(url, options, id) {
+      // options = {
+      //   point: {
+      //     imgUrl: ""
+      //   },
+      //   polyline: {
+      //     color: "#ffffff",
+      //     width: 3,
+      //     alpha: 0.7
+      //   },
+      //   polygon: {
+      //     outerColor: "#ffffff",
+      //     outerWidth: 3,
+      //     innerColor: "#ffffff",
+      //     alpha: 0.7
+      //   }
+      // };
+      SkyScenery.GeoJsonDataSource.load(url).then(function(dataSource) {
+        viewer.dataSources.add(dataSource);
+        layerQJ.geojsonDataSource[id] = dataSource;
+        var entities = dataSource.entities.values;
+        for (var i = 0; i < entities.length; i++) {
+          var entity = entities[i];
+          if (entity.billboard) {
+            entity.billboard = undefined;
+            entity.billboard = new SkyScenery.BillboardGraphics({
+              image: options.point.imgUrl,
+              width: 50,
+              height: 50,
+              pixelOffset: new SkyScenery.Cartesian2(0, -25),
+              heightReference: SkyScenery.HeightReference.CLAMP_TO_GROUND
+            });
+          }
+          if (entity.polyline) {
+            entity.polyline.width = options.polyline.width;
+            entity.polyline.material = SkyScenery.Color.fromCssColorString(
+              options.polyline.color
+            ).withAlpha(options.polyline.alpha); // 颜色
+          }
+          if (entity.polygon) {
+            // entity.polygon.height = 0.2;
+            // entity.polygon.outline = true; // 边框是否显示
+            // entity.polygon.outlineColor = SkyScenery.Color.fromCssColorString(
+            //   options.polygon.outerColor
+            // ); // 边框颜色
+            // entity.polygon.outlineWidth = options.polygon.outerWidth; // 边框宽度
+            // entity.polygon.material = SkyScenery.Color.fromCssColorString(
+            //   options.polygon.innerColor
+            // ).withAlpha(options.polygon.alpha); // 填充色
+            entity.polygon.outline = true;
+            entity.polygon.outlineWidth = 5; // 边框宽度
+            entity.polygon.height = 5;
+            entity.polygon.material = new SkyScenery.ImageMaterialProperty({
+              image: "/static/image/b2.png", // 图片路径
+              transparent: true // 是否透明
+            });
+          }
+          entity.type = "layers";
+        }
+      });
+    }
+  },
+  computed: {
+    mapStatus() {
+      return this.$store.state.initMap;
+    }
+  },
+  watch: {
+    mapStatus(newVal, oldVal) {
+      if (newVal) this.openClick();
+    }
+  }
+};
+</script>
+  
+  <style lang="less" scoped>
+.layer {
+  position: absolute;
+  left: 520px;
+  top: 200px;
+  width: 140px;
+  z-index: 1;
+  background: #ffffff;
+  padding: 10px 15px;
+  border-radius: 5px;
+
+  .el-switch {
+    margin-left: 20px;
+    vertical-align: top;
+  }
+  .info_container {
+    height: 300px;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+}
+</style>

src/components/Map.vue

@@ -9,16 +9,21 @@ export default {
     return {
       // viewer3DTiles实例《systemConfig.data3DTiles keys,tile》
       viewer3DTiles: {},
+<<<<<<< HEAD
       // 3DTiles url集合《systemConfig.data3DTiles keys,url》
-      keysByUrl: {},
+      keysByUrl: {}
+=======
+      // 3DTiles options集合《systemConfig.data3DTiles keys,options》
+      keysByOptions: {},
+>>>>>>> ea40ec63e9c0f3db4ef6f3cba766c6653aeda8d6
     };
   },
   mounted() {
     window.SkySceneryConfig = {};
     for (let tileName in systemConfig.data3DTiles) {
       for (let key in systemConfig.data3DTiles[tileName]) {
-        let url = systemConfig.data3DTiles[tileName][key];
-        this.keysByUrl[tileName + key] = url;
+        let options = systemConfig.data3DTiles[tileName][key];
+        this.keysByOptions[tileName + key] = options;
       }
     }
     this.getToken();
@@ -34,13 +39,13 @@ export default {
       }
       fetch(oauthUrl + "/oauth/api/user/login", {
         method: "POST",
-        body: loginInfo,
+        body: loginInfo
       })
-        .then((resp) => resp.json())
-        .then((data) => {
+        .then(resp => resp.json())
+        .then(data => {
           SkySceneryConfig = {
             authUrl: oauthUrl,
-            token: data.message,
+            token: data.message
           };
           that.pushAllScripts();
         });
@@ -48,11 +53,11 @@ export default {
 
     pushAllScripts() {
       let that = this;
-      that.addScripts(scriptObj.main).then(function () {
-        let arr = scriptObj.plugins.map(function (src) {
+      that.addScripts(scriptObj.main).then(function() {
+        let arr = scriptObj.plugins.map(function(src) {
           return that.addScripts(src);
         });
-        Promise.all(arr).then(function () {
+        Promise.all(arr).then(function() {
           setTimeout(() => {
             if (SkyScenery) {
               that.creatMap();
@@ -74,15 +79,18 @@ export default {
         document.head.appendChild(script);
         if (script.readyState) {
           // IE
-          script.onreadystatechange = function () {
-            if (script.readyState === "loaded" || script.readyState === "complete") {
+          script.onreadystatechange = function() {
+            if (
+              script.readyState === "loaded" ||
+              script.readyState === "complete"
+            ) {
               script.onreadystatechange = null;
               resolve();
             }
           };
         } else {
           // 其他浏览器
-          script.onload = function () {
+          script.onload = function() {
             resolve();
           };
         }
@@ -106,7 +114,12 @@ export default {
               ctx.fillRect(0, 0, width, height);
               return canvas.toDataURL();
             })("#ffffff00"),
-            rectangle: SkyScenery.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
+            rectangle: SkyScenery.Rectangle.fromDegrees(
+              -180.0,
+              -90.0,
+              180.0,
+              90.0
+            )
           }),
           fullscreenButton: false, //是否显示全屏按钮
           geocoder: false, //是否显示geocoder小器件，右上角查询按钮
@@ -118,13 +131,17 @@ export default {
           navigationHelpButton: false, //是否显示右上角的帮助按钮
           scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
           infoBox: false, //是否显示点击要素之后显示的信息
-          shouldAnimate: false, //是否自动播放
+          shouldAnimate: false //是否自动播放
         });
         setTimeout(() => {
           // 根据配置文件中的配置信息加载底图
-          systemConfig.imageryProviders.forEach((url) => {
+          systemConfig.imageryProviders.forEach(url => {
             that.loadTheWorldMapImage(url);
           });
+
+          // 设置地表透明度为 0.5（值在 0 到 1 之间，0 为完全透明，1 为不透明）
+          // viewer.scene.globe.translucency.enabled = true;
+          // viewer.scene.globe.baseColor = new SkyScenery.Color(1.0, 1.0, 1.0, 0.1);
           viewer.camera.setView({
             destination: SkyScenery.Cartesian3.fromDegrees(
               121.29818074250946,
@@ -134,8 +151,8 @@ export default {
             orientation: {
               heading: SkyScenery.Math.toRadians(356.03124515798294), // 方向
               pitch: SkyScenery.Math.toRadians(-45.31422437550821), // 倾斜角度
-              roll: SkyScenery.Math.toRadians(0.0047792745453184024)
-            }
+              roll: SkyScenery.Math.toRadians(0.0047792745453184024),
+            },
           });
 
           this.$store.commit("createdMap", true);
@@ -271,7 +288,7 @@ export default {
       viewer.imageryLayers.addImageryProvider(
         new SkyScenery.ArcGisMapServerImageryProvider({
           url:
-            "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",
+            "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer"
         })
       );
     },
@@ -295,7 +312,7 @@ export default {
       //   }
       // };
 
-      SkyScenery.GeoJsonDataSource.load(url).then(function (dataSource) {
+      SkyScenery.GeoJsonDataSource.load(url).then(function(dataSource) {
         viewer.dataSources.add(dataSource);
         var entities = dataSource.entities.values;
         for (var i = 0; i < entities.length; i++) {
@@ -307,7 +324,7 @@ export default {
               width: 50,
               height: 50,
               pixelOffset: new SkyScenery.Cartesian2(0, -25),
-              heightReference: SkyScenery.HeightReference.CLAMP_TO_GROUND,
+              heightReference: SkyScenery.HeightReference.CLAMP_TO_GROUND
             });
           }
           if (entity.polyline) {
@@ -344,18 +361,20 @@ export default {
       return viewer.entities.add({
         name: "立体墙效果",
         wall: {
-          positions: positions.map(function (item) {
+          positions: positions.map(function(item) {
             return SkyScenery.Cartesian3.fromDegrees(item[0], item[1]);
           }),
           // 设置高度
           maximumHeights: new Array(positions.length).fill(options.maxH || 100),
           minimumHeights: new Array(positions.length).fill(0),
           material: new SkyScenery.DynamicWallMaterialProperty({
-            color: SkyScenery.Color.fromCssColorString(options.color || "#00c4ff80"), // "#"
+            color: SkyScenery.Color.fromCssColorString(
+              options.color || "#00c4ff80"
+            ), // "#"
             trailImage: "/static/image/color.png",
-            duration: options.duration || 3000, // 3000
-          }),
-        },
+            duration: options.duration || 3000 // 3000
+          })
+        }
       });
     },
 
@@ -366,6 +385,7 @@ export default {
      * @param {*} flyto 是否自动飞行到3Dtiles
      */
     add3DTiles(keys, flyto) {
+      let that = this;
       if (this.viewer3DTiles[keys]) {
         this.viewer3DTiles[keys].show = true;
         if (flyto) {
@@ -373,26 +393,159 @@ export default {
         }
       } else {
         let option = {
-          url: this.keysByUrl[keys] + "/tileset.json",
+          url: this.keysByOptions[keys].url + "/tileset.json",
           skipLevelOfDetail: true, //开启跳级加载
           maximumMemoryUsage: 1024, //最大内存占用  推荐显存的一般
           preferLeaves: true,
           maximumScreenSpaceError: 16,
-          maximumNumberOfLoadedTiles: 2000,
+          maximumNumberOfLoadedTiles: 2000
         };
         var tile = new SkyScenery.Cesium3DTileset(option);
         viewer.scene.primitives.add(tile);
 
+<<<<<<< HEAD
         if (flyto) {
-          tile.readyPromise.then(function () {
+          tile.readyPromise.then(function() {
+=======
+        tile.readyPromise.then(function () {
+          // 设置相机视角
+          if (flyto) {
+>>>>>>> ea40ec63e9c0f3db4ef6f3cba766c6653aeda8d6
             viewer.zoomTo(tile);
-          });
-        }
+          }
+        });
         this.viewer3DTiles[keys] = tile;
+        setTimeout(() => {
+          this.update3DTilesStyleByKeys(
+            this.viewer3DTiles[keys],
+            Object.assign({}, this.keysByOptions[keys])
+          );
+        });
+      }
+    },
+    /**
+     * 修改3DTiles样式
+     */
+    update3DTilesStyleByKeys(tileset, options) {
+      try {
+        console.log("update3DTilesStyleByKeys options", tileset, options);
+        tileset.readyPromise.then(function () {
+          // 设置样式
+          var cartographic = SkyScenery.Cartographic.fromCartesian(
+            tileset.boundingSphere.center
+          );
+          var lon = SkyScenery.Math.toDegrees(cartographic.longitude);
+          var lat = SkyScenery.Math.toDegrees(cartographic.latitude);
+          var height = cartographic.height;
+          var surface = SkyScenery.Cartesian3.fromDegrees(lon, lat, height);
+          var offset = SkyScenery.Cartesian3.fromDegrees(
+            lon + options.lon,
+            lat + options.lat,
+            height + options.height
+          );
+
+          var translation = SkyScenery.Cartesian3.subtract(
+            offset,
+            surface,
+            new SkyScenery.Cartesian3()
+          );
+          tileset.modelMatrix = SkyScenery.Matrix4.fromTranslation(translation);
+
+          var m = tileset._root.transform;
+
+          if (options.rx != 0) {
+            const mx = SkyScenery.Matrix3.fromRotationX(
+              SkyScenery.Math.toRadians(options.rx)
+            );
+            const rotate = SkyScenery.Matrix4.fromRotationTranslation(mx);
+            SkyScenery.Matrix4.multiply(m, rotate, m);
+          }
+
+          if (options.ry != 0) {
+            const my = SkyScenery.Matrix3.fromRotationY(
+              SkyScenery.Math.toRadians(options.ry)
+            );
+            const rotate = SkyScenery.Matrix4.fromRotationTranslation(my);
+            SkyScenery.Matrix4.multiply(m, rotate, m);
+          }
+
+          if (options.rz != 0) {
+            const mz = SkyScenery.Matrix3.fromRotationZ(
+              SkyScenery.Math.toRadians(options.rz)
+            );
+            const rotate = SkyScenery.Matrix4.fromRotationTranslation(mz);
+            SkyScenery.Matrix4.multiply(m, rotate, m);
+          }
+
+          if (options.scale != 1) {
+            const _scale = SkyScenery.Matrix4.fromUniformScale(options.scale);
+            SkyScenery.Matrix4.multiply(m, _scale, m);
+          }
+          tileset._root.transform = m;
+        });
+      } catch (error) {
+        console.error(error);
       }
     },
     /**
-     * 删除3DTiles(测试)
+     * 修改3DTiles样式(测试)
+     */
+    update3DTilesStyle(keys, options) {
+      if (this.viewer3DTiles[keys]) {
+        let tileset = this.viewer3DTiles[keys];
+        this.update3DTilesStyleByKeys(tileset, options);
+      } else {
+        console.log("update3DTilesStyle未找到3DTiles模型实例!keys:", keys);
+      }
+    },
+    adjust3DTilesPosition(tileset, options) {
+      var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
+      var lon = Cesium.Math.toDegrees(cartographic.longitude);
+      var lat = Cesium.Math.toDegrees(cartographic.latitude);
+      var height = cartographic.height;
+      var surface = Cesium.Cartesian3.fromDegrees(lon, lat, height);
+      var offset = Cesium.Cartesian3.fromDegrees(
+        lon + options.lon,
+        lat + options.lat,
+        height + options.height
+      );
+
+      var translation = Cesium.Cartesian3.subtract(
+        offset,
+        surface,
+        new Cesium.Cartesian3()
+      );
+      tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
+
+      // var m = Cesium.Transforms.eastNorthUpToFixedFrame(surface);
+      var m = tileset._root.transform;
+
+      if (options.rx != 0) {
+        const mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(options.rx));
+        const rotate = Cesium.Matrix4.fromRotationTranslation(mx);
+        Cesium.Matrix4.multiply(m, rotate, m);
+      }
+
+      if (options.ry != 0) {
+        const my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(options.ry));
+        const rotate = Cesium.Matrix4.fromRotationTranslation(my);
+        Cesium.Matrix4.multiply(m, rotate, m);
+      }
+
+      if (options.rz != 0) {
+        const mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(options.rz));
+        const rotate = Cesium.Matrix4.fromRotationTranslation(mz);
+        Cesium.Matrix4.multiply(m, rotate, m);
+      }
+
+      if (options.scale != 1) {
+        const _scale = Cesium.Matrix4.fromUniformScale(options.scale);
+        Cesium.Matrix4.multiply(m, _scale, m);
+      }
+      tileset._root.transform = m;
+    },
+    /**
+     * 删除3DTiles
      * @author LiuMengxiang
      * @param tiles 3DTiles实例
      */
@@ -420,11 +573,11 @@ export default {
       if (this.$store.state.initMap) {
         // 暂存首页下拉框选中值
         let homeVs = [];
-        cascaderValue.forEach((item) => {
+        cascaderValue.forEach(item => {
           homeVs.push(item[0] + item[1]);
         });
         // 遍历所有的3Dtiles
-        for (let keys in this.keysByUrl) {
+        for (let keys in this.keysByOptions) {
           // 如果选中的话
           if (homeVs.length > 0 && homeVs.indexOf(keys) != -1) {
             this.add3DTiles(keys, true);
@@ -437,8 +590,8 @@ export default {
           this.HomeHandleChangeCascader(cascaderValue);
         }, 1000);
       }
-    },
-  },
+    }
+  }
 };
 </script>
 

src/views/HomeView.vue

@@ -2,15 +2,16 @@
   <div class="home">
     <Header />
     <Edge />
+    <Layers />
     <Map ref="map" />
     <!-- 左侧图片区 -->
     <div class="home_LeftMainBox">
-      <img style="width: 500px; height: 50px" src="../assets/images/LT1.png" />
-      <img style="width: 500px; height: 246px" src="../assets/images/LM1.png" />
-      <img style="width: 500px; height: 50px" src="../assets/images/LT2.png" />
-      <img style="width: 500px; height: 246px" src="../assets/images/LM2.png" />
-      <img style="width: 500px; height: 50px" src="../assets/images/LT3.png" />
-      <img style="width: 500px; height: 246px" src="../assets/images/LM3.png" />
+      <img style="width: 450px; height: 50px" src="../assets/images/LT1.png" />
+      <img style="width: 450px; height: 246px" src="../assets/images/LM1.png" />
+      <img style="width: 450px; height: 50px" src="../assets/images/LT2.png" />
+      <img style="width: 450px; height: 246px" src="../assets/images/LM2.png" />
+      <img style="width: 450px; height: 50px" src="../assets/images/LT3.png" />
+      <img style="width: 450px; height: 246px" src="../assets/images/LM3.png" />
     </div>
     <!-- 中上部分3DTiles控件 -->
     <div class="home_CentralMainBox">
@@ -20,17 +21,68 @@
         @change="handleChangeCascader"
         :options="options"
         :props="props"
-        clearable
       ></el-cascader>
     </div>
+    <!-- 中下部分3DTiles偏移调试工具 LiuMengxiang  2024/09/11-->
+    <div class="home_CentralRBMainBox" v-if="false">
+      <h3>3DTiles样式调整</h3>
+      X轴旋转<el-input-number
+        v-model="tileStyle.rx"
+        :precision="2"
+        :step="0.01"
+        :min="-100"
+        :max="100"
+        label="X轴旋转"
+      ></el-input-number>
+      Y轴旋转<el-input-number
+        v-model="tileStyle.ry"
+        :precision="2"
+        :step="0.01"
+        :min="-100"
+        :max="100"
+        label="Y轴旋转"
+      ></el-input-number>
+      Z轴旋转<el-input-number
+        v-model="tileStyle.rz"
+        :precision="2"
+        :step="0.01"
+        :min="-100"
+        :max="100"
+        label="Z轴旋转"
+      ></el-input-number>
+      X轴偏移（单位：度）<el-input-number
+        v-model="tileStyle.lon"
+        :precision="4"
+        :step="0.0001"
+        :min="-100"
+        :max="100"
+        label="X轴偏移"
+      ></el-input-number>
+      Y轴偏移（单位：度）<el-input-number
+        v-model="tileStyle.lat"
+        :precision="4"
+        :step="0.0001"
+        :min="-100"
+        :max="100"
+        label="Y轴偏移"
+      ></el-input-number>
+      Z轴偏移（单位：度）<el-input-number
+        v-model="tileStyle.height"
+        :precision="1"
+        :step="0.1"
+        :min="-100"
+        :max="100"
+        label="Z轴偏移"
+      ></el-input-number>
+    </div>
     <!-- 右侧图片区 -->
     <div class="home_RightMainBox">
-      <img style="width: 500px; height: 50px" src="../assets/images/RT1.png" />
-      <img style="width: 500px; height: 246px" src="../assets/images/RM1.png" />
-      <img style="width: 500px; height: 50px" src="../assets/images/RT2.png" />
-      <img style="width: 500px; height: 246px" src="../assets/images/RM2.png" />
-      <img style="width: 500px; height: 50px" src="../assets/images/RT3.png" />
-      <img style="width: 500px; height: 246px" src="../assets/images/RM3.png" />
+      <img style="width: 450px; height: 50px" src="../assets/images/RT1.png" />
+      <img style="width: 450px; height: 246px" src="../assets/images/RM1.png" />
+      <img style="width: 450px; height: 50px" src="../assets/images/RT2.png" />
+      <img style="width: 450px; height: 246px" src="../assets/images/RM2.png" />
+      <img style="width: 450px; height: 50px" src="../assets/images/RT3.png" />
+      <img style="width: 450px; height: 246px" src="../assets/images/RM3.png" />
     </div>
   </div>
 </template>
@@ -39,6 +91,7 @@
 import Map from "@/components/Map.vue";
 import Header from "@/components/Header.vue";
 import Edge from "@/components/Edge.vue";
+import Layers from "@/components/Layers.vue";
 import CardTitle from "@/components/cards/CardTitle.vue";
 
 export default {
@@ -48,12 +101,33 @@ export default {
       props: { multiple: true },
       options: [],
       cascaderValue: [],
+      // 3DTile调试工具中转变量
+      oldTileStyle: {
+        scale: 1,
+        rx: 0,
+        ry: 0,
+        rz: 0,
+        lon: 0,
+        height: 0,
+        lat: 0,
+      },
+      // 3DTile调试工具变量
+      tileStyle: {
+        scale: 1,
+        rx: 0,
+        ry: 0,
+        rz: 0,
+        lon: 0,
+        height: 0,
+        lat: 0,
+      },
     };
   },
   components: {
     Map,
     Header,
     Edge,
+    Layers,
     CardTitle,
   },
   mounted() {
@@ -77,6 +151,20 @@ export default {
     //   });
     // });
   },
+  watch: {
+    tileStyle: {
+      handler(val, oldVal) {
+        let tileStyle_ = Object.assign({}, val);
+        tileStyle_.rx -= this.oldTileStyle.rx;
+        tileStyle_.ry -= this.oldTileStyle.ry;
+        tileStyle_.rz -= this.oldTileStyle.rz;
+        this.oldTileStyle = Object.assign({}, val);
+        // this.$refs.map.update3DTilesStyle("蟠龙天地地面", tileStyle_);
+        this.$refs.map.update3DTilesStyle("西虹桥全部", tileStyle_);
+      },
+      deep: true,
+    },
+  },
   methods: {
     handleChangeCascader(cascaderValue) {
       this.$refs.map.HomeHandleChangeCascader(Object.assign([], cascaderValue));
@@ -92,10 +180,10 @@ export default {
   overflow: hidden;
   &_LeftMainBox {
     position: fixed;
-    z-index: 9999;
+    z-index: 1;
     top: 65px;
     left: 0;
-    width: 500px;
+    width: 450px;
     height: calc(100vh - 65px);
     overflow: hidden;
     display: flex;
@@ -107,7 +195,7 @@ export default {
   }
   &_CentralMainBox {
     position: fixed;
-    z-index: 9999;
+    z-index: 1;
     left: 520px;
     top: 100px;
     width: 350px;
@@ -117,12 +205,25 @@ export default {
     flex-wrap: nowrap;
     justify-content: space-between;
   }
+  &_CentralRBMainBox {
+    position: fixed;
+    z-index: 1;
+    right: 470px;
+    bottom: 10px;
+    padding: 10px;
+    background: #fff;
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+  }
   &_RightMainBox {
     position: fixed;
-    z-index: 9999;
+    z-index: 1;
     top: 65px;
     right: 0;
-    width: 500px;
+    width: 450px;
     height: calc(100vh - 65px);
     overflow: hidden;
     display: flex;