地图API_卫星地图_离线地图_地图可视化_离线地图二次开发

运行重置
            <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://bigemap.com/offline_data/newjunbiao/vue.js"></script>
    <link href="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/Widgets/widgets.css" rel="stylesheet" />
    <script src="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
    <!-- elementui -->
    <script src="http://bigemap.com/offline_data/newjunbiao/elementui.js"></script>
    <link rel="stylesheet" href="http://bigemap.com/offline_data/newjunbiao/elementui.css" />
    <title>渐变多边形</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        #app {
            width: 100%;
            height: 100%;
        }

        #baseMap {
            width: 100%;
            height: 100%;
        }

        .tools {
            position: absolute;
            z-index: 9;
            top: 40px;
            right: 60px;
            width: 200px;
            height: 40px;
            display: flex;
            align-items: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="baseMap"></div>
    </div>
    <script>
        window.viewer = null;
        window.onload = () => {
            new Vue({
                el: "#app",
                data() {
                    return {};
                },
                mounted() {
                    this.initMap();
                },
                methods: {
                    //初始化地图
                    initMap() {
                        bmgl.Config.HTTP_URL = "http://ua.bigemap.com:30081/bmsdk/";
                        viewer = new bmgl.Viewer("baseMap", {
                            mapId: "bigemap.dc-tian-w-satellite",
                            infoBox: false,
                            selectionIndicator: false,
                            requestRenderMode: false,
                        });
                        if (bmgl.FeatureDetection.supportsImageRenderingPixelated()) {
                            viewer.resolutionScale = window.devicePixelRatio;
                        }
                        //开启抗锯齿,让图像更加顺滑
                        viewer.scene.postProcessStages.fxaa.enabled = true;
                        viewer.camera.setView({
                            destination:bmgl.Cartesian3.fromDegrees(114.50225830, 38.03511242,220000)
                        })
                        this.loadPolygon(viewer)
                    },
                    async loadPolygon(viewer) {
                        let ps = await fetch("/offline_data/sjz.geojson");
                        let data = await ps.json();
                        let fs = data.features;
                        let pos = fs[0].geometry.coordinates[0];
                        const gradientCanvas = this.createGradientCanvas();
                        const material = new bmgl.ImageMaterialProperty({
                            image: gradientCanvas,
                            repeat: new bmgl.Cartesian2(1, 1),
                            transparent: true
                        });
                        let ene = viewer.entities.add({
                            polygon: {
                                hierarchy: new bmgl.PolygonHierarchy(bmgl.Cartesian3.fromDegreesArray(pos.flat())),
                                material: material,
                            }
                        })
                    },
                    createGradientCanvas() {
                        const canvas = document.createElement("canvas");
                        canvas.width = 256;
                        canvas.height = 16;
                        const ctx = canvas.getContext("2d");
                        const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
                        gradient.addColorStop(0, " #a1c4fd");
                        gradient.addColorStop(1, "#c2e9fb");
                        ctx.fillStyle = gradient;
                        ctx.globalAlpha = 0.9;
                        ctx.fillRect(0, 0, canvas.width, canvas.height);
                        return canvas;
                    }
                },
                beforeDestroy() {
                    viewer.destroy();
                    viewer = null;
                },
            });
        };
    </script>
</body>

</html>