diff --git a/demos/hz.html b/demos/hz.html
index cda1db3e96..4fd902d60b 100644
--- a/demos/hz.html
+++ b/demos/hz.html
@@ -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({
diff --git a/demos/marker.html b/demos/marker.html
index bcd8759afe..0cd4187f5e 100644
--- a/demos/marker.html
+++ b/demos/marker.html
@@ -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,
diff --git a/src/component/marker.js b/src/component/marker.js
index 75e17c7a8b..1e9385f5f1 100644
--- a/src/component/marker.js
+++ b/src/component/marker.js
@@ -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) {
diff --git a/src/component/popup.js b/src/component/popup.js
index 31f8d02759..d88c1457e4 100644
--- a/src/component/popup.js
+++ b/src/component/popup.js
@@ -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');
diff --git a/src/core/scene.js b/src/core/scene.js
index 16e5b7e781..7c102a61cf 100644
--- a/src/core/scene.js
+++ b/src/core/scene.js
@@ -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',
diff --git a/src/map/AMap.js b/src/map/AMap.js
index da40418842..2b203944c4 100644
--- a/src/map/AMap.js
+++ b/src/map/AMap.js
@@ -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;