initMap() {
chinaScene = new Scene({
id: "mapChina",
map: new Map({
style: "dark",
center: [103.99130938786305, 33.982243853450086],
zoom: 3.4,
pitch: 20,
}),
logoVisible: false,
});
chinaScene.setMapStatus({
dragEnable: false, // 是否允许地图拖拽
keyboardEnable: false, // 是否允许形键盘事件
doubleClickZoom: false, // 双击放大
zoomEnable: false, // 滚动缩放
rotateEnable: false // 旋转
})
chinaScene.on("loaded", () => {
let lineDown, lineUp, textLayer;
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/ecd1aaac-44c0-4232-b66c-c0ced76d5c7d.json'
)
.then((res) => res.json())
.then((data) => {
});
const texts = [];
// data.features.map((option) => {
this.chinaJson.features.map((option) => {
const { name, center } = option.properties;
const [lng, lat] = center;
texts.push({ name, lng, lat });
return "";
});
textLayer = new PointLayer({ zIndex: 9999 })
.source(texts, {
parser: {
type: "json",
x: "lng",
y: "lat",
},
})
.shape("name", "text")
.size(18)
.color("#fff")
.style({
textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
spacing: 2, // 字符间距
padding: [1, 1], // 文本包围盒 padding [水平,垂直],影响碰撞检测结果,避免相邻文本靠的太近
stroke: "#0ff", // 描边颜色
strokeWidth: 0.2, // 描边宽度
raisingHeight: 100000,
textAllowOverlap: true,
opacity: 1,
});
chinaScene.addLayer(textLayer);
lineUp = new LineLayer({ zIndex: 10 })
.source(this.chinaJson)
.shape("line")
.color("#6ce8fb")
.size(1.2)
.style({
raisingHeight: 106500,
});
chinaScene.addLayer(lineUp);
return "";
});
const layer = new PolygonLayer({
// zIndex: -10
})
.source(this.chinaJson)
.size(100000)
.shape('extrude')
.color('#fff')
.select({
color: "#c8ab87"
})
.style({
mapTexture: this.provinceImg, //如果想使用纹理贴图,shap必须为extrude
// imagelayer: this.provinceImg,
heightfixed: true,
pickLight: true,
sourceColor: "#333", //抬高高度的颜色
targetColor: "#fff",
opacity: 0.8,
// raisingHeight: 100000,
// zIndex: -10
});
let clickType = 1;
layer.on("dblclick", e => {
clickType = 2
setTimeout(() => {
if (clickType == 2) {
console.log(e, '---双击');
this.mapScreenType = 2;
chinaScene.destroy()
const json = provinceJson.province.find(v => {
if(v.adcode == e.feature.properties.adcode) {
return v
}
})
// console.log(a,'---a');
setTimeout(() => {
this.initMapProvince(json)
}, 200);
}
}, 200);
// console.log(e, '---e1');
// this.openPopup()
// this.getProviceData(e.feature.properties.adcode)
})
layer.on("click", e => {
clickType = 1
setTimeout(() => {
if (clickType == 1) {
console.log(e, '---e11');
this.openPopup()
this.getProviceData(e.feature.properties.adcode)
}
}, 200);
})
// const layer = new PolygonLayer({
// // zIndex: 1,
// })
// .source(this.chinaJson)
// .size(0)
// .shape('fill')
// .color('#c0c0c0')
// .select({
// color: "#ff0"
// })
// .style({
// mapTexture: this.provinceImg, //如果想使用纹理贴图,shap必须为extrude
// heightfixed: true,
// pickLight: true,
// sourceColor: "#333", //抬高高度的颜色
// targetColor: "#fff",
// opacity: 0.8,
// zIndex: -10
// });
// layer.on("click", v => {
// console.log(v, '---e');
// })
const layerColor = new PolygonLayer({
zIndex: 9,
})
.source(this.chinaJson)
.scale('density', {
type: 'quantile',
})
.shape('fill')
.size(10000)
.color('density', this.mapcolor)
.style({
opacity: 0.8,
raisingHeight: 100000,
})
// layerColor.on("click", e => {
// console.log(e, '---e1');
// // this.openPopup()
// // this.getProviceData(e.feature.properties.adcode)
// })
const layerShadow = new PolygonLayer({
zIndex: 10,
})
.source(this.chinaJson)
// .scale('density', {
// type: 'quantile',
// })
.shape('fill')
.size(1)
.color('#1c302c')
.style({
opacity: 1,
raisingHeight: -500000,
})
chinaScene.addLayer(layerColor);
// chinaScene.addLayer(imgLayer);
chinaScene.addLayer(layer);
chinaScene.addLayer(layerShadow);
// layerColor.on("click", v => {
// console.log(v, '---e');
// })
},
initMapProvince(mapJson) {
provinceScene = new Scene({
id: "mapProvince",
map: new Map({
style: "dark",
center: [mapJson.center[0], mapJson.center[1]],
zoom: mapJson.zoom,
pitch: 20,
}),
logoVisible: false,
});
provinceScene.setMapStatus({
dragEnable: false, // 是否允许地图拖拽
keyboardEnable: false, // 是否允许形键盘事件
doubleClickZoom: false, // 双击放大
zoomEnable: false, // 滚动缩放
rotateEnable: false // 旋转
})
provinceScene.on("loaded", () => {
let lineDown, lineUp, textLayer;
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/ecd1aaac-44c0-4232-b66c-c0ced76d5c7d.json'
)
.then((res) => res.json())
.then((data) => {
});
const texts = [];
// data.features.map((option) => {
mapJson.features.map((option) => {
const { name, center } = option.properties;
const [lng, lat] = center;
texts.push({ name, lng, lat });
return "";
});
textLayer = new PointLayer({ zIndex: 9999 })
.source(texts, {
parser: {
type: "json",
x: "lng",
y: "lat",
},
})
.shape("name", "text")
.size(18)
.color("#fff")
.style({
textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
spacing: 2, // 字符间距
padding: [1, 1], // 文本包围盒 padding [水平,垂直],影响碰撞检测结果,避免相邻文本靠的太近
stroke: "#0ff", // 描边颜色
strokeWidth: 0.2, // 描边宽度
raisingHeight: 100000,
textAllowOverlap: true,
opacity: 1,
});
provinceScene.addLayer(textLayer);
lineUp = new LineLayer({ zIndex: 10 })
.source(mapJson)
.shape("line")
.color("#6ce8fb")
.size(1.2)
.style({
raisingHeight: 106500,
});
provinceScene.addLayer(lineUp);
return "";
});
const layer = new PolygonLayer({
// zIndex: -10
})
.source(mapJson)
.size(100000)
.shape('extrude')
.color('#fff')
.select({
color: "#c8ab87"
})
.style({
mapTexture: this.provinceImg, //如果想使用纹理贴图,shap必须为extrude
// imagelayer: this.provinceImg,
heightfixed: true,
pickLight: true,
sourceColor: "#333", //抬高高度的颜色
targetColor: "#fff",
opacity: 0.8,
// raisingHeight: 100000,
// zIndex: -10
});
let clickType = 1;
// layer.on("dblclick", e => {
// clickType = 2
// setTimeout(() => {
// if (clickType == 2) {
// console.log(e, '---双击');
// }
// }, 200);
// // console.log(e, '---e1');
// // this.openPopup()
// // this.getProviceData(e.feature.properties.adcode)
// })
layer.on("click", e => {
clickType = 1
setTimeout(() => {
if (clickType == 1) {
console.log(e, '---e11');
this.openPopup()
this.getProviceData(e.feature.properties.adcode)
}
}, 200);
})
// const layer = new PolygonLayer({
// // zIndex: 1,
// })
// .source(this.chinaJson)
// .size(0)
// .shape('fill')
// .color('#c0c0c0')
// .select({
// color: "#ff0"
// })
// .style({
// mapTexture: this.provinceImg, //如果想使用纹理贴图,shap必须为extrude
// heightfixed: true,
// pickLight: true,
// sourceColor: "#333", //抬高高度的颜色
// targetColor: "#fff",
// opacity: 0.8,
// zIndex: -10
// });
// layer.on("click", v => {
// console.log(v, '---e');
// })
const layerColor = new PolygonLayer({
zIndex: 9,
})
.source(mapJson)
.scale('density', {
type: 'quantile',
})
.shape('fill')
.size(10000)
.color('density', this.mapcolor)
.style({
opacity: 0.8,
raisingHeight: 100000,
})
// layerColor.on("click", e => {
// console.log(e, '---e1');
// // this.openPopup()
// // this.getProviceData(e.feature.properties.adcode)
// })
const layerShadow = new PolygonLayer({
zIndex: 10,
})
.source(mapJson)
// .scale('density', {
// type: 'quantile',
// })
.shape('fill')
.size(1)
.color('#1c302c')
.style({
opacity: 1,
raisingHeight: -500000,
})
provinceScene.addLayer(layerColor);
// chinaScene.addLayer(imgLayer);
provinceScene.addLayer(layer);
provinceScene.addLayer(layerShadow);
},