地图标注物拖拽会变黑 #2595
Comments
|
hi @qrh919, welcome! |
|
提供复现代码 |
|
Hello, @qrh919, the information you provided is not enough for us to troubleshoot the problem. Please complete the issue description, provide gifs, screenshots, config, version. And explain the reproduction steps in detail. Thanks so much for your cooperation! The issue will be closed without any replay within 15 days. 你好 @qrh919，你所提供的信息不足于我们排查问题, 请按照 issue 模板填写相关信息, 提供 gif, 截图, 代码片段, 配置信息, 版本号, 可复现链接等方式, 详细说明复现步骤, 感谢配合, 谢谢! 15 天内未回复issue自动关闭。 |
scene.on("loaded", () => { }); |
没有复现 |
有试下配置低的电脑上运行吗？L7对电脑配置有要求吗？有没有讨论群需要加下 |
20240822-101752.mp4电脑配置： 代码如下： <template>
<div id="map" />
</template>
<script>
import {
Scene,
Zoom,
PolygonLayer,
LineLayer,
PointLayer,
Marker,
} from '@antv/l7'
import { GaodeMap } from '@antv/l7-maps'
export default {
name: 'demo',
data() {
return {
scene: null,
}
},
mounted() {
this.initMap()
},
methods: {
initMap() {
window._AMapSecurityConfig = {
securityJsCode: 'xxx',
}
this.scene = new Scene({
id: 'map',
logoVisible: false,
map: new GaodeMap({
style: 'blank', // 使用无底图风格
center: [120.664655, 27.913746],
pitch: 40,
rotation: 10,
zoom: 10,
skyColor: 'eaf2ff',
token: 'xxx',
}),
})
let self = this
this.scene.on('loaded', () => {
this.scene.addImage(
'00',
'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_selfFactory.png'
)
this.scene.addImage(
'01',
'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_rival.png'
)
this.scene.addImage(
'02',
'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_cooperationFactory.png'
)
this.scene.addImage(
'03',
'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_generalRival.png'
)
this.scene.addImage(
'04',
'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_other.png'
)
this.scene.addImage(
'05',
'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_carton.png'
)
//缩放
const zoom = new Zoom({ position: 'bottomright' })
self.scene.addControl(zoom)
self.addMapArea()
self.addPointPosition()
})
},
//添加区域
addMapArea() {
var data = {
type: 'FeatureCollection',
features: [],
}
var labelData = []
let self = this
axios
.get('https://geo.datav.aliyun.com/areas_v2/bound/330304.json')
.then(function (res) {
let resultData = res.data
var featuresData = resultData.features[0]
data.features.push(featuresData)
labelData.push(featuresData.properties)
const layer = new PolygonLayer({ zIndex: 2 })
.source(data)
.color('#F7F9FE')
.shape('fill')
const lineLayer = new LineLayer({
zIndex: 3,
})
.source(data)
.color('#0383FE')
.size(1)
const labelLayer = new PointLayer({
zIndex: 4,
})
.source(labelData, {
parser: {
type: 'json',
coordinates: 'centroid',
},
})
.color('#0067E2')
.shape('name', 'text')
.size(12)
.style({
opacity: 1,
stroke: '#fff',
strokeWidth: 1,
padding: [5, 5],
textAllowOverlap: false,
fontFamily: 'D-DIN',
fontWeight: 'normal',
})
self.scene.addLayer(layer)
self.scene.addLayer(lineLayer)
self.scene.addLayer(labelLayer)
})
},
addPointPosition() {
const pointPositionData = [
{
longitude: '120.808067',
latitude: '27.930832',
type: '1',
style: '01',
},
{
longitude: '120.647392',
latitude: '27.982082',
type: '4',
style: '04',
},
{
longitude: '120.470008',
latitude: '27.95961',
type: '1',
style: '01',
},
]
const pointPositionLayer = new PointLayer({ zIndex: 12 })
.source(pointPositionData, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
},
})
.shape('style', function (type) {
return type
})
.size('style', function (type) {
if (type === '00') {
return 25
} else if (type === '05') {
return 10
}
return 20
})
this.scene.addLayer(pointPositionLayer)
// 绑定事件
pointPositionLayer.on('click', (e) => {
const { lng, lat } = e.lngLat
console.log(lng, lat)
const marker = new Marker().setLnglat({ lng: lng, lat: lat })
this.scene.addMarker(marker)
})
},
},
}
</script>
<style lang="less" scoped>
#map {
width: 100%;
height: 100%;
}
</style> |
|
未曾复现，代码如下 import {
Scene,
Zoom,
PolygonLayer,
LineLayer,
PointLayer,
Marker,
Map
} from '@antv/l7'
const scene = new Scene({
id: 'map',
logoVisible: false,
map: new Map({
center: [120.664655, 27.913746],
pitch: 40,
rotation: 10,
zoom: 10,
skyColor: 'eaf2ff',
}),
})
scene.on('loaded', () => {
scene.addImage(
'00',
'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_selfFactory.png'
)
scene.addImage(
'01',
'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_rival.png'
)
scene.addImage(
'02',
'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_cooperationFactory.png'
)
scene.addImage(
'03',
'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_generalRival.png'
)
scene.addImage(
'04',
'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_other.png'
)
scene.addImage(
'05',
'https://djcps.oss-cn-hangzhou.aliyuncs.com/pro/djmarket/rivalboard/marker_carton.png'
)
addPointPosition()
})
function addPointPosition() {
const pointPositionData = [{
longitude: '120.808067',
latitude: '27.930832',
type: '1',
style: '01',
},
{
longitude: '120.647392',
latitude: '27.982082',
type: '4',
style: '04',
},
{
longitude: '120.470008',
latitude: '27.95961',
type: '1',
style: '01',
},
]
const pointPositionLayer = new PointLayer({ zIndex: 12 })
.source(pointPositionData, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
},
})
.shape('style', function (type) {
return type
})
.size('style', function (type) {
if (type === '00') {
return 25
} else if (type === '05') {
return 10
}
return 20
})
scene.addLayer(pointPositionLayer)
// 绑定事件
pointPositionLayer.on('click', (e) => {
const { lng, lat } = e.lngLat
console.log(lng, lat)
const marker = new Marker().setLnglat({ lng: lng, lat: lat })
scene.addMarker(marker)
})
}
|
|
非常感谢，已经得到解决 |
切换渲引擎为 regl 如果可行，后续会升级，请上传浏览器环境报告，像这样 #2545 (comment) |
|
部分机型会出现拖拽地图时，出现标注物变黑，在谷歌浏览器最新的版本下也一样。
The text was updated successfully, but these errors were encountered: