Skip to content

Commit b11afa6

Browse files
author
liusijie02
committed
init
0 parents  commit b11afa6

44 files changed

Lines changed: 2267 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
dist
3+
.cache
4+

‎d3/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>d3 Integration</title>
6+
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
7+
<script src="https://unpkg.com/elm-pep"></script>
8+
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
9+
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder"></script>
10+
<script src="https://unpkg.com/d3@5.9.2/dist/d3.js"></script>
11+
<script src="https://unpkg.com/topojson@3.0.2/dist/topojson.js"></script>
12+
<style>
13+
.map {
14+
width: 100%;
15+
height:400px;
16+
}
17+
path.boundary {
18+
fill: none;
19+
stroke: #777;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<div id="map" class="map"></div>
25+
<script src="main.js"></script>
26+
</body>
27+
</html>

‎d3/main.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import 'ol/ol.css';
2+
import Map from 'ol/Map';
3+
import SourceState from 'ol/source/State';
4+
import Stamen from 'ol/source/Stamen';
5+
import View from 'ol/View';
6+
import {Layer, Tile as TileLayer} from 'ol/layer';
7+
import {fromLonLat, toLonLat} from 'ol/proj';
8+
import {getCenter, getWidth} from 'ol/extent';
9+
10+
var CanvasLayer = /*@__PURE__*/(function (Layer) {
11+
function CanvasLayer(options) {
12+
Layer.call(this, options);
13+
14+
this.features = options.features;
15+
16+
this.svg = d3
17+
.select(document.createElement('div'))
18+
.append('svg')
19+
.style('position', 'absolute');
20+
21+
this.svg.append('path').datum(this.features).attr('class', 'boundary');
22+
}
23+
24+
if ( Layer ) CanvasLayer.__proto__ = Layer;
25+
CanvasLayer.prototype = Object.create( Layer && Layer.prototype );
26+
CanvasLayer.prototype.constructor = CanvasLayer;
27+
28+
CanvasLayer.prototype.getSourceState = function getSourceState () {
29+
return SourceState.READY;
30+
};
31+
32+
CanvasLayer.prototype.render = function render (frameState) {
33+
var width = frameState.size[0];
34+
var height = frameState.size[1];
35+
var projection = frameState.viewState.projection;
36+
var d3Projection = d3.geoMercator().scale(1).translate([0, 0]);
37+
var d3Path = d3.geoPath().projection(d3Projection);
38+
39+
var pixelBounds = d3Path.bounds(this.features);
40+
var pixelBoundsWidth = pixelBounds[1][0] - pixelBounds[0][0];
41+
var pixelBoundsHeight = pixelBounds[1][1] - pixelBounds[0][1];
42+
43+
var geoBounds = d3.geoBounds(this.features);
44+
var geoBoundsLeftBottom = fromLonLat(geoBounds[0], projection);
45+
var geoBoundsRightTop = fromLonLat(geoBounds[1], projection);
46+
var geoBoundsWidth = geoBoundsRightTop[0] - geoBoundsLeftBottom[0];
47+
if (geoBoundsWidth < 0) {
48+
geoBoundsWidth += getWidth(projection.getExtent());
49+
}
50+
var geoBoundsHeight = geoBoundsRightTop[1] - geoBoundsLeftBottom[1];
51+
52+
var widthResolution = geoBoundsWidth / pixelBoundsWidth;
53+
var heightResolution = geoBoundsHeight / pixelBoundsHeight;
54+
var r = Math.max(widthResolution, heightResolution);
55+
var scale = r / frameState.viewState.resolution;
56+
57+
var center = toLonLat(getCenter(frameState.extent), projection);
58+
d3Projection
59+
.scale(scale)
60+
.center(center)
61+
.translate([width / 2, height / 2]);
62+
63+
d3Path = d3Path.projection(d3Projection);
64+
d3Path(this.features);
65+
66+
this.svg.attr('width', width);
67+
this.svg.attr('height', height);
68+
69+
this.svg.select('path').attr('d', d3Path);
70+
71+
return this.svg.node();
72+
};
73+
74+
return CanvasLayer;
75+
}(Layer));
76+
77+
var map = new Map({
78+
layers: [
79+
new TileLayer({
80+
source: new Stamen({
81+
layer: 'watercolor',
82+
}),
83+
}) ],
84+
target: 'map',
85+
view: new View({
86+
center: fromLonLat([-97, 38]),
87+
zoom: 4,
88+
}),
89+
});
90+
91+
/**
92+
* Load the topojson data and create an ol/layer/Image for that data.
93+
*/
94+
d3.json('data/topojson/us.json').then(function (us) {
95+
var layer = new CanvasLayer({
96+
features: topojson.feature(us, us.objects.counties),
97+
});
98+
99+
map.addLayer(layer);
100+
});

‎demo/index.html‎

Whitespace-only changes.

‎demo/main.js‎

Whitespace-only changes.

‎gif动画/globe.gif‎

68.3 KB
Loading

‎gif动画/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Animated GIF</title>
6+
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
7+
<script src="https://unpkg.com/elm-pep"></script>
8+
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
9+
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder"></script>
10+
<script src="https://unpkg.com/gifler@0.1.0/gifler.min.js"></script>
11+
<style>
12+
.map {
13+
width: 100%;
14+
height:400px;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<div id="map" class="map"></div>
20+
<script src="main.js"></script>
21+
</body>
22+
</html>

‎gif动画/main.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import 'ol/ol.css';
2+
import Feature from 'ol/Feature';
3+
import Map from 'ol/Map';
4+
import Point from 'ol/geom/Point';
5+
import View from 'ol/View';
6+
import {Icon, Style} from 'ol/style';
7+
import {Stamen, Vector as VectorSource} from 'ol/source';
8+
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
9+
10+
var iconFeature = new Feature({
11+
geometry: new Point([0, 0]),
12+
});
13+
14+
var vectorSource = new VectorSource({
15+
features: [iconFeature],
16+
});
17+
18+
var vectorLayer = new VectorLayer({
19+
source: vectorSource,
20+
});
21+
22+
var rasterLayer = new TileLayer({
23+
source: new Stamen({
24+
layer: 'toner',
25+
}),
26+
});
27+
28+
var map = new Map({
29+
layers: [rasterLayer, vectorLayer],
30+
target: document.getElementById('map'),
31+
view: new View({
32+
center: [0, 0],
33+
zoom: 2,
34+
}),
35+
});
36+
37+
// var gifUrl = './globe.gif';
38+
var gifUrl = 'https://openlayers.org/en/latest/examples/data/globe.gif';
39+
var gif = gifler(gifUrl);
40+
gif.frames(
41+
document.createElement('canvas'),
42+
function (ctx, frame) {
43+
if (!iconFeature.getStyle()) {
44+
iconFeature.setStyle(
45+
new Style({
46+
image: new Icon({
47+
img: ctx.canvas,
48+
imgSize: [frame.width, frame.height],
49+
opacity: 0.8,
50+
}),
51+
})
52+
);
53+
}
54+
ctx.clearRect(0, 0, frame.width, frame.height);
55+
ctx.drawImage(frame.buffer, frame.x, frame.y);
56+
map.render();
57+
},
58+
true
59+
);
60+
61+
// change mouse cursor when over icon
62+
map.on('pointermove', function (e) {
63+
var pixel = map.getEventPixel(e.originalEvent);
64+
var hit = map.hasFeatureAtPixel(pixel);
65+
map.getTarget().style.cursor = hit ? 'pointer' : '';
66+
});

0 commit comments

Comments
 (0)