|
|
|
@ -170,7 +170,7 @@ export default { |
|
|
|
showLabel: false, |
|
|
|
center: [120.220563, 36.496127], |
|
|
|
token: 'fc14b42e0ca18387866d68ebd4f150c1', |
|
|
|
zoom: 7, |
|
|
|
zoom: 15, |
|
|
|
isHotspot: false, |
|
|
|
showIndoorMap: false, |
|
|
|
showBuildingBlock: false, |
|
|
|
@ -186,7 +186,8 @@ export default { |
|
|
|
}) |
|
|
|
scene.on('loaded', () => { |
|
|
|
if (!type) { |
|
|
|
this.initCircle() |
|
|
|
// this.initCircle() |
|
|
|
this.initPolygonLayer(type) |
|
|
|
} else if (type == 'unit') { |
|
|
|
this.initDot(point) |
|
|
|
this.initPolygonLayer() |
|
|
|
@ -202,16 +203,15 @@ export default { |
|
|
|
}, |
|
|
|
initCircle () { |
|
|
|
circleLayerSmall = new ImageLayer({}) |
|
|
|
circleLayerSmall.source( |
|
|
|
'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/yifeng/2024-02-03/circle.png', |
|
|
|
{ |
|
|
|
// circleLayerSmall.source(`${process.env.VUE_APP_MAP_IMG}/circle1.png`, { |
|
|
|
// circleLayerSmall.source( |
|
|
|
// 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/yifeng/2024-02-03/circle.png', |
|
|
|
// { |
|
|
|
circleLayerSmall.source(`${process.env.VUE_APP_MAP_IMG}/circle1.png`, { |
|
|
|
parser: { |
|
|
|
type: 'image', |
|
|
|
extent: [121.0819, 35.8908, 119.2372, 37.2278] |
|
|
|
} |
|
|
|
} |
|
|
|
) |
|
|
|
}) |
|
|
|
scene.addLayer(circleLayerSmall) |
|
|
|
const data = jdbandaoJson |
|
|
|
// 画区域面积 |
|
|
|
@ -221,14 +221,14 @@ export default { |
|
|
|
.size(300) |
|
|
|
.source(data) |
|
|
|
.color('name', ['rgba(0, 127, 241, .5)']) |
|
|
|
.shape('extrude') |
|
|
|
// .shape("fill") |
|
|
|
// .shape('extrude') |
|
|
|
.shape('fill') |
|
|
|
.style({ |
|
|
|
opacityLinear: { |
|
|
|
enable: true, // true - false |
|
|
|
dir: 'out' // in - out |
|
|
|
}, |
|
|
|
opacity: 0.8, |
|
|
|
opacity: 1, |
|
|
|
heightfixed: true, |
|
|
|
sourceColor: '#4ee8fc', |
|
|
|
targetColor: '#00284e' |
|
|
|
@ -247,10 +247,10 @@ export default { |
|
|
|
} |
|
|
|
scene.setZoom(10) |
|
|
|
roadLayer = new ImageLayer({}) |
|
|
|
roadLayer.source( |
|
|
|
'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/yifeng/2024-02-03/road.png', |
|
|
|
{ |
|
|
|
// roadLayer.source(`${process.env.VUE_APP_MAP_IMG}/road1.png`, { |
|
|
|
// roadLayer.source( |
|
|
|
// 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/yifeng/2024-02-03/road.png', |
|
|
|
// { |
|
|
|
roadLayer.source(`${process.env.VUE_APP_MAP_IMG}/road1.png`, { |
|
|
|
parser: { |
|
|
|
type: 'image', |
|
|
|
extent: [119.7829, 36.7398, 120.5205, 36.2552] |
|
|
|
@ -273,7 +273,7 @@ export default { |
|
|
|
if (polygonLayer) { |
|
|
|
scene.removeLayer(polygonLayer) |
|
|
|
} |
|
|
|
scene.setZoom(10) |
|
|
|
scene.setZoom(15) |
|
|
|
roadLayer = new ImageLayer({}) |
|
|
|
roadLayer.source('/images/map/flow.png', { |
|
|
|
parser: { |
|
|
|
@ -301,32 +301,55 @@ export default { |
|
|
|
const { darkStyle } = this |
|
|
|
const styleConfig = darkStyle |
|
|
|
const data = yifengJson |
|
|
|
const data1 = jdbandaoJson |
|
|
|
// 画区域面积 |
|
|
|
polygonLayer = new PolygonLayer({ |
|
|
|
autoFit: true |
|
|
|
}) |
|
|
|
.source(data1) |
|
|
|
.color('name', ['rgba(0, 127, 241, .5)']) |
|
|
|
.shape('fill') |
|
|
|
.style({ |
|
|
|
// opacityLinear: { |
|
|
|
// enable: true, // true - false |
|
|
|
// dir: 'out' // in - out |
|
|
|
// }, |
|
|
|
opacity: 0.6, |
|
|
|
// heightfixed: true, |
|
|
|
sourceColor: '#4ee8fc', |
|
|
|
targetColor: '#00284e' |
|
|
|
}) |
|
|
|
scene.addLayer(polygonLayer) |
|
|
|
polygonLayer = new PolygonLayer({ |
|
|
|
autoFit: true |
|
|
|
}) |
|
|
|
.size(300) |
|
|
|
.source(data) |
|
|
|
.color( |
|
|
|
'name', |
|
|
|
type == 'resource' |
|
|
|
? styleConfig.polygonColor |
|
|
|
: ['rgba(0, 127, 241, .5)'] |
|
|
|
) |
|
|
|
.color('name', ['#3372d0']) |
|
|
|
.shape('extrude') |
|
|
|
// .shape("fill") |
|
|
|
// .shape('fill') |
|
|
|
.style({ |
|
|
|
opacityLinear: { |
|
|
|
enable: true, // true - false |
|
|
|
dir: 'out' // in - out |
|
|
|
}, |
|
|
|
opacity: 0.8, |
|
|
|
opacity: 1, |
|
|
|
heightfixed: true, |
|
|
|
sourceColor: '#4ee8fc', |
|
|
|
sourceColor: '#3372d0', |
|
|
|
targetColor: '#00284e' |
|
|
|
}) |
|
|
|
scene.addLayer(polygonLayer) |
|
|
|
|
|
|
|
polygonLayer.on('mousemove', (e) => { |
|
|
|
// console.log(e); |
|
|
|
// if (e.feature.properties.content) { |
|
|
|
// const popup = new Popup({ |
|
|
|
// offsets: [0, -0], |
|
|
|
// closeButton: false |
|
|
|
// }) |
|
|
|
// scene.addPopup(popup) |
|
|
|
// }? |
|
|
|
}) |
|
|
|
// 画区域边 |
|
|
|
lineLayer = new LineLayer({ |
|
|
|
zIndex: 2, |
|
|
|
@ -347,28 +370,30 @@ export default { |
|
|
|
}) |
|
|
|
scene.addLayer(lineLayer) |
|
|
|
|
|
|
|
textLayer = new PolygonLayer({ |
|
|
|
zIndex: 20 |
|
|
|
}) |
|
|
|
.source(data) |
|
|
|
.color('name', styleConfig.textColor) |
|
|
|
.shape('name', 'text') |
|
|
|
.size(14) |
|
|
|
.style({ |
|
|
|
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left |
|
|
|
textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直] |
|
|
|
spacing: 2, // 字符间距 |
|
|
|
padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 |
|
|
|
stroke: styleConfig.textStrokeColor, // 描边颜色 |
|
|
|
strokeWidth: 0.1, // 描边宽度 |
|
|
|
strokeOpacity: 0.8, |
|
|
|
raisingHeight: 300, |
|
|
|
textAllowOverlap: true |
|
|
|
}) |
|
|
|
.active(true) |
|
|
|
scene.addLayer(textLayer) |
|
|
|
// textLayer = new PolygonLayer({ |
|
|
|
// zIndex: 20 |
|
|
|
// }) |
|
|
|
// .source(data) |
|
|
|
// .color('name', styleConfig.textColor) |
|
|
|
// .shape('name', 'text') |
|
|
|
// .size(14) |
|
|
|
// .style({ |
|
|
|
// textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left |
|
|
|
// textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直] |
|
|
|
// spacing: 2, // 字符间距 |
|
|
|
// padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 |
|
|
|
// stroke: styleConfig.textStrokeColor, // 描边颜色 |
|
|
|
// strokeWidth: 0.1, // 描边宽度 |
|
|
|
// strokeOpacity: 0.8, |
|
|
|
// raisingHeight: 300, |
|
|
|
// textAllowOverlap: true |
|
|
|
// }) |
|
|
|
// .active(true) |
|
|
|
// scene.addLayer(textLayer) |
|
|
|
const _this = this |
|
|
|
polygonLayer.on('click', (e) => {}) |
|
|
|
polygonLayer.on('click', (e) => { |
|
|
|
e |
|
|
|
}) |
|
|
|
}, |
|
|
|
initDot (data) { |
|
|
|
scene.addImage('dotBto', require('@/assets/images/map/dot.png')) |
|
|
|
|
