p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(map): container layout

This commit is contained in:
thinkinggis 2019-08-12 14:52:50 +08:00
parent 94b76304ef
commit 16e1b26c36
6 changed files with 37 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
demos/hz.html
View File

@ -30,84 +30,12 @@ const scene = new L7.Scene({
],
pitch:0,
zoom: 5,
showBuildingBlock:false,
minZoom: 0,
maxZoom: 18
});
const lineData = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
117.02636718749999,
37.79676317682161
],
[
117.20214843749999,
37.23032838760387
],
[
117.31201171875001,
36.756490329505176
],
[
117.43286132812499,
36.38591277287651
],
[
117.586669921875,
35.871246850027966
],
[
117.76245117187499,
35.25459097465022
],
[
117.90527343750001,
34.732584206123626
],
[
117.99316406249999,
33.8339199536547
],
[
117.97119140625,
33.119150226768866
],
[
117.48779296875,
32.80574473290688
],
[
116.773681640625,
32.713355353177555
],
[
115.67504882812501,
32.704111144407406
],
[
114.510498046875,
32.85190345738802
],
[
113.818359375,
33.61461929233378
],
[
113.70849609375,
33.970697997361626
]
]
}
}
]
}
scene.on('loaded', () => {
$.get('https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json', data => {
scene.LineLayer({

17
demos/marker.html
View File

@ -31,6 +31,22 @@
});
window.scene = scene;
scene.on('loaded', function() {
$.getJSON('https://gw.alipayobjects.com/os/rmsportal/UpapMomPYUeiBjbHNAma.json', region => {
const color = [ 'rgb(22,32,101)', 'rgb(28,43,127)', 'rgb(36,68,142)', 'rgb(45,94,158)', 'rgb(53,119,174)', 'rgb(61,145,190)', 'rgb(70,170,206)', 'rgb(98,190,210)', 'rgb(138,205,206)', 'rgb(179,221,204)', 'rgb(220,236,201)' ];
var points = region.features.map((feature)=>{
return feature.properties;
})
const layer = scene.PolygonLayer({
zIndex:1,
})
.source(region)
.color('cname',(value)=>{
return (value =='中国' ? 'rgba(46,149,169,0.45)': 'rgba(227,244,244,0.1)');
})
.shape('fill')
.render();
});
$.getJSON('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json', function(data) {
console.log(data);
data.nodes.forEach(item=>{
@ -38,7 +54,6 @@
const total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;
const size =Math.max(Math.min(parseInt(total / 20000), 150),40)
console.log(item.name, size);
var data = [{
item: 'Agriculture',
count: item.gdp.Agriculture,

4
src/component/marker.js
View File

@ -53,7 +53,7 @@ export default class Marker extends Base {
addTo(scene) {
this.remove();
this._scene = scene;
this._scene.getContainer().appendChild(this.get('element'));
this._scene.getMarkerContainer().appendChild(this.get('element'));
this._scene.on('camerachange', this._update);
this.setDraggable(this.get('draggable'));
this._update();
@ -124,7 +124,7 @@ export default class Marker extends Base {
}
_onMapClick() {
this._scene.emit('click'); // 触发map点击事件，关闭其他popup
// this._scene.emit('click'); // 触发map点击事件，关闭其他popup
const element = this.get('element');
if (this._popup && element) {

6
src/component/popup.js
View File

@ -34,13 +34,17 @@ export default class Popup extends Base {
const hasPosition = this.lngLat;
if (!this._scene || !hasPosition || !this._content) { return; }
if (!this._container) {
this._container = this.creatDom('div', 'l7-popup', this._scene.getContainer());
this._container = this.creatDom('div', 'l7-popup', this._scene.getMarkerContainer().parentNode);
this._tip = this.creatDom('div', 'l7-popup-tip', this._container);
this._container.appendChild(this._content);
if (this.get('className')) {
this.get('className').split(' ').forEach(name =>
this._container.classList.add(name));
}
this._container.addEventListener('mousedown', e => {
e.stopPropagation();
});
}
if (this.get('maxWidth') && this._container.style.maxWidth !== this.get('maxWidth')) {
this._container.style.maxWidth = this.get('maxWidth');

5
src/core/scene.js
View File

@ -20,7 +20,6 @@ export default class Scene extends Base {
super(cfg);
this._initMap();
this.crs = epsg3857;
// this._initAttribution(); // 暂时取消，后面作为组件去加载
this.addImage();
this.fontAtlasManager = new FontAtlasManager();
this._layers = [];
@ -54,6 +53,7 @@ export default class Scene extends Base {
const Map = new MapProvider(this._attrs);
Map.mixMap(this);
this._container = Map.container;
this._markerContainier = Map.l7_marker_Container;
Map.on('mapLoad', () => {
this.map = Map.map;
this._initEngine(Map.renderDom);
@ -122,6 +122,9 @@ export default class Scene extends Base {
getContainer() {
return this._container;
}
getMarkerContainer() {
return this._markerContainier;
}
_registEvents() {
const events = [
'mouseout',

11
src/map/AMap.js
View File

@ -59,6 +59,7 @@ export default class GaodeMap extends Base {
} else {
this.map = new AMap.Map(this.container, this._attrs);
}
this.amapContainer = this.map.getContainer().getElementsByClassName('amap-maps')[0];
}
asyncCamera(engine) {
this._engine = engine;
@ -96,13 +97,17 @@ export default class GaodeMap extends Base {
return this.projectFlat(this.getCenter());
}
addOverLayer() {
const canvasContainer = this.container instanceof HTMLElement ? this.container : document.getElementById(this.container);
this.canvasContainer = canvasContainer;
// const canvasContainer = this.container instanceof HTMLElement ? this.container : document.getElementById(this.container);
// this.canvasContainer = canvasContainer;
this.renderDom = document.createElement('div');
this.renderDom.style.cssText +=
'position: absolute;top: 0; z-index:1;height: 100%;width: 100%;pointer-events: none;';
this.renderDom.id = 'l7_canvaslayer';
canvasContainer.appendChild(this.renderDom);
this.amapContainer.appendChild(this.renderDom);
this.l7_marker_Container = document.createElement('div');
this.l7_marker_Container.className = 'l7_marker';
this.amapContainer.appendChild(this.l7_marker_Container);
}
mixMap(scene) {
const map = this.map;