Skip to content

Commit fbfe43d

Browse files
zhurczhurc
committed
新增2.5D效果示例
1 parent b7a15cf commit fbfe43d

7 files changed

Lines changed: 216 additions & 5 deletions

File tree

‎examples/data/buildings.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎examples/leaflet/config.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -426,6 +426,14 @@ var exampleConfig = {
426426
fileName: "mapVLayerPolygon"
427427
}]
428428
},
429+
"extrusion": {
430+
name: "2.5D",
431+
content: [{
432+
name: "建筑立体效果",
433+
thumbnail: "l_osmbuildings.png",
434+
fileName: "osmbuildings"
435+
}]
436+
},
429437
"tileVectorLayer": {
430438
name: "矢量瓦片",
431439
content: [
@@ -470,7 +478,7 @@ var exampleConfig = {
470478
}
471479
]
472480
},
473-
"ThemeLayer": {
481+
"themeLayer": {
474482
name: "客户端专题图",
475483
content: [{
476484
name: "单值专题图",
@@ -486,7 +494,6 @@ var exampleConfig = {
486494
fileName: "rankSymbolThemeLayer"
487495
}]
488496
}
489-
490497
}
491498
},
492499
"plot": {

‎examples/leaflet/img/l_osmbuildings.png‎

34.4 KB
Loading

‎examples/leaflet/osmbuildings.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>leaflet 建筑立体效果</title>
6+
<link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
7+
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
8+
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
9+
<script type="text/javascript" src="http://iclient.supermapol.com/libs/osmbuildings/OSMBuildings-Leaflet.js"></script>
10+
</head>
11+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
12+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
13+
<script>
14+
var map = new L.Map('map', {
15+
center: [39.916, 116.450],
16+
zoom: 16
17+
});
18+
19+
L.tileLayer('https://{s}.tiles.mapbox.com/v3/osmbuildings.kbpalbpk/{z}/{x}/{y}.png', {
20+
attribution: 'Imagery © <a href="http://mapbox.com">Mapbox</a>'
21+
}).addTo(map);
22+
23+
loadData();
24+
25+
function loadData() {
26+
var data;
27+
$.get('../data/buildings.json', function (geojson) {
28+
data = geojson;
29+
new OSMBuildings(map)
30+
.date(new Date(2017, 5, 15, 17, 30))
31+
.set(geojson)
32+
.click(bindPopup);
33+
});
34+
35+
36+
function bindPopup(evt) {
37+
var name = getFeatureNameById(evt.feature);
38+
if (name) {
39+
L.popup().setContent(name).setLatLng(L.latLng(evt.lat, evt.lon)).openOn(map);
40+
}
41+
}
42+
43+
function getFeatureNameById(id) {
44+
if (!data || !id) {
45+
return null;
46+
}
47+
var features = data.features;
48+
for (var i = 0; i < features.length; i++) {
49+
if (features[i].properties.id === id) {
50+
return features[i].properties.name;
51+
}
52+
}
53+
}
54+
}
55+
</script>
56+
</body>
57+
</html>

‎examples/openlayers/config.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -372,7 +372,7 @@ var exampleConfig = {
372372
]
373373

374374
},
375-
"Mapv": {
375+
"MapV": {
376376
name: "Mapv",
377377
content: [{
378378
name: "蜂巢图",
@@ -384,7 +384,15 @@ var exampleConfig = {
384384
fileName: "mapvNycTaxi"
385385
}]
386386
},
387-
"VectorTileLayer": {
387+
"extrusion": {
388+
name: "2.5D",
389+
content: [{
390+
name: "建筑立体效果",
391+
thumbnail: "ol_osmbuildings.png",
392+
fileName: "osmbuildings"
393+
}]
394+
},
395+
"vectorTileLayer": {
388396
name: "矢量瓦片",
389397
content: [
390398
{
@@ -434,7 +442,7 @@ var exampleConfig = {
434442
}
435443
]
436444
},
437-
"ThemeLayer": {
445+
"themeLayer": {
438446
name: "客户端专题图",
439447
content: [{
440448
name: "单值专题图",

‎examples/openlayers/img/ol_osmbuildings.png‎

33.2 KB
Loading

‎examples/openlayers/osmbuildings.html‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>openlayers 建筑立体效果</title>
6+
<link href="http://cdn.bootcss.com/openlayers/4.0.1/ol.css" rel="stylesheet">
7+
<script type="text/javascript" src="http://cdn.bootcss.com/openlayers/4.0.1/ol-debug.js"></script>
8+
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
9+
<script type="text/javascript" src="http://iclient.supermapol.com/libs/osmbuildings/OSMBuildings-OL3.js"></script>
10+
<style>
11+
.ol-popup {
12+
position: absolute;
13+
background-color: white;
14+
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
15+
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
16+
padding: 15px;
17+
border-radius: 10px;
18+
border: 1px solid #cccccc;
19+
bottom: 12px;
20+
left: -50px;
21+
font-size: 14px;
22+
min-width: 250px;
23+
z-index: 100;
24+
}
25+
26+
.ol-popup:after, .ol-popup:before {
27+
top: 100%;
28+
border: solid transparent;
29+
content: " ";
30+
height: 0;
31+
width: 0;
32+
position: absolute;
33+
pointer-events: none;
34+
}
35+
36+
.ol-popup:after {
37+
border-top-color: white;
38+
border-width: 10px;
39+
left: 48px;
40+
margin-left: -10px;
41+
}
42+
43+
.ol-popup:before {
44+
border-top-color: #cccccc;
45+
border-width: 11px;
46+
left: 48px;
47+
margin-left: -11px;
48+
}
49+
50+
.ol-popup-closer {
51+
text-decoration: none;
52+
position: absolute;
53+
top: 2px;
54+
right: 8px;
55+
}
56+
57+
.ol-popup-closer:after {
58+
content: "✖";
59+
}
60+
</style>
61+
</head>
62+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
63+
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
64+
<div id="popup" class="ol-popup">
65+
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
66+
<div id="popup-content"></div>
67+
</div>
68+
<script>
69+
var container = document.getElementById('popup');
70+
var content = document.getElementById('popup-content');
71+
var closer = document.getElementById('popup-closer');
72+
var overlay = new ol.Overlay(({
73+
element: container,
74+
autoPan: true,
75+
autoPanAnimation: {
76+
duration: 250
77+
}
78+
}));
79+
80+
var map = new ol.Map({
81+
target: 'map',
82+
view: new ol.View({
83+
center: ol.proj.transform([116.450, 39.916], 'EPSG:4326', 'EPSG:3857'),
84+
zoom: 16,
85+
}),
86+
overlays: [overlay]
87+
});
88+
map.addLayer(new ol.layer.Tile({
89+
source: new ol.source.XYZ({
90+
url: "https://a.tiles.mapbox.com/v3/osmbuildings.kbpalbpk/{z}/{x}/{y}.png",
91+
attributions: [
92+
new ol.Attribution({
93+
html: ' Imagery © <a href="http://mapbox.com">Mapbox</a>'
94+
})]
95+
})
96+
}));
97+
98+
loadData();
99+
100+
function loadData() {
101+
var data;
102+
$.get('../data/buildings.json', function (geojson) {
103+
data = geojson;
104+
new OSMBuildings(map)
105+
.date(new Date(2017, 5, 15, 17, 30))
106+
.set(geojson)
107+
.click(bindPopup);
108+
});
109+
110+
function bindPopup(evt) {
111+
var name = getFeatureNameById(evt.feature);
112+
if (name) {
113+
content.innerHTML = name;
114+
overlay.setPosition([evt.lat, evt.lon]);
115+
}
116+
closer.onclick = function () {
117+
overlay.setPosition(undefined);
118+
closer.blur();
119+
return false;
120+
};
121+
}
122+
123+
function getFeatureNameById(id) {
124+
if (!data || !id) {
125+
return null;
126+
}
127+
var features = data.features;
128+
for (var i = 0; i < features.length; i++) {
129+
if (features[i].properties.id === id) {
130+
return features[i].properties.name;
131+
}
132+
}
133+
}
134+
}
135+
136+
</script>
137+
</body>
138+
</html>

0 commit comments

Comments
 (0)