webgis开发之L7（1）

已于 2024-03-02 13:20:22 修改
阅读量451 收藏 10
点赞数 7
分类专栏： webgis开发 l7 文章标签： javascript html5 前端 开发语言 职场和发展
于 2024-03-01 20:30:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67679364/article/details/136405161
版权

AntV L7

L7·蚂蚁地理空间数据可视化

蚂蚁集团 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析引擎。

一、地图初始化

01、地图初始化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mapbox</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../../lib/mapbox.css">
    <script src="../../lib/l7.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #map{
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
    <!-- 1、给地图准备一个容器 -->
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container:'map',    //指定地图容器id
            style:'mapbox://styles/mapbox/streets-v12', //地图风格
            center:[114.30,30.50],  //地图中心坐标  
            zoom:12,    //缩放比例
        });
        
        const {Scene,Mapbox} = L7
        //L7来管理地图
        const scene = new L7.Scene({
            id:'map',
            map:new L7.Mapbox({
                mapInstance:map
            })
        })
        scene.on('click',(e)=>{
            console.log(e);
        })
    </script>
</body>
</html>

二、使用图层绘制要素

01、加载点图层

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pointLayer</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../../lib/mapbox.css">
    <script src="../../lib/l7.js"></script>
    <script src="../../lib/turf.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        button {
            position: fixed;
            top: 5px;
            left: 5px;
            z-index: 1;
        }
    </style>
</head>

<body>
    <button onclick="toLog()" style="left: 80px;">查看</button>
    <button onclick="toDel()" style="left: 160px;">删除</button>
    <button onclick="toShow()">切换</button>
    <!-- 1、给地图准备一个容器 -->
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/streets-v12', //地图风格
            center: [114.30, 30.50],  //地图中心坐标  
            zoom: 12,    //缩放比例
        });
        // 官方文档：https://l7.antv.antgroup.com/api/point_layer/pointlayer
        const { Scene, Mapbox, PointLayer,LayerSwitch } = L7
        //L7来管理地图
        const scene = new L7.Scene({
            id: 'map',
            map: new L7.Mapbox({
                mapInstance: map
            })
        })

        const data = turf.featureCollection([
            turf.point([114.34, 30.52], { num: 200 }),
            turf.point([114.35, 30.49], { num: 300 }),
            turf.point([114.355, 30.51], { num: 400 })
        ]);

        let pointLayer
        scene.on('load', () => {
            pointLayer = new PointLayer()
                .source(data)   //数据源 跟mapbox不一样，它只能放要素集合
                .shape('cylinder')
                .size(50)
                .color('red')
                // .active('blue')
                .filter('num', (num) => {
                    return num > 250
                })
            scene.addLayer(pointLayer)

            const layerSwitch = new LayerSwitch({
                layers: [pointLayer],
            });
            scene.addControl(layerSwitch);
        })

        function toLog() {
            console.log(pointLayer);
        }
        function toDel() {
            scene.removeLayer(pointLayer)   //删除图层
        }
        let isShow = true
        // 控制图层显隐
        function toShow() {
            if (isShow) {
                pointLayer.hide()
                isShow = !isShow
            } else {
                pointLayer.show()
                isShow = !isShow
            }
        }
    </script>
</body>

</html>

02、加载面图层

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mapbox</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../../lib/mapbox.css">
    <script src="../../lib/l7.js"></script>
    <script src="../../lib/turf.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <!-- 1、给地图准备一个容器 -->
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/streets-v12', //地图风格
            center: [114.30, 30.50],  //地图中心坐标  
            zoom: 4,    //缩放比例
            projection: 'mercator',
        });
        // 官方文档：https://l7.antv.antgroup.com/api/point_layer/pointlayer
        const { Scene, Mapbox, PointLayer,PolygonLayer } = L7
        //L7来管理地图
        const scene = new L7.Scene({
            id: 'map',
            map: new L7.Mapbox({
                mapInstance: map
            })
        })

        const data = turf.featureCollection([
            turf.point([114.34, 30.52], { num: 200 }),
            turf.point([114.35, 30.49], { num: 300 }),
            turf.point([114.355, 30.51], { num: 400 })
        ]);

        
        const colors = ['#303841', '#ff2e63', '#30e3ca', '#fcbad3', '#aa96da', '#cca8e9', '#ff9a00', '#625772', '#b61aae', '#a7ff83', '#ba52ed']
        scene.on('load', () => {
            fetch('中国.json').then(res=>res.json()).then(res=>{
                let layer = new PolygonLayer()
                    .source(res)
                    .color('name',colors)   //用name字段 映射 得到一个颜色
                    // ['a','b','c'] -----> [1,2,3,4]
                    .active(true)
                    .style({
                        opacity:0.5
                    })
                scene.addLayer(layer)
            })
        })

    </script>
</body>

</html>

03、加载logo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zhongdi Layer</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../../lib/mapbox.css">
    <script src="../../lib/l7.js"></script>
    <script src="../../lib/turf.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        button {
            position: fixed;
            top: 5px;
            left: 5px;
            z-index: 1;
        }
    </style>
</head>

<body>
    <button onclick="toLog()" style="left: 80px;">查看</button>
    <button onclick="toDel()" style="left: 160px;">删除</button>
    <button onclick="toShow()">切换</button>
    <!-- 1、给地图准备一个容器 -->
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/streets-v12', //地图风格
            center: [114.30, 30.50],  //地图中心坐标  
            zoom: 12,    //缩放比例
        });
        // 官方文档：https://l7.antv.antgroup.com/api/point_layer/pointlayer
        const { Scene, Mapbox, PointLayer,PolygonLayer } = L7
        //L7来管理地图
        const scene = new L7.Scene({
            id: 'map',
            map: new L7.Mapbox({
                mapInstance: map
            })
        })

        const data = turf.featureCollection([
            turf.point([114.34, 30.52], { num: 200 }),
            turf.point([114.35, 30.49], { num: 300 }),
            turf.point([114.355, 30.51], { num: 400 })
        ]);

        let pointLayer
        scene.on("loaded", () => {
            fetch("http://39.103.151.139:8000/gis/zhongdi").then(res => res.json())
                .then(data => {
                    // console.log(data);
                    // map.center([data.properties.center[0],data.properties.center[1]])
                    const zhongdiLayer = new PolygonLayer();
                    zhongdiLayer.source(data)
                        .color("#652e80")
                        .shape("extrude")   //把平面拉伸成柱体
                        // .size(200)
                        /* 可以直接获取properties中的参数 */
                        .size("people", p => {
                            console.log(p)
                            return p / 5;
                        })
                    scene.addLayer(zhongdiLayer)
                })
        })

        function toLog() {
            console.log(pointLayer);
        }
        function toDel() {
            scene.removeLayer(pointLayer)   //删除图层
        }
        let isShow = true
        // 控制图层显隐
        function toShow() {
            if (isShow) {
                pointLayer.hide()
                isShow = !isShow
            } else {
                pointLayer.show()
                isShow = !isShow
            }
        }
    </script>
</body>

</html>

三、组件

01、标注与弹框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zhongdi Layer</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../../lib/mapbox.css">
    <script src="../../lib/l7.js"></script>
    <script src="../../lib/turf.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        button {
            position: fixed;
            top: 5px;
            left: 5px;
            z-index: 1;
        }
    </style>
</head>

<body>
    <!-- 1、给地图准备一个容器 -->
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/streets-v12', //地图风格
            center: [114.30, 30.50],  //地图中心坐标  
            zoom: 12,    //缩放比例
        });
        // 官方文档：https://l7.antv.antgroup.com/api/point_layer/pointlayer
        const { Scene, Mapbox, Marker, Popup } = L7
        //L7来管理地图
        const scene = new L7.Scene({
            id: 'map',
            map: new L7.Mapbox({
                mapInstance: map
            })
        })

        scene.on('loaded', () => {
            const marker = new Marker()
            marker.setLnglat([114.30, 30.5])
            scene.addMarker(marker)

            const popup = new Popup({
                offsets: [0, 45],
                // 初始锚点经纬度
                lngLat: {
                    lng: 114.30,
                    lat: 30.5,
                },
                // Popup 标题
                title: 'Popup Title',
                // Popup 内容
                html: '武汉',
            })
            scene.addPopup(popup)

        });
    </script>
</body>

</html>

02、地图控件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zhongdi Layer</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../../lib/mapbox.css">
    <script src="../../lib/l7.js"></script>
    <script src="../../lib/turf.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        button {
            position: fixed;
            top: 5px;
            left: 5px;
            z-index: 1;
        }
    </style>
</head>

<body>
    <!-- 1、给地图准备一个容器 -->
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/streets-v12', //地图风格
            center: [114.30, 30.50],  //地图中心坐标  
            zoom: 12,    //缩放比例
        });
        // 官方文档：https://l7.antv.antgroup.com/api/point_layer/pointlayer
        const { Scene, Mapbox, Marker, Popup,Zoom,Scale,MapTheme } = L7
        //L7来管理地图
        const scene = new L7.Scene({
            id: 'map',
            map: new L7.Mapbox({
                mapInstance: map
            })
        })

        scene.on('loaded', () => {
            const zoom = new Zoom({
                zoomInTitle: '放大',
                zoomOutTitle: '缩小',
            });
            scene.addControl(zoom);

            const scale = new Scale({
                zoomInTitle: '放大',
                zoomOutTitle: '缩小',
            });
            scene.addControl(scale);

            const mapTheme = new MapTheme({           
            })
            scene.addControl(mapTheme)
        });
    </script>
</body>

</html>

03、画笔

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zhongdi Layer</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../../lib/mapbox.css">
    <script src="../../lib/l7.js"></script>
    <script src="../../lib/l7-draw.js"></script>
    <script src="../../lib/turf.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        button {
            position: fixed;
            top: 5px;
            left: 5px;
            z-index: 1;
        }
    </style>
</head>

<body>
    <!-- 1、给地图准备一个容器 -->
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/streets-v12', //地图风格
            center: [114.30, 30.50],  //地图中心坐标  
            zoom: 12,    //缩放比例
        });
        // 官方文档：https://l7.antv.antgroup.com/api/point_layer/pointlayer
        const { Scene, Mapbox, Marker, Popup, Zoom, Scale } = L7
        //L7来管理地图
        const scene = new L7.Scene({
            id: 'map',
            map: new L7.Mapbox({
                mapInstance: map
            })
        })

        const { DrawPoint, DrawEvent,DrawLine,DrawPolygon,DrawRect,DrawCircle } = L7.Draw

        let draw = new DrawPoint(scene, {})
        draw.enable()   //激活画笔
        draw.on(DrawEvent.Change, (arr) => {
            if (arr.length == 3) {
                draw.disable(); //取消画笔
                // draw.clear()    //清除画笔要素
                // draw.destroy()  //销毁画笔，画布的内容也没有了
                // 转换为 GeoJSON 对象
                const geojson = turf.featureCollection(arr);
                console.log(arr);


                // 将 GeoJSON 转换为 JSON 字符串
                // const jsonStr = JSON.stringify(geojson, null, 2);

                // // 创建Blob对象
                // const blob = new Blob([jsonStr], { type: 'application/json' });

                // // 创建URL对象
                // const url = URL.createObjectURL(blob);

                // // 创建一个<a>元素并设置下载属性
                // const a = document.createElement('a');
                // a.href = url;
                // a.download = 'output.json';

                // // 将<a>元素添加到DOM中
                // document.body.appendChild(a);

                // // 模拟点击下载
                // a.click();

                // // 清理
                // document.body.removeChild(a);
                // URL.revokeObjectURL(url);
            }
            // console.log(arr);
        })

        // 画线
        // let draw = new DrawLine(scene,{
        //     distanceOptions:{}  // 展示距离
        // })
        // draw.enable()

        // 画面
        // let draw = new DrawPolygon(scene,{
        //     distanceOptions:{},
        //     areaOptions:{}  // 展示面积
        // })
        // draw.enable()

        // 画矩形
        // let draw = new DrawRect(scene,{
        //     distanceOptions:{},
        //     areaOptions:{}  // 展示面积
        // })
        // draw.enable()

        // 画圆
        // let draw = new DrawCircle(scene,{
        //     distanceOptions:{},
        //     areaOptions:{}  // 展示面积
        // })
        // draw.enable()
        // draw.on(DrawEvent.Change,(arr)=>{
        //     const geojson = turf.featureCollection(arr)
        //     console.log(arr);
        // })

    </script>
</body>

</html>

李佩锦peijin
关注
  • 7
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nuxt使用antv-l7踩坑
凝神长老和他的朋友们
12-24 1027
nuxt.js 下使用 antv-l7 实在是有太多的坑了，官方文档也不是很全，只能不断摸索和尝试，下面我把这些坑记录下来，也许能帮到你。 这些解决方案不会是唯一解，也不见得是最优解，但至少解决了我的问题，而且还保留了代码的相对整洁和高效。如果你有更好的解决方案，欢迎留言；如果未来官方修复了这些问题，或者提供了更好的使用方法，那请忽略这篇文章。 nuxt 下只能通过 plugin 的方式引入 l7 不能直接用 import { Scene } from '@antv/l7' 这样的方法，在任何地方都不行，会
webgis开发之L7-加载图层专用
03-01
webgis开发之L7-加载图层专用
【基于AntV L7实现WebGIS扫描地类效果】
qq_22865879的博客
07-06 372
最近大屏展示需要点震撼点的效果；狂肝6小时基于antv l7初步实现，记录点滴。
Antv L7 + mapbox 实现简单地图场景
07-18
Antv L7 + mapbox 实现简单地图场景
antV L7 控制不同图层的显隐
Working_hard_111的博客
08-29 801
antV L7 多选框控制图层的显隐
vue3-mapboxgl-antv-L7开发（二）控件的添加
ycc211215的博客
09-01 442
MapTheme 会根据当前地图底图类型（如 Mapbox、GaodeMapV2），默认展示相对应的默认主题选项，用于也可以传入自定义的主题选项。customAttribution配置属性：可以是一个字符串或者字符串数组。这个控件可以添加自定义的文字属性到地图中，默认显示在地图的右下方。解决方案：在调试下找到这个标签的类名，单独设置样式。比例尺组件会随这缩放宽度发生变化。
antv l7 加载图层报错以及加载地图不出现问题记录和报错解决的步骤分享
qq_43557302的博客
09-04 925
antv l7 加载图层报错以及加载地图不出现问题记录和报错解决的步骤分享
webgis开发之L7（2）自定义图标
03-02
webgis开发之L7（2）自定义图标
webgis开发之L7（2）流线图数据
03-02
webgis开发之L7（2）流线图数据
webgis开发.rar
07-07
本压缩包“webgis开发.rar”提供了关于使用ArcGIS for JavaScript进行WebGIS开发的学习资源，包括服务器搭建、ArcGIS Server服务器扩展以及SOE（Service Object Extensions）开发等内容。 首先，让我们深入理解...
vue+antVL7地图组件化.zip
12-14
这个主要是antV/l7绘制的北京地图+散点数据，北京地图封装成了一个组件，在调用时，只需要传入相应的JSON数据就可以了，数据格式在代码中有说明。下载后直接npm install，然后npm run dev。
三维webgis开发-Cesium
08-16
基于cesium的三维webgis开发讲解
antV L7 聚合图使用(含自定义简单数据）
Working_hard_111的博客
12-22 1348
使用简单json数据实现聚合图
antv/l7 -- 地图功能
m0_67011584的博客
01-05 2155
/ 开启默认高亮效果// 开启并设置高亮颜色为红色zIndex: 4, // 设置显示层级}).size(2)// 设置点击生效});});
蚂蚁金服 AntV 开源地理可视化引擎 L7 2.0 发布
寒冰屋的专栏
11-28 2639
导读 L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。 可视化效果概览 L7 经过一年的...
分享 | MapGIS高频问题集锦
smaryun的博客
03-31 356
MapGIS高频问题处理小技巧： 问题一、问题描述： 如果模型没有正确的坐标信息，与参考图层不在统一位置，该如何实现模型与参考图层的位置匹配？问题分析： 模型如果没有正确的坐标信息可通过矢量校正功能，将模型配准到正确的位置。解决方法： 1、打开模型数据、参考图层数据，查看坐标信息。 2、进行误差校正。 3、添加原始图层（需要校正的模型）和参考图层，并设置为采集状态。 4、点击输入控制点，采集实际控制点与理论控制点，形成模型与参照图层的坐标对照关系。 5、控制点选取完.
three.js实战-shader实现antv L7城市扫光效果
weixin_46773434的博客
10-24 3172
上图我们可以看到一个个的光波从城市中心像远处扩散，光波略过的高楼与地面会呈现高亮的状态，并且根据光波的宽度(大圈的半径 - 小圈的半径)高亮还呈现出渐变的状态。在WebGL编程指南-27 逐片元处理点光源光照效果我们知道，点光源照射在物体上的明暗效果，是通过该片元到顶点距离跟顶点法线来决定的，那我们可以借此思路来实现，大致思路是一个不断变大的圆，这个圆分大圆与小圆，在大圆与小圆之间的片元呈高光效果我们借助three.js官网提供的一个例子画出城市，在此例子基础上实现扫光效果 2. 给大楼添加纹理贴图 3.
一、vue3使用L7地图
Yugoup的博客
01-22 725
vue3使用L7地图
AntV L7构建中地大楼
热爱WebGIS的博客
03-17 1036
本案例使用库和构建中地大楼。
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 393
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值