Skip to content

Commit 672d9d0

Browse files
zhurczhurc
committed
fix 部分接口注释&&更改mbgl three图层示例底图为iserver地图
1 parent efb5488 commit 672d9d0

File tree

10 files changed

+158
-38
lines changed

10 files changed

+158
-38
lines changed

‎dist/iclient9-mapboxgl.js‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -58360,7 +58360,7 @@ var ThreeLayer = exports.ThreeLayer = function (_mapboxgl$Evented) {
5836058360
value: function remove() {
5836158361
var map = this._map,
5836258362
me = this;
58363-
map.off('move', me._update.bind(me));
58363+
map.off('render', me._update.bind(me));
5836458364
map.off('resize', me._resize.bind(me));
5836558365
me.renderer.remove();
5836658366
me._map = null;
@@ -58403,12 +58403,12 @@ var ThreeLayer = exports.ThreeLayer = function (_mapboxgl$Evented) {
5840358403
this.renderer.renderScene();
5840458404
/**
5840558405
* renderScene 事件，场景渲染后触发
58406-
* @event mapboxgl.supermap.ThreeLayer#renderScene
58406+
* @event mapboxgl.supermap.ThreeLayer#renderscene
5840758407
* @type {Object}
58408-
* @property {string} type - renderScene
58408+
* @property {string} type - renderscene
5840958409
* @property {Object} target - layer
5841058410
*/
58411-
this.fire("renderScene");
58411+
this.fire("renderscene");
5841258412
return this;
5841358413
}
5841458414
}, {
@@ -58646,9 +58646,17 @@ var GraphicLayer = exports.GraphicLayer = function () {
5864658646
function GraphicLayer(id, options) {
5864758647
_classCallCheck(this, GraphicLayer);
5864858648

58649+
var opt = _Util.Util.extend(this, defaultProps, options);
58650+
/**
58651+
* @member mapboxgl.supermap.GraphicLayer.prototype.id - {string}
58652+
* @description 高效率点图层id
58653+
*/
5864958654
this.id = id || _iclientCommon.CommonUtil.createUniqueID("graphicLayer_");
58650-
this.graphics = options.graphics;
58651-
_Util.Util.extend(this, defaultProps, options);
58655+
/**
58656+
* @member mapboxgl.supermap.GraphicLayer.prototype.graphics - {Array<mapboxgl.supermap.Graphic>}
58657+
* @description 点要素对象数组
58658+
*/
58659+
this.graphics = opt.graphics;
5865258660
}
5865358661

5865458662
/**
@@ -58744,6 +58752,8 @@ var GraphicLayer = exports.GraphicLayer = function () {
5874458752
}, {
5874558753
key: 'remove',
5874658754
value: function remove() {
58755+
this.map.off('move', this._moveEvent.bind(this));
58756+
this.map.off('resize', this._resizeEvent.bind(this));
5874758757
this.map.getCanvasContainer().removeChild(this.canvas);
5874858758
}
5874958759

@@ -58756,7 +58766,7 @@ var GraphicLayer = exports.GraphicLayer = function () {
5875658766
}, {
5875758767
key: 'removeFromMap',
5875858768
value: function removeFromMap() {
58759-
this.map.getCanvasContainer().removeChild(this.canvas);
58769+
this.remove();
5876058770
}
5876158771

5876258772
/**

‎dist/iclient9-mapboxgl.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/mapboxgl/js/ThreeApplication.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,15 @@ var SceneBuilder = {
7575
var material = new THREE.MultiMaterial(materials);
7676
for (var i = 0; i < materials.length; i++) {
7777
materials[i].transparent = true;
78+
materials[i].vertexColors = THREE.FaceColors;
7879
}
7980

8081
scaleGeometry(geometry);
8182

83+
for (var i = 0; i < geometry.faces.length; i++) {
84+
geometry.faces[i].color = new THREE.Color(0x08acff);
85+
geometry.colorsNeedUpdate = true;
86+
}
8287
app.buildingMesh = new THREE.Mesh(geometry, material);
8388
app.buildingMesh.geometry.computeBoundingSphere();
8489
}
@@ -351,10 +356,8 @@ function BuildingView(app) {
351356
scene.add(buildingMesh);
352357

353358
// line helper (building)
354-
var edgeHelper = new THREE.EdgesHelper(buildingMesh, 0x000000, 80);
355-
edgeHelper.material.transparent = true;
356-
edgeHelper.material.opacity = 0.3;
357-
edgeHelper.material.linewidth = 1;
359+
var edgeHelper = new THREE.EdgesHelper(buildingMesh, 0x02f7f8, 1);
360+
edgeHelper.material.linewidth = 10;
358361
correctionObject3D(edgeHelper);
359362
scene.add(edgeHelper);
360363

@@ -368,7 +371,7 @@ function BuildingView(app) {
368371
scene.add(roofMesh);
369372

370373
// line helper (roof)
371-
roofEdgeHelper = new THREE.EdgesHelper(roofMesh, 0x000000, 20);
374+
roofEdgeHelper = new THREE.EdgesHelper(roofMesh, 0x02f7f8, 20);
372375
roofEdgeHelper.material.transparent = true;
373376
roofEdgeHelper.material.opacity = 0.2;
374377
roofEdgeHelper.material.linewidth = 1;

‎examples/mapboxgl/js/obj/building/building.js‎

Lines changed: 0 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/mapboxgl/threejsLayer_airplane.html‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,36 @@
2626
<script type="text/javascript" include="three,LoaderSupport,GLTFLoader" src="../../dist/include-mapboxgl.js"></script>
2727
<script>
2828

29-
mapboxgl.accessToken = 'pk.eyJ1IjoibW9ua2VyIiwiYSI6ImNpd2Z6aTE5YTAwdHEyb2tpOWs2ZzRydmoifQ.LwQMRArUP8Q9P7QApuOIHg';
29+
var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
30+
"| Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> " +
31+
" with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>";
32+
33+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090",
34+
url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
35+
3036
var map, threeLayer,
3137
position = [104.0688174135384, 30.548051075500908];
3238

3339
map = new mapboxgl.Map({
3440
container: 'map',
35-
style: 'mapbox://styles/mapbox/dark-v9',
41+
style: {
42+
"version": 8,
43+
"sources": {
44+
"raster-tiles": {
45+
"attribution": attribution,
46+
"type": "raster",
47+
"tiles": [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
48+
"tileSize": 256,
49+
},
50+
},
51+
"layers": [{
52+
"id": "simple-tiles",
53+
"type": "raster",
54+
"source": "raster-tiles",
55+
"minzoom": 0,
56+
"maxzoom": 22
57+
}]
58+
},
3659
center: [104.0693966828, 30.5760411152],
3760
zoom: 13.23,
3861
bearing: 0.8568,

‎examples/mapboxgl/threejsLayer_bird.html‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,12 +66,35 @@
6666
</script>
6767
<script>
6868

69-
mapboxgl.accessToken = 'pk.eyJ1IjoibW9ua2VyIiwiYSI6ImNpd2Z6aTE5YTAwdHEyb2tpOWs2ZzRydmoifQ.LwQMRArUP8Q9P7QApuOIHg';
69+
var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
70+
"| Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> " +
71+
" with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>";
72+
73+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090",
74+
url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
75+
7076
var map, threeLayer, position = [104.05108830860604, 30.57183314034];
7177

7278
map = new mapboxgl.Map({
7379
container: 'map',
74-
style: 'mapbox://styles/mapbox/streets-v9',
80+
style: {
81+
"version": 8,
82+
"sources": {
83+
"raster-tiles": {
84+
"attribution": attribution,
85+
"type": "raster",
86+
"tiles": [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
87+
"tileSize": 256,
88+
},
89+
},
90+
"layers": [{
91+
"id": "simple-tiles",
92+
"type": "raster",
93+
"source": "raster-tiles",
94+
"minzoom": 0,
95+
"maxzoom": 22
96+
}]
97+
},
7598
center: [104.05108830860604, 30.57183314034],
7699
zoom: 18.02,
77100
bearing: 18.13,

‎examples/mapboxgl/threejsLayer_buildings.html‎

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,40 @@
2727
<script type="text/javascript" src="./js/ThreeApplication.js"></script>
2828
<script>
2929

30-
mapboxgl.accessToken = 'pk.eyJ1IjoibW9ua2VyIiwiYSI6ImNpd2Z6aTE5YTAwdHEyb2tpOWs2ZzRydmoifQ.LwQMRArUP8Q9P7QApuOIHg';
30+
31+
var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
32+
"| Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> " +
33+
" with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>";
34+
35+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090",
36+
url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
3137

3238
var map, threeLayer;
3339

3440
map = new mapboxgl.Map({
3541
container: 'map',
36-
style: 'mapbox://styles/mapbox/streets-v9',
37-
center: [104.0712824591451, 30.560567575197524],
38-
zoom: 17.42,
42+
style: {
43+
"version": 8,
44+
"sources": {
45+
"raster-tiles": {
46+
"attribution": attribution,
47+
"type": "raster",
48+
"tiles": [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
49+
"tileSize": 256,
50+
},
51+
},
52+
"layers": [{
53+
"id": "simple-tiles",
54+
"type": "raster",
55+
"source": "raster-tiles",
56+
"minzoom": 0,
57+
"maxzoom": 22
58+
}]
59+
},
60+
center: [104.07099170795755, 30.560115990796447],
61+
zoom: 19.54,
3962
pitch: 60,
40-
bearing: 28
63+
bearing: 36
4164
});
4265

4366
addThreeLayer();
@@ -47,17 +70,20 @@
4770
//gl参数表示使用webgl渲染，forceRefresh强制不断刷新three的场景
4871
threeLayer = new mapboxgl.supermap.ThreeLayer('three');
4972
threeLayer.on("initialized", render);
73+
threeLayer.addTo(map);
5074

5175
function render() {
5276
var renderer = threeLayer.getThreeRenderer(),
5377
scene = threeLayer.getScene(),
5478
camera = threeLayer.getCamera();
5579

56-
this.light = new THREE.PointLight(0xeeeeee, 0.8);
80+
this.light = new THREE.PointLight(0xffffff, 0.8);
5781
this.light.position.copy(camera.position);
5882
scene.add(this.light);
59-
scene.add(new THREE.AmbientLight(0x333333));
60-
83+
scene.add(new THREE.AmbientLight(0x04589e));
84+
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
85+
directionalLight.position.set(0, 0, 0);
86+
scene.add(directionalLight);
6187
ThreeApplication
6288
.register(renderer, scene, camera)
6389
.setTargetLayer(threeLayer)
@@ -67,10 +93,10 @@
6793

6894
//均匀光照，与相机位置同步
6995
threeLayer.on("render", function () {
70-
threeLayer.light.position.copy(threeLayer.renderer.camera.position);
96+
// threeLayer.light.position.copy(threeLayer.renderer.camera.position);
97+
threeLayer.light.position.set(0, 0, 0);
7198
});
7299

73-
threeLayer.addTo(map);
74100
}
75101

76102
</script>

‎examples/mapboxgl/threejsLayer_facility.html‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,37 @@
2828

2929
<script>
3030

31-
mapboxgl.accessToken = 'pk.eyJ1IjoibW9ua2VyIiwiYSI6ImNpd2Z6aTE5YTAwdHEyb2tpOWs2ZzRydmoifQ.LwQMRArUP8Q9P7QApuOIHg';
31+
var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
32+
"| Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> " +
33+
" with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>";
34+
3235
var map, threeLayer, position = [116.466502, 39.990706];
3336

37+
var host = window.isLocal ? window.server : "http://117.122.248.69:8090",
38+
url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
39+
40+
3441
map = new mapboxgl.Map({
3542
container: 'map',
36-
style: 'mapbox://styles/mapbox/streets-v9',
43+
style: {
44+
"version": 8,
45+
"sources": {
46+
"raster-tiles": {
47+
"attribution": attribution,
48+
"type": "raster",
49+
"tiles": [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
50+
"tileSize": 256,
51+
},
52+
},
53+
"layers": [{
54+
"id": "simple-tiles",
55+
"type": "raster",
56+
"source": "raster-tiles",
57+
"minzoom": 0,
58+
"maxzoom": 22
59+
}],
60+
"glyphs": host + "/iserver/services/map-beijing/rest/maps/beijingMap/tileFeature/sdffonts/{fontstack}/{range}.pbf",
61+
},
3762
center: [116.46548484988489, 39.990389660427695],
3863
zoom: 15.91,
3964
bearing: 59.19,
@@ -75,7 +100,6 @@
75100
threeLayer = new mapboxgl.supermap.ThreeLayer('three');
76101

77102
threeLayer.on("initialized", render);
78-
threeLayer.addTo(map);
79103

80104
function render() {
81105
var renderer = threeLayer.getThreeRenderer(),
@@ -94,6 +118,7 @@
94118
threeLayer.on("render", function () {
95119
threeLayer.light.position.copy(threeLayer.renderer.camera.position);
96120
});
121+
threeLayer.addTo(map);
97122
}
98123

99124
function loadOverlays() {

‎src/mapboxgl/overlay/GraphicLayer.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,18 @@ const defaultProps = {
3838
export class GraphicLayer {
3939

4040
constructor(id, options) {
41+
let opt = Util.extend(this, defaultProps, options);
42+
/**
43+
* @member mapboxgl.supermap.GraphicLayer.prototype.id - {string}
44+
* @description 高效率点图层id
45+
*/
4146
this.id = id || CommonUtil.createUniqueID("graphicLayer_");
42-
this.graphics = options.graphics;
43-
Util.extend(this, defaultProps, options);
47+
/**
48+
* @member mapboxgl.supermap.GraphicLayer.prototype.graphics - {Array<mapboxgl.supermap.Graphic>}
49+
* @description 点要素对象数组
50+
*/
51+
this.graphics = opt.graphics;
52+
4453
}
4554

4655
/**
@@ -130,6 +139,8 @@ export class GraphicLayer {
130139
* @description 删除该图层
131140
*/
132141
remove() {
142+
this.map.off('move', this._moveEvent.bind(this));
143+
this.map.off('resize', this._resizeEvent.bind(this));
133144
this.map.getCanvasContainer().removeChild(this.canvas);
134145
}
135146

@@ -139,7 +150,7 @@ export class GraphicLayer {
139150
* @description 删除该图层
140151
*/
141152
removeFromMap() {
142-
this.map.getCanvasContainer().removeChild(this.canvas);
153+
this.remove();
143154
}
144155

145156
/**

‎src/mapboxgl/overlay/ThreeLayer.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -360,7 +360,7 @@ export class ThreeLayer extends mapboxgl.Evented {
360360
*/
361361
remove() {
362362
let map = this._map, me = this;
363-
map.off('move', me._update.bind(me));
363+
map.off('render', me._update.bind(me));
364364
map.off('resize', me._resize.bind(me));
365365
me.renderer.remove();
366366
me._map = null;
@@ -397,12 +397,12 @@ export class ThreeLayer extends mapboxgl.Evented {
397397
this.renderer.renderScene();
398398
/**
399399
* renderScene 事件，场景渲染后触发
400-
* @event mapboxgl.supermap.ThreeLayer#renderScene
400+
* @event mapboxgl.supermap.ThreeLayer#renderscene
401401
* @type {Object}
402-
* @property {string} type - renderScene
402+
* @property {string} type - renderscene
403403
* @property {Object} target - layer
404404
*/
405-
this.fire("renderScene");
405+
this.fire("renderscene");
406406
return this;
407407
}
408408

0 commit comments

Comments
 (0)