antv中国地图展示

initMap() {

            chinaScene = new Scene({
                id: "mapChina",
                map: new Map({
                    style: "dark",
                    center: [102.99130938786305, 33.982243853450086],
                    zoom: 3.4,
                    pitch: 30,
                }),
                logoVisible: false,
            });
            chinaScene.on("loaded", () => {
                let lineDown, lineUp, textLayer;
                fetch(
                    // window.location.origin + window.location.pathname + "/json/china.json"
                    // this.chinaJson
                    'https://gw.alipayobjects.com/os/bmw-prod/ecd1aaac-44c0-4232-b66c-c0ced76d5c7d.json'
                    // "https://gw.alipayobjects.com/os/bmw-prod/d6da7ac1-8b4f-4a55-93ea-e81aa08f0cf3.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(16)
                            .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,
                            });
                        chinaScene.addLayer(textLayer);
                        lineUp = new LineLayer({ zIndex: 1 })
                            .source(this.chinaJson)
                            .shape("line")
                            .color("#0DCCFF")
                            .size(1.2)
                            .style({
                                raisingHeight: 1010000,
                            });
                        chinaScene.addLayer(lineUp);
                        return "";
                    });
            });
            const layer = new PolygonLayer({
                // zIndex: -10
            })
                .source(this.chinaJson)
                .size(1000000)
                .shape('extrude')
                .color('#fff')
                .select({
                    color: "#ff0"
                })
                .style({
                    mapTexture: this.provinceImg, //如果想使用纹理贴图，shap必须为extrude
                    heightfixed: true,
                    pickLight: true,
                    sourceColor: "#333", //抬高高度的颜色
                    targetColor: "#fff",
                    opacity: 0.5,
                    // zIndex: -10
                });
            layer.on("click", e => {
                console.log(e, '---e1');
                this.openPopup()
                this.getProviceData(e.feature.properties.adcode)
            })

            // 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',
                })
                .size(100000)

                .color('density', this.mapcolor)
                .shape('extrude')
                .active(true)
                .select({
                    color: "#ff0"
                })
                .style({
                    opacity: 1,
                    // zIndex: 999999999999999,
                    // raisingHeight: 300000,
                    textAllowOverlap: true,
                    // mapTexture: this.provinceImg, //如果想使用纹理贴图，shap必须为extrude
                })

            // const layerColor = new PolygonLayer({
            //     // zIndex: 9,
            // })
            //     .source(this.chinaJson)
            //     .size(1000000)
            //     .shape('fill')
            //     .color('#fff')
            //     .select({
            //         color: "#ff0"
            //     })
            //     .scale('density', {
            //         type: 'quantile',
            //     })
            //     .style({
            //         // mapTexture: this.provinceImg, //如果想使用纹理贴图，shap必须为extrude
            //         heightfixed: true,
            //         pickLight: true,
            //         sourceColor: "#333", //抬高高度的颜色
            //         targetColor: "#fff",
            //         opacity: 0.5,
            //         // zIndex: -10
            //     });

            chinaScene.addLayer(layerColor);
            chinaScene.addLayer(layer);

            // layerColor.on("click", v => {
            //     console.log(v, '---e');

            // })
        },