Skip to content

Commit 5ceec0e

Browse files
author
潘卓然ParnDeedlit
committed
【SDK】【Cesium】【新增Cesium的矢量瓦片的动态修改样式&示例】
1 parent 1d51be1 commit 5ceec0e

File tree

7 files changed

+246
-116
lines changed

7 files changed

+246
-116
lines changed

‎src/cesiumjs/overlay/PopupLayer.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,16 +73,16 @@ export default class PopupLayer {
7373
this.scene = map.scene;
7474
this.camera = map.camera;
7575
this.isShow = true;
76-
console.log('popup 1');
7776

78-
this.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas);
77+
ScreenSpaceEventHandler = Cesium.ScreenSpaceEventHandler || window["Cesium"].ScreenSpaceEventHandler;
78+
79+
this.handler = new ScreenSpaceEventHandler(this.scene.canvas);
7980

8081
this.infoDiv = null;
8182
// this.px_position = null;
8283
if (position.entity) {
8384
this.cartesian = position.entity.position._value;
8485
}
85-
console.log('popup 2');
8686

8787
this.cartesian =
8888
this.cartesian ||

‎src/cesiumjs/render/VectorTileLayer.js‎

Lines changed: 82 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { getLayers, getFonts, getVectorTileSource, getSpritePng } from './vector
44
import VectorTileProvider from './vectortile/VectorTileProvider';
55
import VectorTileStyle from './vectortile/MapgisVectorTileStyle';
66
import axios from 'axios';
7+
import { find } from 'ol/array';
78

89
/**
910
* @author 基础平台/创新中心 潘卓然 ParnDeedlit
@@ -58,15 +59,15 @@ export class VectorTileLayer {
5859
//this.bindEvent();
5960

6061
if (this.style) {
61-
if (this.style.indexOf('http') >= 0) {
62+
if (typeof this.style === 'string') {
6263
//如果是个网络地址，就通过url请求获取矢量瓦片json对象
6364
this.url = this.style;
6465
this.requestVectortileJson();
6566
} else {
66-
this.requestStyleData();
67+
this.requestStyleData(this.style);
6768
}
6869
} else if (this.styleUrl) {
69-
if (this.styleUrl.indexOf('http') >= 0) {
70+
if (typeof this.styleUrl === 'string') {
7071
this.url = this.styleUrl;
7172
this.requestVectortileJson();
7273
} else {
@@ -77,7 +78,7 @@ export class VectorTileLayer {
7778
//如果没有矢量瓦片json对象，就通过url请求获取矢量瓦片json对象
7879
this.requestVectortileJson();
7980
} else {
80-
this.requestStyleData();
81+
this.requestStyleData(this.vectortilejson);
8182
}
8283
}
8384
}
@@ -117,6 +118,7 @@ export class VectorTileLayer {
117118
* @see https://docs.mapbox.com/mapbox-gl-js/style-spec/
118119
*/
119120
requestStyleData(vectortilejson) {
121+
this.vectortilejson = vectortilejson;
120122
var layers = getLayers(vectortilejson);
121123
var sources = getVectorTileSource(vectortilejson);
122124
var spritepng = getSpritePng(vectortilejson);
@@ -173,45 +175,89 @@ export class VectorTileLayer {
173175
}
174176

175177
/**
176-
* 通过修改图层样式，更新图层
177-
* @function module:客户端渲染.VectorTileLayer.prototype.updateLayer
178-
* @param {Array} layersStyle 所有图层的样式参数 Array<Mapbox-Style-Spec-Layers>
178+
* @description 设置布局属性
179+
* @function module:客户端渲染.VectorTileLayer.prototype.updateStyle
180+
* @param {Object} mvtStyle
179181
*/
180-
updateLayer(layersStyle) {
181-
if (!this.styleData || !this.styleData.vectortilejson || !this.styleData.vectortilejson.layers) {
182-
return;
183-
}
182+
updateStyle(mvtStyle) {
183+
if (!this.styleData) return;
184+
this.styleData.vectortilejson = mvtStyle;
184185
this.remove();
185-
this.styleData.vectortilejson.layers = layersStyle;
186-
var layers = [];
187-
for (var i = 0; i < layersStyle.length; i++) {
188-
layers.push(layersStyle[i].id);
189-
}
190-
this.styleData.layers = layers;
191186
this.addLayer(this.styleData);
192187
}
193188

194189
/**
195-
* 获取所有图层的样式
196-
* @function module:客户端渲染.VectorTileLayer.prototype.getLayersStyle
197-
* @returns {*} 获取满足MVT样式的图层信息
190+
* @description 设置布局属性
191+
* @function module:客户端渲染.VectorTileLayer.prototype.setLayoutProperty
192+
* @param {String} layer
193+
* @param {String} key
194+
* @param {Object} value
198195
*/
199-
getLayersStyle() {
200-
if (!this.styleData || !this.styleData.vectortilejson || !this.styleData.vectortilejson.layers) {
201-
return;
202-
}
203-
return this.styleData.vectortilejson.layers;
196+
setLayoutProperty(layerId, key, value) {
197+
if (!this.vectortilejson || !this.vectortilejson.layers) return;
198+
const { layers } = this.vectortilejson;
199+
let finds = layers.filter((l) => {
200+
return l.id === layerId;
201+
});
202+
let layer = finds && finds.length > 0 ? finds[0] : undefined;
203+
if (!layer) return;
204+
layer.layout = layer.layout || {};
205+
layer.layout[key] = value;
206+
this.styleData.vectortilejson = this.vectortilejson;
207+
this.remove();
208+
this.addLayer(this.styleData);
209+
}
210+
211+
/**
212+
* @description 设置画笔属性
213+
* @function module:客户端渲染.VectorTileLayer.prototype.setPaintProperty
214+
* @param {String} layerId
215+
* @param {String} key
216+
* @param {Object} value
217+
*/
218+
setPaintProperty(layerId, key, value) {
219+
if (!this.vectortilejson || !this.vectortilejson.layers) return;
220+
const { layers } = this.vectortilejson;
221+
let finds = layers.filter((l) => {
222+
return l.id === layerId;
223+
});
224+
let layer = finds && finds.length > 0 ? finds[0] : undefined;
225+
if (!layer) return;
226+
layer.paint = layer.paint || {};
227+
layer.paint[key] = value;
228+
this.remove();
229+
this.addLayer(this.styleData);
230+
}
231+
232+
/**
233+
* @description 设置过滤属性
234+
* @function module:客户端渲染.VectorTileLayer.prototype.setFilter
235+
* @param {String} layerId
236+
* @param {Array} rule
237+
*/
238+
setFilter(layerId, rule) {
239+
if (!this.vectortilejson || !this.vectortilejson.layers) return;
240+
const { layers } = this.vectortilejson;
241+
let finds = layers.filter((l) => {
242+
return l.id === layerId;
243+
});
244+
let layer = finds && finds.length > 0 ? finds[0] : undefined;
245+
if (!layer) return;
246+
layer.filter = layer.filter || {};
247+
layer.filter = rule;
248+
this.remove();
249+
this.addLayer(this.styleData);
204250
}
205251

206-
unbindEvent() { }
252+
unbindEvent() {}
207253

208-
moveStartEvent() { }
254+
moveStartEvent() {}
209255

210-
moveEndEvent() { }
256+
moveEndEvent() {}
211257

212-
zoomStartEvent() { }
258+
zoomStartEvent() {}
213259

214-
zoomEndEvent() { }
260+
zoomEndEvent() {}
215261

216262
/**
217263
* 销毁图层-实际调用remove，为了接口保持一致
@@ -237,12 +283,17 @@ export class VectorTileLayer {
237283
*/
238284
remove() {
239285
let self = this;
286+
if (self.provider) {
287+
self.viewer.imageryLayers.remove(self.provider, true);
288+
self.provider.show = false;
289+
}
290+
/* let self = this;
240291
window.setTimeout(() => {
241292
if (self.provider) {
242293
self.viewer.imageryLayers.remove(self.provider, true);
243294
self.provider.show = false;
244295
}
245-
}, 1000);
296+
}, 1000); */
246297
}
247298
}
248299

‎website/public/static/demo/cesium/example/vectortile/mapgis-vectortile-3857.htm‎

Lines changed: 83 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,93 @@
11
<!DOCTYPE html>
22
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>地层分析</title>
6+
<!--引用第三方的jQuery脚本库-->
7+
<script include="jquery" src="./static/libs/include-lib-local.js"></script>
8+
<!--引用Cesium脚本库文件-->
9+
<script src="./static/libs/include-cesium-local.js"></script>
10+
<!--引用示例页面样式表-->
11+
<link rel="stylesheet" href="./static/demo/cesium/style.css" />
12+
<script>
13+
//在JS脚本开发中使用严格代码规范模式，及时捕获一些不规范的行为，从而避免编程错误
14+
'use strict';
315

4-
<head>
5-
<meta charset="utf-8" />
6-
<title>地层分析</title>
7-
<!--引用第三方的jQuery脚本库-->
8-
<script include="jquery" src="./static/libs/include-lib-local.js"></script>
9-
<!--引用Cesium脚本库文件-->
10-
<script src="./static/libs/include-cesium-local.js"></script>
11-
<!--引用示例页面样式表-->
12-
<link rel="stylesheet" href="./static/demo/cesium/style.css" />
13-
<script>
14-
//在JS脚本开发中使用严格代码规范模式，及时捕获一些不规范的行为，从而避免编程错误
15-
"use strict";
16+
//定义三维场景控件对象
17+
var webGlobe;
18+
//定义M3D图层对象
19+
var vectortileLayer;
20+
var chinaLayer;
1621

17-
//定义三维场景控件对象
18-
var webGlobe;
19-
//定义M3D图层对象
20-
var vectortileLayer;
21-
var chinaLayer;
22+
//地图初始化函数
23+
function init() {
24+
//构造三维视图类（视图容器div的id，三维视图设置参数）
25+
webGlobe = new Cesium.WebSceneControl('GlobeView', {});
2226

23-
//地图初始化函数
24-
function init() {
25-
//构造三维视图类（视图容器div的id，三维视图设置参数）
26-
webGlobe = new Cesium.WebSceneControl("GlobeView", {});
27+
//设置鼠标位置信息（经纬度、高程、视角高度）展示控件
28+
webGlobe.showPosition('coordinate_location');
29+
webGlobe.viewer.imageryLayers.removeAll();
30+
webGlobe.viewer.scene.globe.baseColor = new Cesium.Color(255 / 255, 255 / 255, 255 / 255, 1.0);
2731

28-
//设置鼠标位置信息（经纬度、高程、视角高度）展示控件
29-
webGlobe.showPosition("coordinate_location");
30-
webGlobe.viewer.imageryLayers.removeAll();
31-
webGlobe.viewer.scene.globe.baseColor = new Cesium.Color(255 / 255, 255 / 255, 255 / 255, 1.0);
32+
var blueImage = new Cesium.UrlTemplateImageryProvider({
33+
url: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',
34+
tilingScheme: new Cesium.WebMercatorTilingScheme(),
35+
maximumLevel: 12
36+
});
37+
webGlobe.viewer.imageryLayers.addImageryProvider(blueImage);
38+
loopMvt();
39+
}
3240

33-
var blueImage = new Cesium.UrlTemplateImageryProvider({
34-
url: "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
35-
tilingScheme: new Cesium.WebMercatorTilingScheme(),
36-
maximumLevel: 12,
37-
});
38-
webGlobe.viewer.imageryLayers.addImageryProvider(blueImage);
39-
loopMvt();
40-
}
41+
function loopMvt(index) {
42+
var { protocol, ip, port } = window.webclient;
43+
//构造矢量瓦片图层对象
44+
vectortileLayer = new CesiumZondy.Overlayer.VectorTileLayer(
45+
//视图
46+
webGlobe.viewer,
47+
{
48+
//样式json文件路径
49+
styleUrl: `${protocol}://${ip}:${port}/igs/rest/mrms/vtiles/styles/蓝色-墨卡托.json`,
50+
//第三方需要的token
51+
token: '',
52+
//是否可见
53+
show: true,
54+
callback: handleLayerAdd
55+
}
56+
);
4157

42-
function loopMvt(index) {
43-
var { protocol, ip, port } = window.webclient;
44-
//构造矢量瓦片图层对象
45-
vectortileLayer = new CesiumZondy.Overlayer.VectorTileLayer(
46-
//视图
47-
webGlobe.viewer,
48-
{
49-
//样式json文件路径
50-
styleUrl: `${protocol}://${ip}:${port}/igs/rest/mrms/vtiles/styles/蓝色-墨卡托.json`,
51-
//第三方需要的token
52-
token: "",
53-
//是否可见
54-
show: true,
55-
}
56-
);
58+
window.setTimeout(() => {
59+
//构造矢量瓦片图层对象
60+
chinaLayer = new CesiumZondy.Overlayer.VectorTileLayer(
61+
//视图
62+
webGlobe.viewer,
63+
{
64+
//样式json文件路径
65+
styleUrl: `${protocol}://${ip}:${port}/igs/rest/mrms/vtiles/styles/中国行政区.json`,
66+
//第三方需要的token
67+
token: '',
68+
//是否可见
69+
show: true
70+
}
71+
);
72+
console.warn('chinaLayer', chinaLayer);
73+
}, 2000);
74+
}
5775

58-
window.setTimeout(() => {
59-
//构造矢量瓦片图层对象
60-
chinaLayer = new CesiumZondy.Overlayer.VectorTileLayer(
61-
//视图
62-
webGlobe.viewer,
63-
{
64-
//样式json文件路径
65-
styleUrl: `${protocol}://${ip}:${port}/igs/rest/mrms/vtiles/styles/中国行政区.json`,
66-
//第三方需要的token
67-
token: "",
68-
//是否可见
69-
show: true,
70-
}
71-
);
72-
console.warn("chinaLayer", chinaLayer);
73-
}, 2000);
74-
}
75-
</script>
76-
</head>
76+
function handleLayerAdd(payload) {
77+
const { imageryLayer } = payload;
78+
window.setTimeout(() => {
79+
imageryLayer.alpha = 0.5;
80+
}, 5000);
81+
}
82+
</script>
83+
</head>
7784

78-
<body onload="init()">
79-
<div id="GlobeView"></div>
80-
<!--坐标容器-->
81-
<div id="coordinateDiv" class="coordinateClass">
82-
<label id="coordinate_location"></label>
83-
<label id="coordinate_height"></label>
84-
</div>
85-
</body>
86-
87-
</html>
85+
<body onload="init()">
86+
<div id="GlobeView"></div>
87+
<!--坐标容器-->
88+
<div id="coordinateDiv" class="coordinateClass">
89+
<label id="coordinate_location"></label>
90+
<label id="coordinate_height"></label>
91+
</div>
92+
</body>
93+
</html>

0 commit comments

Comments
 (0)