antv地图下钻(单机高亮,双击下钻)

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);
                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值