<template>
|
<div class="layerTreePanel">
|
<div class="menutop">
|
<div class="menuback" @click="back">
|
<i class="el-icon-arrow-left"></i><span>返回</span>
|
</div>
|
<div class="menutitle">更多图层</div>
|
</div>
|
<div class="layerTreeContainer">
|
<div class="title">专题图层列表</div>
|
<div class="treeContainer">
|
<el-tree
|
:data="treeData"
|
node-key="id"
|
ref="tree"
|
:default-checked-keys="arr"
|
show-checkbox
|
:render-content="renderContent"
|
:default-expanded-keys="defaultExpanded"
|
:props="defaultProps"
|
:default-expand-all="true"
|
@check="check"
|
>
|
</el-tree>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
let projectTreeData = [];
|
let clusterItemList = [];
|
//添加工程树数据
|
function addTreeData(data, layer) {
|
var d = {};
|
for (var key in data) {
|
d[key] = data[key];
|
}
|
d.item = layer;
|
projectTreeData.push(d);
|
}
|
//通过id获取指定元素
|
function _getTreeData(id) {
|
for (var i = 0; i < projectTreeData.length; i++) {
|
if (
|
projectTreeData[i].id === id ||
|
(projectTreeData[i].datatype === "entity" &&
|
projectTreeData[i].item &&
|
projectTreeData[i].item.entity &&
|
projectTreeData[i].item.entity.id === id) ||
|
(projectTreeData[i].datatype === "editEntity" &&
|
projectTreeData[i].item &&
|
projectTreeData[i].item[projectTreeData[i].type] &&
|
projectTreeData[i].item[projectTreeData[i].type].id === id)
|
) {
|
return projectTreeData[i];
|
}
|
}
|
}
|
function generatePosition(num) {
|
let list = [];
|
for (let i = 0; i < num; i++) {
|
let lon = 116.52217697339846 + Math.random() * 0.4;
|
let lat = 39.75979421847914 + Math.random() * 0.3;
|
list.push(new SmartEarth.Degrees(lon, lat));
|
}
|
return list;
|
}
|
|
import store from "@/utils/store2.js";
|
import axios from "axios";
|
|
import Vector from "ol/source/Vector";
|
// import GeoJSON from "ol/format/GeoJSON";
|
// import Cluster from "ol/source/Cluster";
|
// import Style from "ol/style/Style";
|
// import Circle from "ol/style/Circle";
|
// import Stroke from "ol/style/Stroke";
|
// import Fill from "ol/style/Fill";
|
// import Text from "ol/style/Text";
|
// import Icon from "ol/style/Icon";
|
// import VectorLayer from "ol/layer/Vector";
|
|
// import ImageWMS from "ol/source/ImageWMS";
|
// import Image from "ol/layer/Image";
|
|
export default {
|
name: "LayerTreePanel",
|
data() {
|
return {
|
alldisabled: [],
|
arr: [],
|
treeData: [],
|
defaultExpanded: [],
|
defaultCheck: [],
|
defaultProps: {
|
children: "children",
|
label: "name",
|
},
|
state: store.thematicLayer,
|
};
|
},
|
mounted() {
|
axios.get("./static/json/layers.json").then(
|
(res) => {
|
console.log("layers.json", res);
|
//获取默认选中数据的id
|
this.parseJson(res.data.children);
|
|
//场景配置
|
this.treeData = res.data && res.data.children;
|
this.setDefaultCheck(res.data);
|
setTimeout(() => {
|
let selectedLayers = this.$refs.tree.getCheckedNodes();
|
|
let filterSelectLayers = selectedLayers;
|
let filist = filterSelectLayers.filter((p) => {
|
return !p.children;
|
});
|
let legendlist = [];
|
for (var i = 0; i < filist.length; i++) {
|
var getkeyList = keys[filist[i].id];
|
if (getkeyList && getkeyList.list && getkeyList.list.length > 0) {
|
for (var j = 0; j < getkeyList.list.length; j++) {
|
legendlist.push(getkeyList.list[j]);
|
}
|
}
|
}
|
//store.setPoplayerListAction(legendlist);
|
}, 1000);
|
},
|
(error) => {
|
console.log("获取场景配置失败！" + error);
|
}
|
);
|
},
|
methods: {
|
// 递归遍历json，得到checked:true的数据的id，添加到arr中
|
parseJson(jsonObj) {
|
// 声明变量count，记录disabled存在的节点的全部数据
|
var count = 0;
|
for (var v in jsonObj) {
|
var element = jsonObj[v];
|
if (element.expanded) {
|
this.defaultExpanded.push(element.id);
|
}
|
if (element.children == undefined || element.children.length == 0) {
|
if (element._children == undefined || element._children.length == 0) {
|
if (element.checked) {
|
this.arr.push(element.id);
|
}
|
if (element.urls == undefined || element.urls == "") {
|
element.disabled = true;
|
count++;
|
}
|
} else {
|
this.parseJson(element._children);
|
}
|
} else {
|
this.parseJson(element.children);
|
}
|
}
|
if (count !== 0) {
|
// 添加含有disabled属性的节点数组，
|
this.alldisabled.push(jsonObj);
|
}
|
},
|
|
async setDefaultCheck(node) {
|
this.ergodicNode(node);
|
this.$refs.tree.setCheckedKeys(this.defaultCheck);
|
// setTimeout(()=>{
|
// this.$refs.tree.setCheckedKeys(['tc3857']);
|
// },1000)
|
},
|
|
ergodicNode(node) {
|
if (node.expanded) {
|
this.defaultExpanded.push(node.id);
|
}
|
if (node.checked && !node.children) {
|
this.defaultCheck.push(node.id);
|
if (!node.isAdd) {
|
if (node._children) {
|
if (node.thisView) {
|
if (node._children[0].children) {
|
node._children[0].children.forEach((item) => {
|
this.addTreeData(item);
|
});
|
} else {
|
this.addTreeData(node._children[0]);
|
}
|
} else {
|
node._children.forEach((item) => {
|
this.addTreeData(item);
|
});
|
}
|
} else {
|
this.addTreeData(node);
|
}
|
}
|
}
|
if (node.children && node.children.length) {
|
node.children.forEach((item) => {
|
this.ergodicNode(item);
|
});
|
}
|
},
|
|
check(treeNode, data) {
|
let idsOnlyArr = [
|
"GuiHuaFanWeiShiYiTu",
|
"XingZhengQuHuaTu",
|
"GuiHuaDanYuanHuaFenTu",
|
"ZhuYaoGongNengQuGuiHuaShiYiTu",
|
];
|
if (idsOnlyArr.includes(treeNode.id)) {
|
// 获取之前选中的node
|
let otherItem = idsOnlyArr
|
.filter((item) => {
|
return item != treeNode.id;
|
})
|
.filter((item) => data.checkedKeys.includes(item));
|
if (otherItem.length > 0) {
|
let item = this.$refs.tree.getNode(otherItem[0]).data;
|
// 移除之前选中的
|
this.setVisiable(item, false);
|
this.$refs.tree.setChecked(item.id, false, false);
|
}
|
// debugger;
|
let checkFlag = data.checkedKeys.indexOf(treeNode.id) > -1;
|
store.setThematicLayerItemId(checkFlag ? treeNode.id : "");
|
}
|
// 打勾选中
|
let isCheck = data.checkedKeys.indexOf(treeNode.id) > -1;
|
this.setVisiable(treeNode, isCheck);
|
},
|
|
setVisiable(treeNode, checked) {
|
if (checked !== undefined) {
|
treeNode.checked = checked;
|
} else {
|
treeNode.checked = !treeNode.checked;
|
}
|
if (treeNode.children) {
|
treeNode.children.forEach((item) => {
|
this.setVisiable(item, treeNode.checked);
|
});
|
return;
|
} else if (treeNode._children) {
|
if (treeNode.thisView === "ewzj") {
|
treeNode._children[0].checked = treeNode.checked;
|
if (treeNode._children[0].children) {
|
treeNode._children[0].children.forEach((item) => {
|
item.checked = treeNode.checked;
|
this.addTreeData(item);
|
});
|
} else {
|
this.addTreeData(treeNode._children[0]);
|
}
|
} else if (treeNode.thisView === "swzj") {
|
for (let i = 1; i < treeNode._children.length; i++) {
|
treeNode._children[i].checked = treeNode.checked;
|
}
|
treeNode._children.forEach((item, index) => {
|
index !== 0 && this.addTreeData(item);
|
});
|
} else if (!treeNode.thisView) {
|
treeNode._children.forEach((item, index) => {
|
item.checked = treeNode.checked;
|
if (item.children) {
|
item.children.forEach((_item) => {
|
_item.checked = item.checked;
|
this.addTreeData(_item);
|
});
|
} else {
|
this.addTreeData(item);
|
}
|
});
|
}
|
return;
|
}
|
|
if (!treeNode.isAdd) {
|
this.addTreeData(treeNode);
|
return;
|
}
|
|
let data = _getTreeData(treeNode.id);
|
if (data) {
|
data.item &&
|
data.item.setVisibility &&
|
data.item.setVisibility(treeNode.checked);
|
data.item &&
|
data.item.setVisible &&
|
data.item.setVisible(treeNode.checked);
|
data.item &&
|
data.item.show !== undefined &&
|
(data.item.show = treeNode.checked);
|
if (data.datatype === "particle") {
|
data.item.forEach((item) => {
|
item.show = treeNode.checked;
|
});
|
}
|
} else {
|
if (
|
treeNode.id &&
|
treeNode.id.indexOf &&
|
treeNode.id.indexOf("---") > -1
|
) {
|
var ids = id.split("---");
|
ids.forEach((item) => {
|
sgworld.ProjectTree.setVisibility(item, treeNode.checked);
|
});
|
} else {
|
sgworld.ProjectTree.setVisibility(treeNode.id, treeNode.checked);
|
var dd = Viewer.dataSources._dataSources.filter((item) => {
|
return item.name == treeNode.id;
|
});
|
if (dd && dd.length > 0) {
|
dd[0].show = treeNode.checked;
|
}
|
//判断勾选的是否为聚合
|
var jhdd = clusterItemList.filter((item) => {
|
return item.name == treeNode.id;
|
});
|
if (jhdd && jhdd.length > 0) {
|
jhdd[0].dataSource.show = treeNode.checked;
|
}
|
}
|
}
|
},
|
|
flyTo(treeNode) {
|
if (treeNode.children) return;
|
if (treeNode._children && treeNode._children[0]) {
|
this.flyTo(treeNode._children[0]);
|
return;
|
}
|
if (treeNode && treeNode.flyTo) {
|
if (treeNode && treeNode.flyTo.length === 3) {
|
sgworld.Navigate.flyToPosition(
|
treeNode.flyTo[0],
|
treeNode.flyTo[1],
|
treeNode.flyTo[2]
|
);
|
} else if (treeNode && treeNode.flyTo.length === 4) {
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Rectangle.fromDegrees(
|
treeNode.flyTo[0],
|
treeNode.flyTo[1],
|
treeNode.flyTo[2],
|
treeNode.flyTo[3]
|
),
|
});
|
} else {
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Cartesian3.fromDegrees(
|
treeNode.flyTo[0],
|
treeNode.flyTo[1],
|
treeNode.flyTo[2]
|
),
|
orientation: {
|
heading: treeNode.flyTo[3],
|
pitch: treeNode.flyTo[4],
|
roll: treeNode.flyTo[5],
|
},
|
});
|
}
|
return;
|
}
|
let data = sgworld.ProjectTree.getObject(treeNode.id);
|
data && data.item
|
? sgworld.Navigate.flyToObj(data.item)
|
: sgworld.Navigate.flyToObj(data);
|
if (data && data.datatype === "editEntity") {
|
data && data.item && sgworld.Navigate.flyToObj(data.item[data.type]);
|
}
|
},
|
|
renderContent(h, { node, data, store }) {
|
if (data.icon) {
|
return (
|
<span class="TreeNodeClass" on-dblclick={() => this.flyTo(data)}>
|
<span class="typeIcon">
|
<img src={data.icon} />
|
</span>
|
<span class="treeName" style="font-size:16px">
|
{data.name}
|
</span>
|
</span>
|
);
|
} else if (data.disabled) {
|
return (
|
<span
|
class="TreeNodeClass custom_hide"
|
on-dblclick={() => this.flyTo(data)}
|
>
|
<span class="treeName" style="font-size:16px">
|
{data.name}
|
</span>
|
<i
|
slot="reference"
|
class="el-icon-info"
|
style="font-size:16px;margin-right:16px"
|
on-click={() => this.showLayerInfo(data)}
|
></i>
|
</span>
|
);
|
} else {
|
if (data.children) {
|
return (
|
<span class="TreeNodeClass" on-dblclick={() => this.flyTo(data)}>
|
<span class="treeName" style="font-size:16px">
|
{data.name}
|
</span>
|
</span>
|
);
|
} else {
|
return (
|
<span
|
class="TreeNodeClass"
|
style="flex: 1;display: flex;align-items: center;justify-content: space-between;"
|
on-dblclick={() => this.flyTo(data)}
|
>
|
<span class="treeName" style="font-size:16px">
|
{data.name}
|
</span>
|
</span>
|
);
|
}
|
}
|
},
|
|
async addTreeData(treeNode) {
|
switch (treeNode.sourceType) {
|
case "tms":
|
layer = sgworld.Creator.createImageryProvider(
|
treeNode.name,
|
"tms",
|
{
|
id: treeNode.id,
|
url: treeNode.urls,
|
fileExtension: treeNode.img || "png",
|
enablePickFeatures: false,
|
alpha: treeNode.alpha,
|
},
|
"0",
|
undefined,
|
true,
|
""
|
);
|
|
break;
|
case "local-map":
|
// 添加本地地图
|
if (treeNode.tms) {
|
layer = sgworld.Creator.createImageryProvider(
|
treeNode.name,
|
"tms",
|
{
|
id: treeNode.id,
|
url: treeNode.urls,
|
fileExtension: treeNode.img || "png",
|
enablePickFeatures: false,
|
level: treeNode.Level,
|
minimumLevel: treeNode.minimumLevel,
|
maximumLevel: treeNode.maximumLevel,
|
tilingScheme:
|
treeNode.tileType === "Geo"
|
? new Cesium.GeographicTilingScheme()
|
: new Cesium.WebMercatorTilingScheme(),
|
alpha: treeNode.alpha,
|
},
|
"0",
|
treeNode.zIndex,
|
true,
|
""
|
);
|
} else {
|
layer = sgworld.Creator.createUrlTemplateImageryProvider(
|
treeNode.name,
|
{
|
id: treeNode.id,
|
url: `${treeNode.urls}/${treeNode.tile || "{z}/{x}/{y}"}.${
|
treeNode.img || "png"
|
}`,
|
enablePickFeatures: false,
|
level: treeNode.Level,
|
minimumLevel: treeNode.minimumLevel,
|
maximumLevel: treeNode.maximumLevel,
|
tilingScheme:
|
treeNode.tileType === "Geo"
|
? new Cesium.GeographicTilingScheme()
|
: new Cesium.WebMercatorTilingScheme(),
|
alpha: treeNode.alpha,
|
},
|
"0",
|
treeNode.zIndex,
|
true,
|
""
|
);
|
}
|
break;
|
case "kml":
|
// 添加kml数据
|
layer = sgworld.Creator.addKmlLayer(
|
treeNode.name,
|
{
|
id: treeNode.id,
|
url: treeNode.urls,
|
},
|
true
|
);
|
break;
|
case "google":
|
// 添加谷歌地图
|
layer = sgworld.Creator.createUrlTemplateImageryProvider(
|
treeNode.name,
|
{
|
id: treeNode.id,
|
url: treeNode.urls,
|
enablePickFeatures: false,
|
level: treeNode.Level,
|
minimumLevel: treeNode.minimumLevel,
|
maximumLevel: treeNode.maximumLevel,
|
alpha: treeNode.alpha,
|
tilingScheme: sgworld.Core.getOffsetTilingScheme(),
|
},
|
"0",
|
treeNode.zIndex,
|
true,
|
""
|
);
|
break;
|
case "arcgis":
|
// arcgis地图
|
layer = sgworld.Creator.createArcGisImageryLayer(
|
treeNode.name,
|
{
|
id: treeNode.id,
|
url: treeNode.urls,
|
enablePickFeatures: false,
|
level: treeNode.Level,
|
usePreCachedTilesIfAvailable: treeNode.GCJ02 ? false : true, // 是否使用服务的内置的切片方案，偏移纠正需要使用如下自定义的方案
|
tilingScheme: treeNode.GCJ02
|
? sgworld.Core.getOffsetTilingScheme()
|
: undefined, // 偏移纠正
|
minimumLevel: treeNode.minimumLevel,
|
maximumLevel: treeNode.maximumLevel,
|
alpha: treeNode.alpha,
|
},
|
"0",
|
treeNode.zIndex,
|
true,
|
""
|
);
|
break;
|
case "mapbox":
|
// mapbox地图
|
layer = sgworld.Creator.createImageryProvider(
|
treeNode.name,
|
"MapBox",
|
{
|
id: treeNode.id,
|
name: treeNode.name,
|
level: treeNode.Level,
|
enablePickFeatures: false,
|
mapId: treeNode.mapId,
|
minimumLevel: treeNode.minimumLevel,
|
maximumLevel: treeNode.maximumLevel,
|
alpha: treeNode.alpha,
|
accessToken:
|
treeNode.token ||
|
"pk.eyJ1IjoibWFyc2dpcyIsImEiOiJja2Fod2xlanIwNjJzMnhvMXBkMnNqcjVpIn0.WnxikCaN2KV_zn9tLZO77A",
|
},
|
"0",
|
treeNode.zIndex,
|
true,
|
""
|
);
|
break;
|
case "tdmap":
|
// 天地图
|
layer = sgworld.Creator.createWebMapTileServerImageLayer(
|
treeNode.name,
|
{
|
id: treeNode.id,
|
url: treeNode.urls,
|
level: treeNode.Level,
|
minimumLevel: treeNode.minimumLevel,
|
maximumLevel: 18,
|
style: treeNode.style,
|
layer: treeNode.layer,
|
format: treeNode.format,
|
enablePickFeatures: false,
|
tileMatrixSetID: "tiff",
|
show: true,
|
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
|
alpha: treeNode.alpha,
|
},
|
"0",
|
treeNode.zIndex,
|
true,
|
""
|
);
|
break;
|
case "yzsate":
|
layer = sgworld.Creator.createWebMapTileServerImageLayer(
|
treeNode.name,
|
{
|
id: treeNode.id,
|
url: treeNode.urls,
|
layer: treeNode.layer,
|
enablePickFeatures: false,
|
show: true,
|
tileMatrixSetID: treeNode.ttileMatrixSetId
|
? treeNode.ttileMatrixSetId
|
: "Sate_2019",
|
tilingScheme: new Cesium.WebMercatorTilingScheme({
|
rectangleSouthwestInMeters: new Cesium.Cartesian2(0, -229396.5),
|
rectangleNortheastInMeters: new Cesium.Cartesian2(
|
917580,
|
688193.5
|
),
|
//rectangleSouthwestInMeters:new Cesium.Cartesian2(0,0) ,
|
// rectangleNortheastInMeters:new Cesium.Cartesian2(20037508.3427892, 20037508.3427892),
|
numberOfLevelZeroTilesX: 4,
|
numberOfLevelZeroTilesY: 4,
|
projection: new Cesium.GeographicProjection(),
|
}),
|
},
|
pID,
|
undefined,
|
treeNode.checked,
|
""
|
);
|
treeNode.id = layer.treeobj.id;
|
break;
|
case "yzmap":
|
layer = sgworld.Creator.createWebMapTileServerImageLayer(
|
treeNode.name,
|
{
|
id: treeNode.id,
|
url: treeNode.urls,
|
layer: treeNode.layer,
|
enablePickFeatures: false,
|
show: true,
|
},
|
pID,
|
undefined,
|
treeNode.checked,
|
""
|
);
|
treeNode.id = layer.treeobj.id;
|
break;
|
case "cluster":
|
layer = this.initCluster(treeNode);
|
break;
|
case "ldgcluster":
|
layer = this.initLdgCluster(treeNode);
|
break;
|
case "qiyeinfo":
|
layer = this.qiyeCluster(treeNode);
|
// layer = this.testSDKcluster(treeNode);
|
break;
|
case "yztile":
|
layer = new YZWMS(treeNode);
|
sgworld._Viewer.imageryLayers.addImageryProvider(layer);
|
break;
|
case "tdt_label":
|
// 天地图三维注记
|
layer = sgworld.Creator.GeoWTFS({
|
token: treeNode.token || "c53eb074c3fcba5ac86103d4d711bbe8",
|
url: treeNode.urls,
|
subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
|
});
|
break;
|
case "txmap":
|
// 腾讯地图
|
layer = sgworld.Creator.createUrlTemplateImageryProvider(
|
treeNode.name,
|
{
|
id: treeNode.id,
|
url: treeNode.urls,
|
level: treeNode.Level,
|
enablePickFeatures: false,
|
minimumLevel: treeNode.minimumLevel,
|
maximumLevel: 18,
|
alpha: treeNode.alpha,
|
tilingScheme: sgworld.Core.getOffsetTilingScheme(), // 偏移纠正
|
customTags: {
|
sx: (_imageryProvider, x) => {
|
return x >> 4;
|
},
|
sy: (_imageryProvider, _x, y, level) => {
|
return ((1 << level) - y) >> 4;
|
},
|
},
|
},
|
"0",
|
treeNode.zIndex,
|
true,
|
""
|
);
|
break;
|
case "gdmap":
|
// 高德地图
|
layer = sgworld.Creator.createUrlTemplateImageryProvider(
|
treeNode.name,
|
{
|
id: treeNode.id,
|
url: treeNode.urls,
|
enablePickFeatures: false,
|
level: treeNode.Level,
|
minimumLevel: treeNode.minimumLevel,
|
maximumLevel: 18,
|
tilingScheme: sgworld.Core.getOffsetTilingScheme(), // 偏移纠正
|
alpha: treeNode.alpha,
|
},
|
"0",
|
treeNode.zIndex,
|
true,
|
""
|
);
|
break;
|
case "bdmap":
|
// 百度地图
|
layer = sgworld.Creator.createImageryProvider(
|
treeNode.name,
|
"BaiduMap",
|
{
|
id: treeNode.id,
|
level: treeNode.Level,
|
enablePickFeatures: false,
|
style: treeNode.style,
|
minimumLevel: treeNode.minimumLevel,
|
maximumLevel: treeNode.maximumLevel,
|
alpha: treeNode.alpha,
|
},
|
"0",
|
treeNode.zIndex,
|
true,
|
""
|
);
|
break;
|
case "cesiumblack":
|
// cesiumIon黑夜地图
|
layer = sgworld.Creator.createImageryProvider(
|
treeNode.name,
|
"cesiumBlack",
|
{
|
id: treeNode.id,
|
url: treeNode.urls,
|
flipXY: true,
|
enablePickFeatures: false,
|
level: treeNode.Level,
|
minimumLevel: treeNode.minimumLevel,
|
maximumLevel: treeNode.maximumLevel,
|
alpha: treeNode.alpha,
|
},
|
"0",
|
treeNode.zIndex,
|
true,
|
""
|
);
|
break;
|
case "osm":
|
// osm地图
|
layer = sgworld.Creator.createImageryProvider(
|
treeNode.name,
|
"OpenStreetMap",
|
{
|
id: treeNode.id,
|
url: treeNode.urls,
|
enablePickFeatures: false,
|
level: treeNode.Level,
|
minimumLevel: treeNode.minimumLevel,
|
maximumLevel: treeNode.maximumLevel,
|
alpha: treeNode.alpha,
|
},
|
"0",
|
treeNode.zIndex,
|
true,
|
""
|
);
|
break;
|
case "wmts":
|
// wmts影像
|
layer = sgworld.Creator.createWebMapTileServerImageLayer(
|
treeNode.name,
|
{
|
id: treeNode.id,
|
url: treeNode.urls,
|
level: treeNode.Level,
|
style: treeNode.style,
|
layer: treeNode.layer,
|
enablePickFeatures: false,
|
format: treeNode.format,
|
tileMatrixSetID: treeNode.srs,
|
tilingScheme:
|
treeNode.tileType === "Geo"
|
? new Cesium.GeographicTilingScheme()
|
: new Cesium.WebMercatorTilingScheme(),
|
show: true,
|
minimumLevel: treeNode.minimumLevel,
|
maximumLevel: treeNode.maximumLevel,
|
alpha: treeNode.alpha,
|
},
|
"0",
|
treeNode.zIndex,
|
true,
|
""
|
);
|
break;
|
case "gis_wmts":
|
// gisserver wmst影像
|
layer = sgworld.Creator.createUrlTemplateImageryProvider(
|
treeNode.name,
|
{
|
id: treeNode.id,
|
url: Cesium.buildModuleUrl(
|
treeNode.urls + "/{z}/{x}/{reverseY}.png"
|
),
|
enablePickFeatures: false,
|
level: treeNode.Level,
|
minimumLevel: treeNode.minimumLevel,
|
maximumLevel: treeNode.maximumLevel,
|
alpha: treeNode.alpha,
|
},
|
"0",
|
treeNode.zIndex,
|
true,
|
""
|
);
|
break;
|
case "wmts_zj":
|
// 行列号差两倍的wmts
|
var geotil = new Cesium.GeographicTilingScheme({
|
rectangle: Cesium.Rectangle.MAX_VALUE,
|
});
|
if (treeNode.addLevel && treeNode.addLevel === 2) {
|
geotil.positionToTileXY = function (position, level, result) {
|
level > 0 && level++;
|
var rectangle = this._rectangle;
|
if (!Cesium.Rectangle.contains(rectangle, position)) {
|
// outside the bounds of the tiling scheme
|
return undefined;
|
}
|
|
var xTiles = this.getNumberOfXTilesAtLevel(level);
|
var yTiles = this.getNumberOfYTilesAtLevel(level);
|
|
var xTileWidth = rectangle.width / xTiles;
|
var yTileHeight = rectangle.height / yTiles;
|
|
var longitude = position.longitude;
|
if (rectangle.east < rectangle.west) {
|
longitude += Cesium.Math.TWO_PI;
|
}
|
|
var xTileCoordinate =
|
((longitude - rectangle.west) / xTileWidth) | 0;
|
if (xTileCoordinate >= xTiles) {
|
xTileCoordinate = xTiles - 1;
|
}
|
|
var yTileCoordinate =
|
((rectangle.north - position.latitude) / yTileHeight) | 0;
|
if (yTileCoordinate >= yTiles) {
|
yTileCoordinate = yTiles - 1;
|
}
|
|
if (!Cesium.defined(result)) {
|
return new Cesium.Cartesian2(xTileCoordinate, yTileCoordinate);
|
}
|
|
result.x = xTileCoordinate;
|
result.y = yTileCoordinate;
|
return result;
|
};
|
geotil.tileXYToRectangle = function (x, y, level, result) {
|
level > 0 && level++;
|
var rectangle = this._rectangle;
|
|
var xTiles = this.getNumberOfXTilesAtLevel(level);
|
var yTiles = this.getNumberOfYTilesAtLevel(level);
|
|
var xTileWidth = rectangle.width / xTiles;
|
var west = x * xTileWidth + rectangle.west;
|
var east = (x + 1) * xTileWidth + rectangle.west;
|
|
var yTileHeight = rectangle.height / yTiles;
|
var north = rectangle.north - y * yTileHeight;
|
var south = rectangle.north - (y + 1) * yTileHeight;
|
|
if (!Cesium.defined(result)) {
|
result = new Cesium.Rectangle(west, south, east, north);
|
}
|
|
result.west = west;
|
result.south = south;
|
result.east = east;
|
result.north = north;
|
return result;
|
};
|
}
|
layer = sgworld.Creator.createWebMapTileServerImageLayer(
|
treeNode.name,
|
{
|
id: treeNode.id,
|
url: treeNode.urls,
|
layer: treeNode.layer,
|
level: treeNode.Level,
|
minimumLevel: treeNode.minimumLevel,
|
maximumLevel: treeNode.maximumLevel,
|
style: "default",
|
tileMatrixSetID: "esritilematirx",
|
format: "image/png",
|
tilingScheme: geotil,
|
addLevel: treeNode.addLevel || 1, //层级加一
|
enablePickFeatures: false,
|
show: true,
|
alpha: treeNode.alpha,
|
},
|
"0",
|
treeNode.zIndex,
|
true,
|
""
|
);
|
break;
|
case "wms":
|
case "wmsc":
|
// wms数据
|
var parameters = {
|
service: "WMS",
|
format: "image/png",
|
transparent: true,
|
};
|
if (treeNode.removeNullValue) {
|
if (treeNode.nullvalue) {
|
treeNode.nullvalue = treeNode.nullvalue.replace("rgb(", "");
|
treeNode.nullvalue = treeNode.nullvalue.replace(")", "");
|
}
|
parameters.nullvalue = sgworld.Core.defaultValue(
|
treeNode.nullvalue,
|
"0,0,0"
|
);
|
parameters.nulltolerance = sgworld.Core.defaultValue(
|
treeNode.nulltolerance,
|
0
|
);
|
}
|
treeNode.token && (treeNode.urls += "?token=" + treeNode.token);
|
if (treeNode.sourceType === "wmsc") {
|
layer = sgworld.Creator.createCacheImageryProvider(
|
treeNode.name,
|
{
|
id: treeNode.id,
|
url: treeNode.urls || "",
|
layers: treeNode.layer || "",
|
level: treeNode.Level,
|
enablePickFeatures: false,
|
cacheUrl: treeNode.cacheUrl || treeNode.urls,
|
fileExtension: treeNode.fileExtension,
|
cacheMaxLevel: treeNode.cacheMaxLevel || 16,
|
alpha: treeNode.alpha,
|
},
|
"0",
|
treeNode.zIndex,
|
treeNode.checked,
|
""
|
);
|
} else {
|
layer = sgworld.Creator.createImageryProvider(
|
treeNode.name,
|
"wms",
|
{
|
id: treeNode.id,
|
url: treeNode.urls,
|
layers: treeNode.layer || "",
|
level: treeNode.Level,
|
minimumLevel: treeNode.minimumLevel,
|
maximumLevel: treeNode.maximumLevel,
|
enablePickFeatures: false,
|
parameters: parameters,
|
alpha: treeNode.alpha,
|
},
|
"0",
|
treeNode.zIndex,
|
true,
|
""
|
);
|
}
|
break;
|
case "wmse":
|
// layer = sgworld.Creator.createImageryProvider(
|
// treeNode.name,
|
// "wms",
|
// {
|
// id: treeNode.id,
|
// url: treeNode.urls,
|
// level: treeNode.Level,
|
// minimumLevel: treeNode.minimumLevel,
|
// maximumLevel: treeNode.maximumLevel,
|
// enablePickFeatures: false,
|
|
// layers: treeNode.layer || "",
|
// alpha: treeNode.alpha,
|
// parameters: {
|
// format: "image/png",
|
// transparent: true,
|
// },
|
// },
|
// "0",
|
// undefined,
|
// true,
|
// ""
|
// );
|
debugger;
|
var layer = new ol.layer.Image({
|
source: new ol.source.ImageWMS({
|
//不能设置为0，否则地图不展示。
|
ratio: 1,
|
url: "http://127.0.0.1:8080/geoserver/province/wms",
|
params: {
|
LAYERS: "province:新疆",
|
STYLES: "",
|
VERSION: "1.1.1",
|
FORMAT: "image/png",
|
},
|
serverType: "geoserver",
|
}),
|
});
|
window.mapapi.addLayer(layer);
|
break;
|
case "wfs":
|
// wfs数据
|
// console.log(treeNode);
|
layer = sgwfs.CreateWfs(treeNode.class, treeNode);
|
break;
|
case "yinjing":
|
axios
|
.get(
|
treeNode.urls +
|
"?version=1.3.0&request=GetFeature&format=json&typename=" +
|
treeNode.layer
|
)
|
.then((data) => {
|
console.log(data);
|
|
let features = data.data.features;
|
features.forEach((feature) => {
|
let geom = feature.geometry.coordinates;
|
let properties = feature.properties;
|
let point = new SmartEarth.Degrees(geom[0], geom[1], 0);
|
let imgUrl;
|
// console.log(point);
|
if (feature.featureType == "窨井") {
|
switch (feature.properties["井类型"]) {
|
case "雨水井":
|
imgUrl =
|
SmartEarthRootUrl +
|
"Workers/image/csyxj/切片/雨水井盖.png";
|
break;
|
case "电力井":
|
imgUrl =
|
SmartEarthRootUrl +
|
"Workers/image/csyxj/切片/电力井盖.png";
|
break;
|
case "交通井":
|
imgUrl =
|
SmartEarthRootUrl +
|
"Workers/image/csyxj/切片/交通井盖.png";
|
break;
|
case "路灯井":
|
imgUrl =
|
SmartEarthRootUrl +
|
"Workers/image/csyxj/切片/路灯井盖.png";
|
break;
|
case "通信井":
|
imgUrl =
|
SmartEarthRootUrl +
|
"Workers/image/csyxj/切片/通信井盖.png";
|
break;
|
case "污水井":
|
imgUrl =
|
SmartEarthRootUrl +
|
"Workers/image/csyxj/切片/污水井盖.png";
|
break;
|
case "监控井":
|
imgUrl =
|
SmartEarthRootUrl +
|
"Workers/image/csyxj/切片/监控井盖.png";
|
break;
|
case "燃气井":
|
imgUrl =
|
SmartEarthRootUrl +
|
"Workers/image/csyxj/切片/燃气井盖.png";
|
break;
|
case "热力井":
|
imgUrl =
|
SmartEarthRootUrl +
|
"Workers/image/csyxj/切片/热力井盖.png";
|
break;
|
default:
|
imgUrl = treeNode.image;
|
break;
|
}
|
}
|
|
var position = sgworld.Creator.CreatePosition(
|
geom[0],
|
geom[1],
|
0
|
);
|
var label = sgworld.Creator.CreateLabel(
|
position,
|
feature.properties["count"],
|
feature.featureType == "窨井" ? imgUrl : treeNode.image,
|
{
|
imageScale: 0.5,
|
disableDepthTestDistance: "Infinity",
|
minimumLevel: 16,
|
maximumLevel: 22,
|
// 无视遮挡
|
disableDepthTestDistance: Infinity,
|
},
|
0,
|
"文本"
|
);
|
});
|
});
|
break;
|
case "geojson":
|
if (treeNode.class === "point") {
|
treeNode.disableDepthTestDistance === "Infinity" &&
|
(treeNode.disableDepthTestDistance = Number.POSITIVE_INFINITY);
|
|
de = {
|
id: treeNode.id,
|
fillColor: sgworld.Core.defaultValue(treeNode.color, "#ffffff"),
|
color: sgworld.Core.defaultValue(treeNode.imageColor, undefined),
|
outlineColor: sgworld.Core.defaultValue(
|
treeNode.outlineColor,
|
"#ffffff"
|
),
|
backgroundColor: sgworld.Core.defaultValue(
|
treeNode.backgroundColor,
|
"#ffffff"
|
),
|
heightReference: sgworld.Core.defaultValue(
|
treeNode.heightReference,
|
0
|
),
|
pointHeight: sgworld.Core.defaultValue(
|
treeNode.pointHeight,
|
undefined
|
),
|
near: sgworld.Core.defaultValue(treeNode.near, 0),
|
far: sgworld.Core.defaultValue(treeNode.far, 99999999999),
|
bold: treeNode.bold,
|
italic: treeNode.italic,
|
showBackground: treeNode.showBackground,
|
outlineWidth: sgworld.Core.defaultValue(treeNode.outlineWidth, 1),
|
text: treeNode.text,
|
image: treeNode.image,
|
font_size: treeNode.size,
|
font_family: sgworld.Core.defaultValue(
|
treeNode.font_family,
|
"微软雅黑"
|
),
|
disableDepthTestDistance: sgworld.Core.defaultValue(
|
treeNode.disableDepthTestDistance,
|
undefined
|
),
|
labelData: treeNode.labelData,
|
imageData: treeNode.imageData,
|
};
|
|
if (
|
treeNode.text &&
|
treeNode.image &&
|
!treeNode.labelData &&
|
!treeNode.imageData
|
) {
|
de.labelData = {
|
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
pixelOffset: new Cesium.Cartesian2(20, 0),
|
};
|
de.imageData = {
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
pixelOffset: new Cesium.Cartesian2(0, 0),
|
};
|
}
|
layer = sgworld.Creator.createLabelPointGeoJsonFeatureLayer(
|
treeNode.name,
|
treeNode.urls,
|
de,
|
"0",
|
treeNode.checked
|
);
|
} else if (treeNode.class === "polyline") {
|
de = {
|
id: treeNode.id,
|
layertype: "polylinelayer",
|
material: sgworld.Core.defaultValue(treeNode.color, "#ffffff"),
|
outlineColor: sgworld.Core.defaultValue(
|
treeNode.outlineColor,
|
"#ffffff"
|
),
|
outlineWidth: sgworld.Core.defaultValue(treeNode.outlineWidth, 0),
|
height: sgworld.Core.defaultValue(treeNode.height, undefined),
|
width: sgworld.Core.defaultValue(treeNode.width, 2),
|
clampToGround: sgworld.Core.defaultValue(
|
treeNode.clampToGround,
|
true
|
),
|
classificationType: treeNode.classificationType,
|
dash: sgworld.Core.defaultValue(treeNode.dash, false),
|
dashLength: sgworld.Core.defaultValue(treeNode.dashLength, 20),
|
gapColor: sgworld.Core.defaultValue(
|
treeNode.gapColor,
|
"rgba(0,0,0,0)"
|
),
|
near: sgworld.Core.defaultValue(treeNode.near, 0),
|
far: sgworld.Core.defaultValue(treeNode.far, Infinity),
|
};
|
|
layer = sgworld.Creator.createPolylineGeoJsonFeatureLayer(
|
treeNode.name,
|
treeNode.urls,
|
de,
|
"0",
|
treeNode.checked
|
);
|
} else if (treeNode.class === "polylineVolume") {
|
de = {
|
id: treeNode.id,
|
material: sgworld.Core.defaultValue(treeNode.color, "#ff0000"),
|
slttype: "0",
|
number: "4",
|
exradius: "1",
|
inradius: "1",
|
orth_width: "2",
|
orth_height: "2",
|
radius: sgworld.Core.defaultValue(treeNode.radius, 5),
|
cornerType: "0",
|
heightReference: "0",
|
height: sgworld.Core.defaultValue(treeNode.lineHeight, 0),
|
near: "0",
|
far: "99999999999",
|
radiusScale: treeNode.radiusScale,
|
connect: true,
|
};
|
layer = sgworld.Creator.createpolylineVolumeGeojsonPrimitiveLayer(
|
treeNode.name,
|
treeNode.urls,
|
de,
|
"0",
|
true,
|
function (data) {
|
if (treeNode.flow) {
|
let lines = data.entities.values;
|
lines.forEach((line) => {
|
line.polylineVolume.material =
|
sgworld.Core.getTrailLinkMaterial(
|
sgworld.Core.defaultValue(treeNode.color, "#ff0000"),
|
"../static/images/smoke.png",
|
9000
|
);
|
});
|
}
|
}
|
);
|
} else if (treeNode.class === "model") {
|
de = {
|
id: treeNode.id,
|
collect: 0,
|
uri: sgworld.Core.defaultValue(treeNode.model, ""),
|
file: "",
|
color: sgworld.Core.defaultValue(treeNode.color, "#ffffff"),
|
scale: sgworld.Core.defaultValue(treeNode.scale, 1),
|
heightReference: 0,
|
height: sgworld.Core.defaultValue(treeNode.height, 0),
|
near: "0",
|
far: "99999999999",
|
};
|
layer = sgworld.Creator.createModelPointGeoJsonFeatureLayer(
|
treeNode.name,
|
treeNode.urls,
|
de,
|
"0",
|
true
|
);
|
} else if (treeNode.class === "polygon") {
|
treeNode.disableDepthTestDistance === "Infinity" &&
|
(treeNode.disableDepthTestDistance = Number.POSITIVE_INFINITY);
|
|
de = {
|
id: treeNode.id,
|
material: sgworld.Core.defaultValue(treeNode.color, "#ff0000"),
|
height: sgworld.Core.defaultValue(treeNode.height, 0),
|
outlineColor: sgworld.Core.defaultValue(
|
treeNode.outlineColor,
|
"#ff0000"
|
),
|
extrudedHeight: sgworld.Core.defaultValue(
|
treeNode.extrudedHeight,
|
0
|
),
|
outlineWidth: sgworld.Core.defaultValue(treeNode.outlineWidth, 0),
|
outline: sgworld.Core.defaultValue(treeNode.outline, true),
|
clampToGround: sgworld.Core.defaultValue(
|
treeNode.clampToGround,
|
treeNode.extrudedHeight === undefined &&
|
treeNode.height === undefined
|
),
|
classificationType: treeNode.classificationType,
|
near: sgworld.Core.defaultValue(treeNode.near, 0),
|
far: sgworld.Core.defaultValue(treeNode.far, Infinity),
|
|
text: treeNode.text,
|
font: sgworld.Core.defaultValue(treeNode.font, "微软雅黑"),
|
labelNear: treeNode.labelNear,
|
labelFar: treeNode.labelFar,
|
fontSize: sgworld.Core.defaultValue(treeNode.size, "18px"),
|
italic: treeNode.italic,
|
bold: treeNode.bold,
|
pixelOffset: new Cesium.Cartesian2(
|
sgworld.Core.defaultValue(treeNode.offsetX, 0),
|
sgworld.Core.defaultValue(treeNode.offsetY, 0)
|
),
|
labelOutlineWidth: 2,
|
disableDepthTestDistance: treeNode.disableDepthTestDistance,
|
|
water: treeNode.water,
|
};
|
layer = sgworld.Creator.createPolygonGeoJsonFeatureLayer(
|
treeNode.name,
|
treeNode.urls,
|
de,
|
"0",
|
treeNode.checked
|
);
|
}
|
break;
|
case "pathLayer":
|
layer = sgworld.Creator.createPathLayer({
|
id: treeNode.id,
|
url: treeNode.url,
|
color: treeNode.color || "#0033FF", //线的颜色
|
width: treeNode.width || 4.0, //线的宽度
|
pointColor: treeNode.pointColor || "#FFFFFF", //移动点的颜色
|
speed: treeNode.speed || 5,
|
far: treeNode.far || 5000,
|
});
|
break;
|
case "vector": {
|
let urls = {
|
url: treeNode.urls,
|
layer: treeNode.layer,
|
srs: treeNode.srs,
|
};
|
if (
|
treeNode.class === "point" ||
|
treeNode.class === "label" ||
|
treeNode.class === "image"
|
) {
|
treeNode.disableDepthTestDistance === "Infinity" &&
|
(treeNode.disableDepthTestDistance = Number.POSITIVE_INFINITY);
|
if (treeNode.style) {
|
// de = getVectorStyleFromSG(treeNode, treeNode.style);
|
} else {
|
de = {
|
id: treeNode.id,
|
level_min: sgworld.Core.defaultValue(treeNode.minimumLevel, 10),
|
level_max: sgworld.Core.defaultValue(treeNode.maximumLevel, 22),
|
fillColor: sgworld.Core.defaultValue(treeNode.color, "#ffffff"),
|
color: sgworld.Core.defaultValue(
|
treeNode.imageColor,
|
undefined
|
),
|
outlineColor: sgworld.Core.defaultValue(
|
treeNode.outlineColor,
|
"#ffffff"
|
),
|
backgroundColor: sgworld.Core.defaultValue(
|
treeNode.backgroundColor,
|
"#ffffff"
|
),
|
heightReference: sgworld.Core.defaultValue(
|
treeNode.heightReference,
|
0
|
),
|
pointHeight: sgworld.Core.defaultValue(
|
treeNode.pointHeight,
|
undefined
|
),
|
near: sgworld.Core.defaultValue(treeNode.near, 0),
|
far: sgworld.Core.defaultValue(treeNode.far, 99999999999),
|
bold: treeNode.bold,
|
italic: treeNode.italic,
|
showBackground: treeNode.showBackground,
|
outlineWidth: sgworld.Core.defaultValue(
|
treeNode.outlineWidth,
|
1
|
),
|
text: treeNode.text,
|
image: treeNode.image,
|
font_size: treeNode.size,
|
font_family: sgworld.Core.defaultValue(
|
treeNode.font_family,
|
"微软雅黑"
|
),
|
disableDepthTestDistance: sgworld.Core.defaultValue(
|
treeNode.disableDepthTestDistance,
|
undefined
|
),
|
labelData: treeNode.labelData,
|
imageData: treeNode.imageData,
|
};
|
}
|
|
if (
|
treeNode.text &&
|
treeNode.image &&
|
!treeNode.labelData &&
|
!treeNode.imageData
|
) {
|
de.labelData = {
|
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
pixelOffset: new Cesium.Cartesian2(20, 0),
|
};
|
de.imageData = {
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
pixelOffset: new Cesium.Cartesian2(0, 0),
|
};
|
}
|
urls.upperLevelLimit = de.level_max;
|
urls.lowerLevelLimit = de.level_min;
|
layer = sgworld.Creator.createLabelImageGeoJsonFeatureLayerProvider(
|
treeNode.name,
|
urls,
|
de,
|
"0",
|
treeNode.checked,
|
function () {}
|
);
|
} else if (treeNode.class === "polylineVolume") {
|
de = {
|
id: treeNode.id,
|
level_min: sgworld.Core.defaultValue(treeNode.minimumLevel, 10),
|
level_max: sgworld.Core.defaultValue(treeNode.maximumLevel, 22),
|
material: sgworld.Core.defaultValue(treeNode.color, "#ff0000"),
|
slttype: "0",
|
number: "4",
|
exradius: "1",
|
inradius: "1",
|
orth_width: "2",
|
orth_height: "2",
|
radius: sgworld.Core.defaultValue(treeNode.radius, 0.5),
|
cornerType: "0",
|
heightReference: "0",
|
height: sgworld.Core.defaultValue(treeNode.height, 0),
|
near: sgworld.Core.defaultValue(treeNode.near, 0),
|
far: sgworld.Core.defaultValue(treeNode.far, 99999999999),
|
radiusScale: treeNode.radiusScale,
|
};
|
urls.upperLevelLimit = de.level_max;
|
urls.lowerLevelLimit = de.level_min;
|
layer = sgworld.Creator.createVolumeGeoJsonFeatureLayerProvider(
|
treeNode.name,
|
urls,
|
de,
|
"0",
|
treeNode.checked,
|
function () {}
|
);
|
} else if (treeNode.class === "polyline") {
|
de = {
|
id: treeNode.id,
|
layertype: "polylinelayer",
|
level_min: sgworld.Core.defaultValue(treeNode.minimumLevel, 10),
|
level_max: sgworld.Core.defaultValue(treeNode.maximumLevel, 22),
|
material: sgworld.Core.defaultValue(treeNode.color, "#ffffff"),
|
outlineColor: sgworld.Core.defaultValue(
|
treeNode.outlineColor,
|
"#ffffff"
|
),
|
outlineWidth: sgworld.Core.defaultValue(treeNode.outlineWidth, 0),
|
height: sgworld.Core.defaultValue(treeNode.height, undefined),
|
width: sgworld.Core.defaultValue(treeNode.width, 2),
|
clampToGround: sgworld.Core.defaultValue(
|
treeNode.clampToGround,
|
true
|
),
|
classificationType: treeNode.classificationType,
|
dash: sgworld.Core.defaultValue(treeNode.dash, false),
|
dashLength: sgworld.Core.defaultValue(treeNode.dashLength, 20),
|
gapColor: sgworld.Core.defaultValue(
|
treeNode.gapColor,
|
"rgba(0,0,0,0)"
|
),
|
near: sgworld.Core.defaultValue(treeNode.near, 0),
|
far: sgworld.Core.defaultValue(treeNode.far, Infinity),
|
};
|
urls.upperLevelLimit = de.level_max;
|
urls.lowerLevelLimit = de.level_min;
|
|
layer =
|
sgworld.Creator.createPrimitivePolylineVectorGeoJsonFeatureLayerProvider(
|
treeNode.name,
|
urls,
|
de,
|
"0",
|
treeNode.checked,
|
function () {}
|
);
|
} else if (treeNode.class === "polygon") {
|
de = {
|
id: treeNode.id,
|
layertype: "polygonlayer",
|
level_min: sgworld.Core.defaultValue(treeNode.minimumLevel, 10),
|
level_max: sgworld.Core.defaultValue(treeNode.maximumLevel, 22),
|
material: sgworld.Core.defaultValue(treeNode.color, "#ff0000"),
|
heightReference: "1",
|
height: sgworld.Core.defaultValue(treeNode.height, 0),
|
extrudedHeight: sgworld.Core.defaultValue(
|
treeNode.extrudedHeight,
|
0
|
),
|
extrudedHeightReference: "1",
|
clampToGround: sgworld.Core.defaultValue(
|
treeNode.clampToGround,
|
false
|
),
|
classificationType: treeNode.classificationType,
|
near: sgworld.Core.defaultValue(treeNode.near, 0),
|
far: sgworld.Core.defaultValue(treeNode.far, Infinity),
|
};
|
urls.upperLevelLimit = de.level_max;
|
urls.lowerLevelLimit = de.level_min;
|
layer =
|
sgworld.Creator.createGeoJsonFeatureLayerProviderOptimization(
|
treeNode.name,
|
urls,
|
de,
|
"0",
|
treeNode.checked,
|
function () {}
|
);
|
} else if (treeNode.class === "model") {
|
de = {
|
id: treeNode.id,
|
level_min: sgworld.Core.defaultValue(treeNode.minimumLevel, 10),
|
level_max: sgworld.Core.defaultValue(treeNode.maximumLevel, 22),
|
collect: 0,
|
uri: sgworld.Core.defaultValue(treeNode.model, ""),
|
file: "",
|
color: sgworld.Core.defaultValue(treeNode.color, "#ffffff"),
|
scale: sgworld.Core.defaultValue(treeNode.scale, 1),
|
heightReference: 0,
|
height: sgworld.Core.defaultValue(treeNode.height, 0),
|
near: "0",
|
far: "99999999999",
|
};
|
//模型点
|
urls.upperLevelLimit = de.level_max;
|
urls.lowerLevelLimit = de.level_min;
|
layer = sgworld.Creator.createModelGeoJsonFeatureLayerProvider(
|
treeNode.name,
|
urls,
|
de,
|
"0",
|
treeNode.checked,
|
function () {}
|
);
|
}
|
layer && (treeNode.id = layer.treeobj.id);
|
break;
|
}
|
case "terrain":
|
layer = sgworld.Creator.createTerrain(
|
treeNode.name,
|
{
|
id: treeNode.id,
|
requestVertexNormals: true,
|
url: treeNode.urls,
|
},
|
"0",
|
true,
|
""
|
);
|
break;
|
case "sgsterrain":
|
layer = sgworld.Creator.sfsterrainprovider(
|
treeNode.name,
|
{
|
id: treeNode.id,
|
layerName: treeNode.layer,
|
requestVertexNormals: true,
|
url: treeNode.urls || "",
|
token: treeNode.token,
|
cacheUrl: treeNode.cacheUrl,
|
cacheLevel: treeNode.cacheLevel,
|
},
|
"0",
|
true,
|
""
|
);
|
break;
|
case "sgsterrain7.1":
|
layer = sgworld.Creator.sfsterrainprovider71(
|
treeNode.name,
|
{
|
id: treeNode.id,
|
layerName: treeNode.layer,
|
requestVertexNormals: true,
|
url: treeNode.urls,
|
token: treeNode.token,
|
cacheUrl: treeNode.cacheUrl,
|
cacheLevel: treeNode.cacheLevel,
|
},
|
"0",
|
true,
|
""
|
);
|
break;
|
case "arcgisterrain":
|
layer = sgworld.Creator.createArcGISTerrain(
|
treeNode.name,
|
{
|
id: treeNode.id,
|
requestVertexNormals: true,
|
url: treeNode.urls,
|
},
|
"0",
|
true,
|
""
|
);
|
break;
|
case "CesiumGlobeTerrain":
|
layer = sgworld.Creator.createCesiumTerrain(
|
treeNode.name,
|
{
|
id: treeNode.id,
|
requestVertexNormals: true,
|
},
|
"0",
|
true,
|
""
|
);
|
break;
|
case "b3dm":
|
layer = sgworld.Creator.create3DTilesets(
|
treeNode.name,
|
treeNode.urls,
|
{
|
id: treeNode.id,
|
Level: treeNode.Level,
|
maximumScreenSpaceError:
|
treeNode.maximumScreenSpaceError &&
|
parseInt(treeNode.maximumScreenSpaceError),
|
maximumMemoryUsage:
|
treeNode.maximumMemoryUsage &&
|
parseInt(treeNode.maximumMemoryUsage),
|
geometricError:
|
treeNode.geometricError && parseInt(treeNode.geometricError),
|
},
|
{
|
groundCenter: treeNode.Center,
|
groundheight: 1,
|
heading: treeNode.heading,
|
pitch: treeNode.pitch,
|
roll: treeNode.roll,
|
effects: treeNode.effects || false,
|
effectsMaxHeight: treeNode.effectsMaxHeight || 150,
|
colors: treeNode.alpha
|
? "rgba(255,255,255," + treeNode.alpha + ")"
|
: treeNode.color || undefined,
|
},
|
"0",
|
true
|
);
|
break;
|
case "s3m":
|
layer = sgworld.Creator.createS3MLayer(
|
treeNode.urls,
|
sgworld._Viewer.scene,
|
function () {}
|
);
|
break;
|
case "gltf":
|
var position = [treeNode.lon, treeNode.lat, treeNode.height];
|
layer = sgworld.Creator.createModel(
|
position,
|
treeNode.urls,
|
{
|
id: treeNode.id,
|
scale: treeNode.scale || 1,
|
heading: treeNode.heading,
|
pitch: treeNode.pitch,
|
roll: treeNode.roll,
|
},
|
"0",
|
treeNode.name,
|
""
|
);
|
break;
|
case "SimpleGraphic":
|
treeNode.type = treeNode.class;
|
layer = sgworld.Creator.SimpleGraphic.addFeature(treeNode);
|
break;
|
case "videoPolygon":
|
layer = sgworld.Creator.addVideoPolygon(treeNode.positions, {
|
url: treeNode.url,
|
angle: treeNode.angle,
|
});
|
break;
|
case "MilitaryPlotting":
|
if (!treeNode.feature.id) {
|
treeNode.feature.id = treeNode.id;
|
}
|
if (!treeNode.feature.name) {
|
treeNode.feature.name = treeNode.name;
|
}
|
layer = sgworld.Creator.MilitaryPlotting.addFeature(treeNode.feature);
|
break;
|
case "ParticleEffect":
|
layer = sgworld.Analysis.createParticleEffect(
|
treeNode.name,
|
treeNode.position,
|
{
|
translation: Cesium.Cartesian3.fromElements(0, 0, 0), //平移
|
}
|
);
|
layer.name = treeNode.name;
|
break;
|
case "FlowField":
|
layer = sgworld.Creator.createTrailLine(
|
treeNode.positions,
|
treeNode.style
|
);
|
layer.boundingSphere = Cesium.BoundingSphere.fromPoints(
|
treeNode.positions
|
);
|
|
break;
|
case "MobileWall":
|
layer = sgworld.Creator.createTrailLineWall(
|
treeNode.LineInterpolation.positions,
|
treeNode.style
|
);
|
layer.boundingSphere = Cesium.BoundingSphere.fromPoints(
|
treeNode.LineInterpolation.positions
|
);
|
break;
|
case "link":
|
layer = sgworld.Creator.createLinkPro(
|
sgworld.Core.toDegrees(treeNode.posisitons[0]),
|
sgworld.Core.toDegrees(treeNode.posisitons[1]),
|
{
|
clampToGround: true,
|
}
|
);
|
break;
|
case "DiffusionSource":
|
layer = sgworld.Analysis.createMultiCircleScan(
|
treeNode.position,
|
treeNode.maxRadius,
|
treeNode.maxRadius.color,
|
3000,
|
true
|
);
|
break;
|
case "RiskDiffusion":
|
case "CircularDiffusion":
|
layer = sgworld.Analysis.createCircleScan(
|
treeNode.position,
|
treeNode.maxRadius,
|
treeNode.color,
|
3000,
|
true
|
);
|
break;
|
case "FanDiffusion":
|
layer = sgworld.Analysis.createSectorScan(
|
treeNode.position,
|
treeNode.distance,
|
"#ff0000",
|
60,
|
treeNode.angle,
|
true,
|
4000,
|
true
|
);
|
break;
|
case "RadarMask":
|
layer = sgworld.Creator.createRectangularSensor(
|
treeNode.position,
|
treeNode.cylinder
|
);
|
break;
|
case "DynamicSatellite":
|
let dtwxzsData = sgworld.Creator.createConeRadar(treeNode.position, {
|
color: "#7b9ef7",
|
radius: 200000,
|
});
|
let weixin = sgworld.Creator.createModel(
|
treeNode.position,
|
window.SmartEarthRootUrl + "Workers/Model/weixin.gltf",
|
{ scale: 15 },
|
"0",
|
"卫星"
|
);
|
layer = { dtwxzsData, weixin };
|
layer.sourceType = "DynamicSatellite";
|
break;
|
case "excavate":
|
var position = [treeNode.lon, treeNode.lat, treeNode.height];
|
layer = sgworld.Creator.createModel(
|
position,
|
treeNode.urls,
|
{
|
id: treeNode.id,
|
scale: treeNode.scale || 1,
|
},
|
pID,
|
treeNode.name,
|
""
|
);
|
treeNode.id = layer.treeobj.id;
|
break;
|
}
|
if (treeNode.sourceType !== "gltf" && (treeNode.lon || treeNode.lat)) {
|
treeNode.flyTo = [
|
treeNode.lon,
|
treeNode.lat,
|
sgworld.Core.defaultValue(treeNode.height, 10000),
|
];
|
}
|
if (treeNode.minx && treeNode.miny && treeNode.maxx && treeNode.maxy) {
|
treeNode.flyTo = [
|
treeNode.minx,
|
treeNode.miny,
|
treeNode.maxx,
|
treeNode.maxy,
|
];
|
}
|
if (treeNode.sourceType === "wfs") {
|
addTreeData(treeNode, layer);
|
}
|
if (treeNode.baseLayer) {
|
layer.item.baseLayer = true;
|
}
|
},
|
initLdgCluster(treeNode) {
|
if (treeNode.checked == false) {
|
window.mapapi.removeLayer(window.ldgclusterLayer);
|
window.mapapi.removeLayer(window.tldgclusterLayer);
|
return;
|
}
|
const loading = this.$loading({
|
lock: true,
|
text: "Loading",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
|
// 加载 GeoJSON 数据
|
var vectorSource = new ol.source.Vector({
|
format: new ol.format.GeoJSON(),
|
url:
|
treeNode.urls +
|
"?version=1.3.0&request=GetFeature&format=json&typename=" +
|
treeNode.layer,
|
});
|
|
// 创建聚合层
|
var clusterSource = new ol.source.Cluster({
|
distance: 40,
|
source: vectorSource,
|
});
|
|
// 创建聚合显示样式
|
var styleCache = {};
|
if (treeNode.name == "路灯杆 ") {
|
window.ldgclusterLayer = new ol.layer.Vector({
|
source: clusterSource,
|
style: function (feature) {
|
var size = feature.get("features").length;
|
if (size == 1) {
|
return new ol.style.Style({
|
image: new ol.style.Icon({
|
anchor: [0.5, 1],
|
src: treeNode.image,
|
}),
|
});
|
}
|
if (size > 1000) {
|
var style = styleCache[size];
|
if (!style) {
|
style = new ol.style.Style({
|
image: new ol.style.Icon({
|
scale: 0.4,
|
src: require("@/assets/img/right/test01.png"),
|
}),
|
text: new ol.style.Text({
|
text: size.toString(),
|
fill: new ol.style.Fill({
|
color: "#fff",
|
}),
|
}),
|
});
|
styleCache[size] = style;
|
}
|
return style;
|
}
|
var style = styleCache[size];
|
if (!style) {
|
style = new ol.style.Style({
|
image: new ol.style.Icon({
|
// anchor: [0.5, 1],
|
scale: 0.3,
|
src: require("@/assets/img/right/jh.png"),
|
}),
|
text: new ol.style.Text({
|
text: size.toString(),
|
fill: new ol.style.Fill({
|
color: "#fff",
|
}),
|
}),
|
});
|
styleCache[size] = style;
|
}
|
return style;
|
},
|
});
|
|
window.mapapi.addLayer(window.ldgclusterLayer);
|
} else if (treeNode.name == "路名牌杆 ") {
|
window.tldgclusterLayer = new ol.layer.Vector({
|
source: clusterSource,
|
style: function (feature) {
|
var size = feature.get("features").length;
|
if (size == 1) {
|
return new ol.style.Style({
|
image: new ol.style.Icon({
|
anchor: [0.5, 1],
|
src: treeNode.image,
|
}),
|
});
|
}
|
if (size > 1000) {
|
var style = styleCache[size];
|
if (!style) {
|
style = new ol.style.Style({
|
image: new ol.style.Icon({
|
scale: 0.4,
|
src: require("@/assets/img/right/test01.png"),
|
}),
|
text: new ol.style.Text({
|
text: size.toString(),
|
fill: new ol.style.Fill({
|
color: "#fff",
|
}),
|
}),
|
});
|
styleCache[size] = style;
|
}
|
return style;
|
}
|
var style = styleCache[size];
|
if (!style) {
|
style = new ol.style.Style({
|
image: new ol.style.Icon({
|
// anchor: [0.5, 1],
|
scale: 0.3,
|
src: require("@/assets/img/right/jh.png"),
|
}),
|
text: new ol.style.Text({
|
text: size.toString(),
|
fill: new ol.style.Fill({
|
color: "#fff",
|
}),
|
}),
|
});
|
styleCache[size] = style;
|
}
|
return style;
|
},
|
});
|
|
window.mapapi.addLayer(window.tldgclusterLayer);
|
}
|
|
// 将聚合层加入地图
|
window.mapapi.removeLayer(window.jkspclusterLayer);
|
window.mapapi.removeLayer(window.qiyeclusterLayer);
|
loading.close();
|
},
|
initCluster(treeNode) {
|
if (treeNode.checked == false) {
|
window.mapapi.removeLayer(window.jkspclusterLayer);
|
return;
|
}
|
const loading = this.$loading({
|
lock: true,
|
text: "Loading",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
// 加载 GeoJSON 数据
|
var vectorSource = new ol.source.Vector({
|
format: new ol.format.GeoJSON(),
|
url:
|
treeNode.urls +
|
"?version=1.3.0&request=GetFeature&format=json&typename=" +
|
treeNode.layer,
|
});
|
|
// 创建聚合层
|
var clusterSource = new ol.source.Cluster({
|
distance: 40,
|
source: vectorSource,
|
});
|
|
// 创建聚合显示样式
|
var styleCache = {};
|
window.jkspclusterLayer = new ol.layer.Vector({
|
source: clusterSource,
|
style: function (feature) {
|
var size = feature.get("features").length;
|
if (size == 1) {
|
return new ol.style.Style({
|
image: new ol.style.Icon({
|
anchor: [0.5, 1],
|
src: "./static/SmartEarthSDK/Workers/image/xzspj/spjk.png",
|
}),
|
});
|
}
|
if (size > 1000) {
|
var style = styleCache[size];
|
if (!style) {
|
style = new ol.style.Style({
|
image: new ol.style.Icon({
|
// anchor: [0.5, 1],
|
scale: 0.4,
|
src: require("@/assets/img/right/test01.png"),
|
}),
|
text: new ol.style.Text({
|
text: size.toString(),
|
fill: new ol.style.Fill({
|
color: "#fff",
|
}),
|
}),
|
});
|
styleCache[size] = style;
|
}
|
return style;
|
}
|
var style = styleCache[size];
|
if (!style) {
|
style = new ol.style.Style({
|
image: new ol.style.Icon({
|
// anchor: [0.5, 1],
|
scale: 0.3,
|
src: require("@/assets/img/right/jh.png"),
|
}),
|
text: new ol.style.Text({
|
text: size.toString(),
|
fill: new ol.style.Fill({
|
color: "#fff",
|
}),
|
}),
|
});
|
styleCache[size] = style;
|
}
|
return style;
|
},
|
});
|
|
// 将聚合层加入地图
|
window.mapapi.removeLayer(window.ldgclusterLayer);
|
window.mapapi.removeLayer(window.tldgclusterLayer);
|
window.mapapi.removeLayer(window.qiyeclusterLayer);
|
window.mapapi.addLayer(window.jkspclusterLayer);
|
loading.close();
|
// new Cesium.GeoJsonDataSource.load(
|
// treeNode.urls +
|
// "?version=1.3.0&request=GetFeature&format=json&typename=" +
|
// treeNode.layer
|
// )
|
// .then((dataSource) => {
|
// Viewer.dataSources.add(dataSource);
|
// clusterItemList.push({ name: treeNode.id, dataSource: dataSource });
|
// // window.clusterItem = dataSource;
|
// // 设置聚合参数
|
// dataSource.clustering.enabled = true;
|
// window.dataClustering = dataSource.clustering;
|
// dataSource.clustering.pixelRange = 10;
|
// dataSource.clustering.minimumClusterSize = 10;
|
|
// // foreach用于调用数组的每个元素，并将元素传递给回调函数。
|
// dataSource.entities.values.forEach((entity) => {
|
// if (entity.featureType == "yz井数据") {
|
// switch (feature.properties["井类型"]) {
|
// default:
|
// imgUrl = treeNode.image;
|
// break;
|
// }
|
// }
|
// // 将点拉伸一定高度，防止被地形压盖
|
// entity.position._value.z += 10.0;
|
// // 使用大小为64*64的icon，缩小展示poi
|
// entity.billboard = {
|
// image: entity.featureType == "yz井数据" ? imgUrl : treeNode.image,
|
// scale: treeNode.imageScale,
|
// width: 30,
|
// height: 30,
|
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
|
// 0,
|
// 5000.0
|
// ),
|
// disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
// };
|
// entity.tag = treeNode.id;
|
// // entity.label = {
|
// // // text: "POI",
|
// // font: "bold 15px Microsoft YaHei",
|
// // // 竖直对齐方式
|
// // verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
// // // 水平对齐方式
|
// // horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
// // // 偏移量
|
// // pixelOffset: new Cesium.Cartesian2(15, 0),
|
// // };
|
// });
|
|
// // 添加监听函数
|
// dataSource.clustering.clusterEvent.addEventListener(function (
|
// clusteredEntities,
|
// cluster
|
// ) {
|
// // 关闭自带的显示聚合数量的标签
|
|
// cluster.label.show = true;
|
// cluster.label.font = "bold 20px Microsoft YaHei";
|
|
// cluster.label.color = Cesium.Color.WHITE;
|
// cluster.label.outlineColor = Cesium.Color.BLACK;
|
// cluster.label.outlineWidth = 3.0;
|
// cluster.label.style = Cesium.LabelStyle.FILL_AND_OUTLINE;
|
// cluster.label.eyeOffset = new Cesium.Cartesian3(0, 0, -100);
|
// cluster.label.disableDepthTestDistance = Number.POSITIVE_INFINITY;
|
// cluster.billboard.disableDepthTestDistance =
|
// Number.POSITIVE_INFINITY;
|
// cluster.billboard.show = true;
|
// cluster.billboard.id = cluster.label.id;
|
// cluster.billboard.horizontalOrigin = Cesium.HorizontalOrigin.LEFT;
|
// cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.CENTER;
|
// var reg1 = new RegExp(",", "g");
|
// cluster.label.text = cluster.label.text.replace(reg1, "");
|
// // 根据聚合数量的多少设置不同层级的图片以及大小
|
// if (clusteredEntities.length >= 10000) {
|
// // cluster.billboard.image = require("@/assets/img/right/test01.png");
|
// cluster.billboard.image = require("@/assets/img/right/jh.png");
|
// cluster.billboard.pixelOffset = new Cesium.Cartesian2(-20, -8);
|
// cluster.billboard.width = 95;
|
// cluster.billboard.height = 95;
|
// } else if (clusteredEntities.length >= 1000) {
|
// // cluster.billboard.image = require("@/assets/img/right/jh.png");
|
// cluster.billboard.image = require("@/assets/img/right/test01.png");
|
// cluster.billboard.pixelOffset = new Cesium.Cartesian2(-18, -10);
|
// // that.combineIconAndLabel(
|
// // require("@/assets/img/right/jh.png"),
|
// // clusteredEntities.length,
|
// // 192,
|
// // "test01"
|
// // );
|
// cluster.billboard.width = 80;
|
// cluster.billboard.height = 80;
|
// } else if (clusteredEntities.length >= 100) {
|
// cluster.billboard.image = require("@/assets/img/right/jh.png");
|
// // cluster.billboard.image = require("@/assets/img/right/test01.png");
|
// cluster.billboard.pixelOffset = new Cesium.Cartesian2(-13, -8);
|
// // that.combineIconAndLabel(
|
// // require("@/assets/img/right/test01.png"),
|
// // clusteredEntities.length,
|
// // 192,
|
// // "test01"
|
// // );
|
// cluster.billboard.width = 60;
|
// cluster.billboard.height = 60;
|
// }
|
// // else if (clusteredEntities.length >= 40) {
|
// // cluster.billboard.image = require("@/assets/img/right/test02.png");
|
// // cluster.billboard.pixelOffset = new Cesium.Cartesian2(-0, 0);
|
// // // that.combineIconAndLabel(
|
// // // require("@/assets/img/right/test02.png"),
|
// // // clusteredEntities.length,
|
// // // 192,
|
// // // "test02"
|
// // // );
|
// // cluster.billboard.width = 92;
|
// // cluster.billboard.height = 92;
|
// // }
|
// // else if (clusteredEntities.length >= 20) {
|
// // cluster.billboard.image = require("@/assets/img/right/test03.png");
|
// // cluster.billboard.pixelOffset = new Cesium.Cartesian2(-15, 0);
|
// // // that.combineIconAndLabel(
|
// // // require("@/assets/img/right/test03.png"),
|
// // // clusteredEntities.length,
|
// // // 192,
|
// // // "test03"
|
// // // );
|
// // cluster.billboard.width = 82;
|
// // cluster.billboard.height = 82;
|
// // }
|
// else if (clusteredEntities.length >= 10) {
|
// cluster.billboard.image = require("@/assets/img/right/jh.png");
|
// // cluster.billboard.image = require("@/assets/img/right/test04.png");
|
// cluster.billboard.pixelOffset = new Cesium.Cartesian2(-15, -8);
|
// cluster.billboard.width = 50;
|
// cluster.billboard.height = 50;
|
// } else {
|
// // cluster.billboard.image = require("@/assets/img/right/test04.png");
|
// cluster.billboard.image = require("@/assets/img/right/jh.png");
|
// cluster.billboard.pixelOffset = new Cesium.Cartesian2(-25, -10);
|
// cluster.billboard.width = 40;
|
// cluster.billboard.height = 40;
|
// }
|
// });
|
// loading.close();
|
// })
|
// .catch((err) => {
|
// this.$message({
|
// showClose: true,
|
// message: "数据请求失败",
|
// type: "error",
|
// offset: 80,
|
// });
|
// loading.close();
|
// });
|
},
|
testSDKcluster() {
|
let clusterLayer1 = new SmartEarth.ClusterLayer(Viewer, {
|
style: "clustering",
|
});
|
axios
|
.get(
|
window.gisBaseUrl +
|
"/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=企业链企业"
|
)
|
.then((res) => {
|
let positions = generatePosition(20000);
|
positions.forEach((item) => {
|
clusterLayer1.add(item, {
|
image: "./static/SmartEarthSDK/Workers/image/xzspj/qiye.png",
|
});
|
});
|
// res.data.features.forEach((item) => {
|
// clusterLayer1.add(
|
// new SmartEarth.Degrees(
|
// item.geometry.coordinates[0],
|
// item.geometry.coordinates[1]
|
// ),
|
// {
|
// name: `QY&${item.properties.ID}&${item.properties["QYMC"]}&${item.properties["DZ"]}&${item.properties["BZDZ"]}&${item.properties["XYDM"]}&${item.geometry.coordinates[0]}&${item.geometry.coordinates[1]}`,
|
// image: SmartEarthRootUrl + "Workers/image/mark.png",
|
// }
|
// );
|
// });
|
});
|
},
|
qiyeCluster(treeNode) {
|
if (treeNode.checked == false) {
|
window.mapapi.removeLayer(window.qiyeclusterLayer);
|
return;
|
}
|
const loading = this.$loading({
|
lock: true,
|
text: "Loading",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
// 加载 GeoJSON 数据
|
var vectorSource = new ol.source.Vector({
|
format: new ol.format.GeoJSON(),
|
url:
|
treeNode.urls +
|
"?version=1.3.0&request=GetFeature&format=json&typename=" +
|
treeNode.layer,
|
});
|
|
console.log(vectorSource,'11111')
|
|
// 创建聚合层
|
var clusterSource = new ol.source.Cluster({
|
distance: 40,
|
source: vectorSource,
|
});
|
|
// 创建聚合显示样式
|
var styleCache = {};
|
window.qiyeclusterLayer = new ol.layer.Vector({
|
source: clusterSource,
|
style: function (feature) {
|
var size = feature.get("features").length;
|
if (size == 1) {
|
return new ol.style.Style({
|
image: new ol.style.Icon({
|
anchor: [0.5, 1],
|
src: treeNode.image,
|
}),
|
});
|
}
|
if (size > 1000) {
|
var style = styleCache[size];
|
if (!style) {
|
style = new ol.style.Style({
|
image: new ol.style.Icon({
|
// anchor: [0.5, 1],
|
scale: 0.4,
|
src: require("@/assets/img/right/test01.png"),
|
}),
|
text: new ol.style.Text({
|
text: size.toString(),
|
fill: new ol.style.Fill({
|
color: "#fff",
|
}),
|
}),
|
});
|
styleCache[size] = style;
|
}
|
return style;
|
}
|
var style = styleCache[size];
|
if (!style) {
|
style = new ol.style.Style({
|
image: new ol.style.Icon({
|
// anchor: [0.5, 1],
|
scale: 0.3,
|
src: require("@/assets/img/right/jh.png"),
|
}),
|
text: new ol.style.Text({
|
text: size.toString(),
|
fill: new ol.style.Fill({
|
color: "#fff",
|
}),
|
}),
|
});
|
styleCache[size] = style;
|
}
|
return style;
|
// var style = styleCache[size];
|
// if (!style) {
|
// style = new Style({
|
// image: new Circle({
|
// radius: 20,
|
// stroke: new Stroke({
|
// color: "#fff",
|
// }),
|
// fill: new Fill({
|
// color: "#3399CC",
|
// }),
|
// }),
|
// text: new Text({
|
// text: size.toString(),
|
// fill: new Fill({
|
// color: "#fff",
|
// }),
|
// }),
|
// });
|
// styleCache[size] = style;
|
// }
|
// return style;
|
},
|
});
|
|
// 将聚合层加入地图
|
window.mapapi.removeLayer(window.ldgclusterLayer);
|
window.mapapi.removeLayer(window.tldgclusterLayer);
|
window.mapapi.removeLayer(window.jkspclusterLayer);
|
window.mapapi.addLayer(window.qiyeclusterLayer);
|
loading.close();
|
|
// let dataSource;
|
// if (treeNode.layer == "企业链企业") {
|
// // console.log(store.qiyeJsonInfo);
|
// dataSource = store.qiyeJsonInfo;
|
// }
|
// Viewer.dataSources.add(dataSource);
|
// clusterItemList.push({ name: treeNode.id, dataSource: dataSource });
|
// // window.clusterItem = dataSource;
|
// // 设置聚合参数
|
// dataSource.clustering.enabled = true;
|
// window.dataClustering = dataSource.clustering;
|
// dataSource.clustering.pixelRange = 10;
|
// dataSource.clustering.minimumClusterSize = 10;
|
// // foreach用于调用数组的每个元素，并将元素传递给回调函数。
|
// dataSource.entities.values.forEach((entity) => {
|
// if (entity.featureType == "yz井数据") {
|
// switch (feature.properties["井类型"]) {
|
// default:
|
// imgUrl = treeNode.image;
|
// break;
|
// }
|
// }
|
// // 将点拉伸一定高度，防止被地形压盖
|
// entity.position._value.z += 10.0;
|
// // 使用大小为64*64的icon，缩小展示poi
|
// entity.billboard = {
|
// image: entity.featureType == "yz井数据" ? imgUrl : treeNode.image,
|
// scale: treeNode.imageScale,
|
// width: 30,
|
// height: 30,
|
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
|
// 0,
|
// 5000.0
|
// ),
|
// disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
// };
|
// entity.tag = treeNode.id;
|
// });
|
// // 添加监听函数
|
// dataSource.clustering.clusterEvent.addEventListener(function (
|
// clusteredEntities,
|
// cluster
|
// ) {
|
// // 关闭自带的显示聚合数量的标签
|
|
// var reg1 = new RegExp(",", "g");
|
// cluster.label.text = cluster.label.text.replace(reg1, "");
|
// cluster.label.show = true;
|
// cluster.label.font = "bold 20px Microsoft YaHei";
|
// cluster.label.color = Cesium.Color.WHITE;
|
// cluster.label.outlineColor = Cesium.Color.BLACK;
|
// cluster.label.outlineWidth = 3.0;
|
// cluster.label.style = Cesium.LabelStyle.FILL_AND_OUTLINE;
|
// cluster.label.eyeOffset = new Cesium.Cartesian3(0, 0, -100);
|
// cluster.label.disableDepthTestDistance = Number.POSITIVE_INFINITY;
|
// // cluster.label.showBackground = false;
|
// // cluster.label.backgroundColor = new Cesium.Color.fromCssColorString(
|
// // "#30afff"
|
// // );
|
// // cluster.label.style = Cesium.LabelStyle.FILL;
|
// // cluster.label.backgroundPadding = new Cesium.Cartesian2(5, 5); //设置背景内边距
|
// cluster.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY;
|
// cluster.billboard.show = true;
|
// cluster.billboard.id = cluster.label.id;
|
// cluster.billboard.horizontalOrigin = Cesium.HorizontalOrigin.LEFT;
|
// cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.CENTER;
|
// // 根据聚合数量的多少设置不同层级的图片以及大小
|
// if (clusteredEntities.length >= 10000) {
|
// cluster.billboard.image = require("@/assets/img/right/jh.png");
|
// cluster.billboard.pixelOffset = new Cesium.Cartesian2(-20, -8);
|
// cluster.billboard.width = 95;
|
// cluster.billboard.height = 95;
|
// } else if (clusteredEntities.length >= 1000) {
|
// cluster.billboard.image = require("@/assets/img/right/jh.png");
|
// cluster.billboard.pixelOffset = new Cesium.Cartesian2(-18, -10);
|
// cluster.billboard.width = 80;
|
// cluster.billboard.height = 80;
|
// } else if (clusteredEntities.length >= 100) {
|
// cluster.billboard.image = require("@/assets/img/right/jh.png");
|
// cluster.billboard.pixelOffset = new Cesium.Cartesian2(-13, -8);
|
// cluster.billboard.width = 60;
|
// cluster.billboard.height = 60;
|
// } else if (clusteredEntities.length >= 10) {
|
// cluster.billboard.image = require("@/assets/img/right/jh.png");
|
// cluster.billboard.pixelOffset = new Cesium.Cartesian2(-15, -8);
|
// cluster.billboard.width = 50;
|
// cluster.billboard.height = 50;
|
// } else {
|
// cluster.billboard.image = require("@/assets/img/right/jh.png");
|
// cluster.billboard.pixelOffset = new Cesium.Cartesian2(-25, -10);
|
// cluster.billboard.width = 40;
|
// cluster.billboard.height = 40;
|
// }
|
// });
|
},
|
// initCluster(treeNode) {
|
// let that = this;
|
// let imgUrl;
|
// new Cesium.GeoJsonDataSource.load(
|
// treeNode.urls +
|
// "?version=1.3.0&request=GetFeature&format=json&typename=" +
|
// treeNode.layer
|
// ).then((dataSource) => {
|
// Viewer.dataSources.add(dataSource);
|
// clusterItemList.push({ name: treeNode.id, dataSource: dataSource });
|
|
// // window.clusterItem = dataSource;
|
|
// // 设置聚合参数
|
// dataSource.clustering.enabled = true;
|
// window.dataClustering = dataSource.clustering;
|
// dataSource.clustering.pixelRange = 20;
|
// dataSource.clustering.minimumClusterSize = 20;
|
|
// // foreach用于调用数组的每个元素，并将元素传递给回调函数。
|
// dataSource.entities.values.forEach((entity) => {
|
// if (entity.featureType == "yz井数据") {
|
// switch (feature.properties["井类型"]) {
|
// default:
|
// imgUrl = treeNode.image;
|
// break;
|
// }
|
// }
|
// // 将点拉伸一定高度，防止被地形压盖
|
// entity.position._value.z += 50.0;
|
// // 使用大小为64*64的icon，缩小展示poi
|
// entity.billboard = {
|
// image: entity.featureType == "yz井数据" ? imgUrl : treeNode.image,
|
|
// scale: treeNode.imageScale,
|
// // width: 50,
|
// // height: 50,
|
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
|
// 0,
|
// 5000.0
|
// ),
|
// disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
// };
|
// entity.tag = treeNode.id;
|
// // entity.label = {
|
// // // text: "POI",
|
// // font: "bold 15px Microsoft YaHei",
|
// // // 竖直对齐方式
|
// // verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
// // // 水平对齐方式
|
// // horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
// // // 偏移量
|
// // pixelOffset: new Cesium.Cartesian2(15, 0),
|
// // };
|
// });
|
|
// // 添加监听函数
|
// dataSource.clustering.clusterEvent.addEventListener(function (
|
// clusteredEntities,
|
// cluster
|
// ) {
|
// // 关闭自带的显示聚合数量的标签
|
// cluster.label.show = false;
|
// cluster.billboard.show = true;
|
// cluster.billboard.id = cluster.label.id;
|
// cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
|
// // console.log("-----", cluster);
|
// // 根据聚合数量的多少设置不同层级的图片以及大小
|
// if (clusteredEntities.length >= 50) {
|
// cluster.billboard.image = that.combineIconAndLabel(
|
// require("@/assets/img/right/test01.png"),
|
// clusteredEntities.length,
|
// 192,
|
// "test01"
|
// );
|
// cluster.billboard.width = 102;
|
// cluster.billboard.height = 102;
|
// } else if (clusteredEntities.length >= 40) {
|
// cluster.billboard.image = that.combineIconAndLabel(
|
// require("@/assets/img/right/test02.png"),
|
// clusteredEntities.length,
|
// 192,
|
// "test02"
|
// );
|
// cluster.billboard.width = 92;
|
// cluster.billboard.height = 92;
|
// } else if (clusteredEntities.length >= 20) {
|
// cluster.billboard.image = that.combineIconAndLabel(
|
// require("@/assets/img/right/test03.png"),
|
// clusteredEntities.length,
|
// 192,
|
// "test03"
|
// );
|
// cluster.billboard.width = 82;
|
// cluster.billboard.height = 82;
|
// } else {
|
// cluster.billboard.image = that.combineIconAndLabel(
|
// require("@/assets/img/right/test04.png"),
|
// clusteredEntities.length,
|
// 192,
|
// "test04"
|
// );
|
// cluster.billboard.width = 62;
|
// cluster.billboard.height = 62;
|
// }
|
// });
|
// });
|
// },
|
/**
|
* @description: 将图片和文字合成新图标使用
|
* @param {*} url：图片地址
|
* @param {*} label：文字
|
* @param {*} size：画布大小
|
* @return {*} 返回canvas
|
*/
|
combineIconAndLabel(url, label, size, val) {
|
// 创建画布对象
|
let canvas = document.createElement("canvas");
|
canvas.width = size;
|
canvas.height = size;
|
|
let ctx = canvas.getContext("2d");
|
let promise = new Cesium.Resource.fetchImage(url).then((image) => {
|
// 异常判断
|
try {
|
ctx.drawImage(image, 0, 0);
|
} catch (e) {
|
console.log(e);
|
}
|
// console.log("-----", ctx);
|
// 渲染字体
|
ctx.fillStyle = Cesium.Color.WHITE.toCssColorString();
|
if (val.indexOf("jh") != -1) {
|
ctx.font = "bold 15px Microsoft YaHei";
|
} else if (val.indexOf("jh") != -1) {
|
ctx.font = "bold 15px jh YaHei";
|
} else if (val.indexOf("test03") != -1) {
|
ctx.font = "bold 15px Microsoft YaHei";
|
} else if (val.indexOf("test04") != -1) {
|
ctx.font = "bold 15px Microsoft YaHei";
|
}
|
ctx.textAlign = "center";
|
ctx.textBaseline = "middle";
|
ctx.fillText(label, size / 3, size / 2.7);
|
|
return canvas.toDataURL("image/png");
|
});
|
return promise;
|
},
|
back() {
|
store.setLayerTreeShow(false);
|
},
|
},
|
watch: {
|
"state.itemId": {
|
handler: function (newVal, oldVal) {
|
console.log("state.itemId");
|
if (oldVal != "") {
|
oldVal.forEach((item) => {
|
this.setVisiable(item, false);
|
});
|
}
|
if (newVal != "") {
|
newVal.forEach((item) => {
|
this.setVisiable(item, true);
|
});
|
}
|
},
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.layerTreePanel {
|
position: absolute;
|
color: black;
|
width: 100%;
|
height: 100%;
|
background-color: white;
|
z-index: 1001;
|
}
|
|
.layerTreeContainer {
|
/* margin-top: 0.2rem; */
|
padding: 0.1rem;
|
}
|
|
.title {
|
height: 35px;
|
font-size: 16px;
|
font-family: Source Han Sans SC;
|
font-weight: 700;
|
color: #888888;
|
line-height: 25px;
|
margin: 10px 0px 10px 0;
|
border-bottom: 1px solid #e5e5e6;
|
}
|
.treeContainer {
|
height: 82vh;
|
overflow: auto;
|
}
|
</style>
|
