WebGIS开发

1.准备工作

高德开发API注册账号，创建项目拿到key和密钥
高德key

2.通过JS API引入高德API

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>HELLO，AMAP!</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
      }
    </style>
     <script type="text/javascript">
        window._AMapSecurityConfig = {
          securityJsCode: "「你申请的安全密钥」",
        };
      </script>
      <script src="https://webapi.amap.com/loader.js"></script>
      <script type="text/javascript">
        AMapLoader.load({
          key: "「你申请的应用Key」", //申请好的Web端开发者 Key，调用 load 时必填
          version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        })
          .then((AMap) => {
               //JS API 加载完成后获取AMap对象
          .catch((e) => {
            console.error(e); //加载错误提示
          });
      </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

3.展示地图

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>HELLO，AMAP!</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
      }
    </style>
     <script type="text/javascript">
        window._AMapSecurityConfig = {
          securityJsCode: "「你申请的安全密钥」",
        };
      </script>
      <script src="https://webapi.amap.com/loader.js"></script>
      <script type="text/javascript">
        AMapLoader.load({
          key: "「你申请的应用Key」", //申请好的Web端开发者 Key，调用 load 时必填
          version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        })
          .then((AMap) => {
               //JS API 加载完成后获取AMap对象
                const map = new AMap.Map("container", {
                    viewMode: '3D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
                    zoom: 18, // 初始化地图层级
                    center: [116.397428, 39.90923], // 初始化地图中心点,
                });
          .catch((e) => {
            console.error(e); //加载错误提示
          });
      </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

4.展示图层

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>HELLO，AMAP!</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
      }
    </style>
     <script type="text/javascript">
        window._AMapSecurityConfig = {
          securityJsCode: "「你申请的安全密钥」",
        };
      </script>
      <script src="https://webapi.amap.com/loader.js"></script>
      <script type="text/javascript">
        AMapLoader.load({
          key: "「你申请的应用Key」", //申请好的Web端开发者 Key，调用 load 时必填
          version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        })
          .then((AMap) => {
               //JS API 加载完成后获取AMap对象
              //1.2 创建图层
                const layer = new AMap.createDefaultLayer({
                    zooms: [3, 20], //可见级别
                    visible: true, //是否可见
                    opacity: 1, //透明度
                    zIndex: 0, //叠加层级
                });
                const map = new AMap.Map("container", {
                    viewMode: '3D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
                    zoom: 18, // 初始化地图层级
                    center: [116.397428, 39.90923], // 初始化地图中心点,
                    //1.3 加载图层
                    layers: [layer], //layer为创建的默认图层
                });
                //1.4 创建实时交通路况图层
                const traffic = new AMap.TileLayer.Traffic({
                    autoRefresh: true, //是否自动刷新，默认为false
                    interval: 180, //刷新间隔，默认180s
                });
                map.add(traffic); //通过add方法添加图层
               // map.remove(traffic)//通过remove方法删除图层
          .catch((e) => {
            console.error(e); //加载错误提示
          });
      </script>
  </head>
  <body>
    <button></button>
    <div id="container"></div>
  </body>
</html>

5.地图控件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>HELLO，AMAP!</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
      }
    </style>
     <script type="text/javascript">
        window._AMapSecurityConfig = {
          securityJsCode: "「你申请的安全密钥」",
        };
      </script>
      <script src="https://webapi.amap.com/loader.js"></script>
      <script type="text/javascript">
        AMapLoader.load({
          key: "「你申请的应用Key」", //申请好的Web端开发者 Key，调用 load 时必填
          version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        })
          .then((AMap) => {
               //JS API 加载完成后获取AMap对象
                const map = new AMap.Map("container", {
                    viewMode: '3D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
                    zoom: 18, // 初始化地图层级
                    center: [116.397428, 39.90923], // 初始化地图中心点,
                    pitch:45,//初始地图俯仰角度
                });
      
               // 5.1引入地图控制
               //异步加载方式，在需要的地方引入。通过AMap.plugin方法按需引入控件，在plugin回调之后使用控件功能。
               AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.HawkEye','AMap.MapType','AMap.ControlBar'],function () {
                    //ToolBar:集成了缩放，平移，定位
                    var toolbar = new AMap.ToolBar(); //缩放工具条实例化
                    var Scale = new AMap.Scale(); //比例尺
                    var HawkEye = new AMap.HawkEye(); //鹰眼
                    var MapType = new AMap.MapType(); //地图类型
                    var ControlBar = new AMap.ControlBar();//
                    //5.2添加控件
                    map.addControl(toolbar);//缩放工具
                    map.addControl(Scale);//Scale(比例尺):展示地图在当前层级和经纬度下的比例
                    map.addControl(HawkEye);//HawkEye(鹰眼):右下角地图的缩略图
                    map.addControl(MapType);
                    map.addControl(ControlBar);//ControlBar 方向盘
                });
               
          .catch((e) => {
            console.error(e); //加载错误提示
          });
      </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

6.地图事件

6.1获取经纬度

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>HELLO，AMAP!</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
      }
    </style>
     <script type="text/javascript">
        window._AMapSecurityConfig = {
          securityJsCode: "「你申请的安全密钥」",
        };
      </script>
      <script src="https://webapi.amap.com/loader.js"></script>
      <script type="text/javascript">
        AMapLoader.load({
          key: "「你申请的应用Key」", //申请好的Web端开发者 Key，调用 load 时必填
          version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        })
          .then((AMap) => {
               //JS API 加载完成后获取AMap对象
                const map = new AMap.Map("container", {
                    viewMode: '3D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
                    zoom: 18, // 初始化地图层级
                    center: [116.397428, 39.90923], // 初始化地图中心点,
                });
                //6.1监听地图的点击事件
                map.on('click',function(event){
                //获取经纬度
                console.log(`经度:${event.lnglat.lng},纬度:${event.lnglat.lat}`)
                })
          .catch((e) => {
            console.error(e); //加载错误提示
          });
      </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

7.点标记

比如省会城市会有Mark标注
在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>HELLO，AMAP!</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
      }
      //7.3自定义样式
       .custom-content-marker {
            position: relative;
            width: 25px;
            height: 34px;
        }

        .custom-content-marker img {
            width: 100%;
            height: 100%;
        }

        .custom-content-marker .close-btn {
            position: absolute;
            top: -6px;
            right: -8px;
            width: 15px;
            height: 15px;
            font-size: 12px;
            background: #ccc;
            border-radius: 50%;
            color: #fff;
            text-align: center;
            line-height: 15px;
            box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
        }

        .custom-content-marker .close-btn:hover {
            background: #666;
        }
    </style>
     <script type="text/javascript">
        window._AMapSecurityConfig = {
          securityJsCode: "「你申请的安全密钥」",
        };
      </script>
      <script src="https://webapi.amap.com/loader.js"></script>
      <script type="text/javascript">
        AMapLoader.load({
          key: "「你申请的应用Key」", //申请好的Web端开发者 Key，调用 load 时必填
          version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        })
          .then((AMap) => {
                 //7.1创建地图
                const map = new AMap.Map("container", {
                    viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
                    zoom: 18, // 初始化地图层级
                    center: [116.397428, 39.90923], // 初始化地图中心点,
                });
                //7.2自定义Marker点标记显示内容
                const markerContent = `<div class="custom-content-marker">
<img src="https://a.amap.com/lbs/static/img/doc/doc_1678970777168_d2b5c.png">
<div class="close-btn" οnclick="clearMarker()">X</div>
</div>`
                //7.4创建Marker对象
                const position = new AMap.LngLat(116.397428, 39.90923); //Marke经纬度
                const marker = new AMap.Marker({
                    position: position,
                    content: markerContent, //将 html 传给 content
                    offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
                });
                //7.5将Marker添加到地图上
                map.add(marker);
                //7.6给 Marker 绑定事件
                function clearMarker() {
                    map.remove(marker); //清除 marker
                }
                document.querySelector(".close-btn").onclick = clearMarker; //绑定点击事件
              })
          .catch((e) => {
            console.error(e); //加载错误提示
          });
      </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

8.交互式绘制点

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>HELLO，AMAP!</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
      }
      //7.3自定义样式
       .custom-content-marker {
            position: relative;
            width: 25px;
            height: 34px;
        }

        .custom-content-marker img {
            width: 100%;
            height: 100%;
        }

        .custom-content-marker .close-btn {
            position: absolute;
            top: -6px;
            right: -8px;
            width: 15px;
            height: 15px;
            font-size: 12px;
            background: #ccc;
            border-radius: 50%;
            color: #fff;
            text-align: center;
            line-height: 15px;
            box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
        }

        .custom-content-marker .close-btn:hover {
            background: #666;
        }
    </style>
     <script type="text/javascript">
        window._AMapSecurityConfig = {
          securityJsCode: "「你申请的安全密钥」",
        };
      </script>
      <script src="https://webapi.amap.com/loader.js"></script>
      <script type="text/javascript">
        AMapLoader.load({
          key: "「你申请的应用Key」", //申请好的Web端开发者 Key，调用 load 时必填
          version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        })
          .then((AMap) => {
                 //7.1创建地图
                const map = new AMap.Map("container", {
                    viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
                    zoom: 18, // 初始化地图层级
                    center: [116.397428, 39.90923], // 初始化地图中心点,
                });
                //7.2自定义Marker点标记显示内容
                const markerContent = `<div class="custom-content-marker">
<img src="https://a.amap.com/lbs/static/img/doc/doc_1678970777168_d2b5c.png">
<div class="close-btn" οnclick="clearMarker()">X</div>
</div>`
                map.on('click', function (e) {
                    //7.3创建Marker对象
                    const marker = new AMap.Marker({
                        position: e.lnglat,
                        content: markerContent, //将 html 传给 content
                        offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
                    });
                    //7.4将Marker添加到地图上
                    map.add(marker);
                })
              })
          .catch((e) => {
            console.error(e); //加载错误提示
          });
      </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

9.灵活点标记

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
    <title>HELLO，AMAP!</title>
    <style>
        html,
        body,
        #container {
            width: 90%;
            height: 90%;
        }

    </style>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "",
        };
    </script>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript">
        AMapLoader.load({
            key: "", //申请好的Web端开发者 Key，调用 load 时必填
            version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        })
            .then((AMap) => {
                //7.1创建地图
                const map = new AMap.Map("container", {
                    viewMode: '3D',
                    turboMode: false,
                    showIndoorMap: false,
                    defaultCursor: 'pointer',
                    showBuildingBlock: false,
                    zooms: [14, 20],
                    showLabel: false,
                    zoom: 16,
                    pitch: 55,
                    rotation: -45,
                    center: [116.408967, 39.880101],
                    forceVector: true,
                });
                //9.1 创建样式列表
                var stylesArray = [
                    {
                        icon: { //图标样式
                            img: "https://a.amap.com/jsapi_demos/static/resource/img/men3.png",
                            size: [16, 16], //图标的原始大小
                            anchor: "bottom-center", //锚点位置
                            fitZoom: 14, //最合适的级别 在此级别显示为图标原始大小
                            scaleFactor: 2, //地图放大一级的缩放比例系数 
                            maxScale: 2, //图片的最大放大比例，随着地图放大图标会跟着放大，最大为2
                            minScale: 1, //图片的最小缩小比例，随着地图缩小图标会跟着缩小，最小为1
                        },
                        label: { //文本标注
                            content: "百花殿", //文本内容
                            position: "BM", //文本位置相对于图标的基准点，"BM"为底部中央
                            minZoom: 15, //label的最小显示级别，即文本标注在地图15级及以上，才会显示
                        },
                    },
                    {
                        icon: {
                            img: "https://a.amap.com/jsapi_demos/static/resource/img/tingzi.png",
                            size: [48, 63],
                            anchor: "bottom-center",
                            fitZoom: 17.5,
                            scaleFactor: 2,
                            maxScale: 2,
                            minScale: 0.125,
                        },
                        label: {
                            content: "万寿亭",
                            position: "BM",
                            minZoom: 15,
                        },
                    },
                ];
                //9.2 创建样式列表的级别映射
                var zoomStyleMapping = {
                    14: 0, //14-17级使用样式 0
                    15: 0,
                    16: 0,
                    17: 0,
                    18: 1, //18-20级使用样式 1
                    19: 1,
                    20: 1,
                };
                // 9.3 加载灵活点标记的插件
                AMap.plugin(["AMap.ElasticMarker"], function () {
                    var elasticMarker = new AMap.ElasticMarker({
                        position: [116.405562, 39.881166], //点标记位置
                        styles: stylesArray, //指定样式列表
                        zoomStyleMapping: zoomStyleMapping, //指定 zoom 与样式的映射
                    });
                    map.add(elasticMarker); //添加到地图上
                    map.setFitView(); //缩放地图到合适的视野级别
                });
            })
            .catch((e) => {
                console.error(e); //加载错误提示
            });

    </script>
</head>

<body>

    <div id="container"></div>
</body>

</html>

10.矢量图形

10.1折线

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
    <title>HELLO，AMAP!</title>
    <style>
        html,
        body,
        #container {
            width: 90%;
            height: 90%;
        }
    </style>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "",
        };
    </script>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript">
        AMapLoader.load({
            key: "", //申请好的Web端开发者 Key，调用 load 时必填
            version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        })
            .then((AMap) => {
                //10.1创建地图
                const map = new AMap.Map("container", {
                    zoom: 10, //地图级别
                    center: [116.397428, 39.90923], //地图中心点
                    viewMode: "2D", //地图模式
                });
                //10.2 折线的节点配置折线路径
                var path = [
                    new AMap.LngLat(116.368904, 39.913423),
                    new AMap.LngLat(116.382122, 39.901176),
                    new AMap.LngLat(116.387271, 39.912501),
                    new AMap.LngLat(116.398258, 39.9046),
                ];
                // 10.3 创建折线 Polyline 实例
                //创建 Polyline 实例
                var polyline = new AMap.Polyline({
                    path: path,
                    strokeWeight: 2, //线条宽度
                    strokeColor: "red", //线条颜色
                    lineJoin: "round", //折线拐点连接处样式
                });
                //1.4 将折线添加至地图实例
                map.add(polyline);
            })
            .catch((e) => {
                console.error(e); //加载错误提示
            });

    </script>
</head>

<body>
    <div id="container"></div>
</body>

</html>

10.2多边形polygon

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
    <title>HELLO，AMAP!</title>
    <style>
        html,
        body,
        #container {
            width: 90%;
            height: 90%;
        }
    </style>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "",
        };
    </script>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript">
        AMapLoader.load({
            key: "", //申请好的Web端开发者 Key，调用 load 时必填
            version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        })
            .then((AMap) => {
                //10.1创建地图
                const map = new AMap.Map("container", {
                    zoom: 8.8, //地图级别
                    center: [116.397428, 39.90923], //地图中心点
                    viewMode: "2D", //地图模式
                });
                //10.2 设置多边形轮廓线的节点坐标数组
                //多边形轮廓线的节点坐标数组
                var path = [
                    new AMap.LngLat(116.368904, 39.913423),
                    new AMap.LngLat(116.387271, 39.912501),
                    new AMap.LngLat(116.398258, 39.9046),
                ];
                // 10.3  创建多边形 Polygon 实例
                //创建 Polyline 实例
                //创建多边形 Polygon 实例
                var polygon = new AMap.Polygon({
                    path: path, //路径
                    fillColor: "#fff", //多边形填充颜色
                    strokeWeight: 2, //线条宽度，默认为 2
                    strokeColor: "red", //线条颜色
                });
                //10.4 多边形 Polygon 对象添加到 Map
                //多边形 Polygon对象添加到 Map
                map.add(polygon);
                //将覆盖物调整到合适视野
                map.setFitView([polygon])
            })
            .catch((e) => {
                console.error(e); //加载错误提示
            });

    </script>
</head>

<body>

    <div id="container"></div>
</body>

</html>

11.计算距离

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>HELLO，AMAP!</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
      }
    </style>
     <script type="text/javascript">
        window._AMapSecurityConfig = {
          securityJsCode: "「你申请的安全密钥」",
        };
      </script>
      <script src="https://webapi.amap.com/loader.js"></script>
      <script type="text/javascript">
        AMapLoader.load({
          key: "「你申请的应用Key」", //申请好的Web端开发者 Key，调用 load 时必填
          version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        })
          .then((AMap) => {
               //JS API 加载完成后获取AMap对象
               //11.1创建地图
                const map = new AMap.Map("container", {
                    viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
                    zoom: 18, // 初始化地图层级
                    center: [116.434027, 39.941037], // 初始化地图中心点,
                });
                //11.2创建两个点（设置可以拖动）
                 const m1 = new AMap.Marker({
                       map:map,//将m1这个点添加到map地图上
                       draggable:true,//配置该点可以拖动
                       position:new AMap.LngLat(116.434027, 39.941037)
                    });
                  const m2 = new AMap.Marker({
                       map:map,//将m2这个点添加到map地图上
                       draggable:true,//配置该点可以拖动
                       position:new AMap.LngLat(116.461665, 39.941564)
                    });
                  //让地图根据覆盖物调整地图显示区域
                  //11.3准备一条线
                  var line = new AMap.Polyline({
                     strokeColor:'#80d8ff',//描边的颜色
                     isOutline:true,//包含轮廓
                     outerlineColor:'white'
                  })
                  line.setMap(map)
                  //11.4准备文本
                  var text = new AMap.Text({
                     text:'',
                     style:{
                       'background-color':'#29b6f6',
                       'border-color': "#e1f5fe",
                        'font-size':'16px'
                     }
                  })
                  text.setMap(map)
                   //11.5计算
                   function compute(){
                     var p1 = m1.getPosition()
                     var p2 = m2.getPosition()
                     var textPos = p1.divideBy(2).add(p2.divideBy(2))
                     var distance = Math.round(p1.distance(p2))
                     var path = [p1,p2]
                     line.setPath(path)//绘制线，根据p1，p2起始点和终点的坐标
                     text.setText('距离为：'+distance+'米')
                     text.setPosition(textPos)
                   }
                   compute()
                   m1.on('dragging',compute)
                   m2.on('dragging',compute)
                  })
                 
          .catch((e) => {
            console.error(e); //加载错误提示
          });
      </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/500176.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

pdf在浏览器上无法正常加载的问题

pdf在浏览器上无法正常加载的问题

一、背景 觉得很有意思给大家分享一下。事情是这样的&#xff0c;开发给我反馈说&#xff0c;线上环境接口请求展示pdf异常&#xff0c;此时碰巧我前不久正好在ingress前加了一层nginx&#xff0c;恰逢此时内心五谷杂陈&#xff0c;思路第一时间便放在了改动项。捣鼓了好久无果…
阅读更多...
上位机图像处理和嵌入式模块部署（qmacvisual非opencv算法编写）

上位机图像处理和嵌入式模块部署（qmacvisual非opencv算法编写）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 我们都知道&#xff0c;qmacvisual本身依赖于qtopencv的实现。大部分的界面都是依赖于qt的实现。图像算法部分&#xff0c;也是大部分都依赖于open…
阅读更多...
【最新版RabbitMQ3.13】Linux安装基于源码构建的RabbitMQ教程

【最新版RabbitMQ3.13】Linux安装基于源码构建的RabbitMQ教程

前言 linux环境 安装方式有三种&#xff0c;我们这里使用源码安装 Linux下rpm、yum和源码三种安装方式简介 个人语雀首发教程&#xff1a;https://www.yuque.com/wzzz/java/kl2zn22b42svsc6b csdn地址: https://blog.csdn.net/u013625306/article/details/137151862 安装版本…
阅读更多...
机器学习模型之逻辑回归

机器学习模型之逻辑回归

逻辑回归是一种常用的分类算法&#xff0c;尤其适用于二分类问题。逻辑回归的核心思想是通过对数几率函数&#xff08;logistic function&#xff09;将线性回归的输出映射到概率空间&#xff0c;从而实现分类。 逻辑回归的原理&#xff1a; 逻辑回归模型使用对数几率函数&am…
阅读更多...
wireshark创建显示过滤器实验简述

wireshark创建显示过滤器实验简述

伯克利包过滤是一种在计算机网络中进行数据包过滤的技术&#xff0c;通过在内核中插入过滤器程序来实现对网络流量的控制和分析。 在数据包细节面板中创建显示过滤器&#xff0c;显示过滤器可以在wireshark捕获数据之后使用。 实验拓扑图&#xff1a; 实验基础配置&#xff1…
阅读更多...
Unity-通过AB包使用SpriteAtlas图集（基于unity2018）

Unity-通过AB包使用SpriteAtlas图集（基于unity2018）

项目遇到了一个性能问题&#xff0c;需要优化UI。其中就涉及UI的合批问题&#xff0c;其中自然而然就会关联到图集的概念。旧版图集&#xff0c;Legacy Atlas&#xff0c;还没有太研究。今天主要看一下SpriteAtlas怎么使用的。 因为我们项目资源工程和Runtime是分离的&#xf…
阅读更多...
旅游管理系统|基于springBoot旅游管理系统设计与实现（附项目源码+论文）

旅游管理系统|基于springBoot旅游管理系统设计与实现（附项目源码+论文）

基于springBoot旅游管理系统设计与实现 一、摘要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本旅游管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助…
阅读更多...
国产暴雨AI服务器X3418开启多元自主可控新篇章

国产暴雨AI服务器X3418开启多元自主可控新篇章

在当前数字化转型的大潮中&#xff0c;算力作为新质生产力的重要动力引擎&#xff0c;对推动经济社会发展起着关键作用。尤其在人工智能领域&#xff0c;随着高性能、安全可控的AI算力需求持续攀升&#xff0c;国产化服务器的研发与应用显得尤为迫切。 作为国内专业的算力基础…
阅读更多...
Netty核心原理剖析与RPC实践6-10

Netty核心原理剖析与RPC实践6-10

Netty核心原理剖析与RPC实践6-10 06-粘包拆包问题&#xff1a;如何获取一个完整的网络包 本节课开始我们将学习 Netty 通信过程中的编解码技术。编解码技术这是实现网络通信的基础&#xff0c;让我们可以定义任何满足业务需求的应用层协议。在网络编程中&#xff0c;我们经常…
阅读更多...
Java八股文（高并发，分布式，JUC）

Java八股文（高并发，分布式，JUC）

Java八股文の高并发&#xff0c;分布式&#xff0c;JUC 高并发&#xff0c;分布式&#xff0c;JUC 高并发&#xff0c;分布式&#xff0c;JUC 对于高并发的系统&#xff0c;为了提高用户的体验&#xff0c;你是如何做的&#xff1f;或者说高并发的技巧你用过哪些&#xff1f; …
阅读更多...
Webpack生成企业站静态页面 - ajax请求

Webpack生成企业站静态页面 - ajax请求

一些项目因需求不同&#xff0c;如需SEO或小项目&#xff0c;使用angular、react或vue就大材小用了。可以通过webpack、gulp这些构建工具&#xff0c;也能快速完成html页面开发&#xff0c;并且也能使用less/sass/styus等样式预编译功能&#xff0c;以及将js、html分模块、分组…
阅读更多...
【昇腾系列产品应用】英码科技EA500I边缘计算盒子接口使用示例和目标检测算法演示（附视频）

【昇腾系列产品应用】英码科技EA500I边缘计算盒子接口使用示例和目标检测算法演示（附视频）

EA500I是英码科技联合华为昇腾精心打造的AI边缘计算盒子&#xff0c;其搭载昇腾310系列处理器&#xff0c;可提供20TOPS INT8 的计算能力&#xff0c;并设计了丰富的外围接口&#xff0c;包括Type-C系统调试口、LINE音频接口、USB3.0*2、千兆LAN*8、WAN*1、5G/4G、GNSS天线口、…
阅读更多...
构建ELK+Filebeat+kafka+zookeeper大数据日志分析平台

构建ELK+Filebeat+kafka+zookeeper大数据日志分析平台

主机IP 角色 所属服务层 部署服务 192.168.11.11 日志生产 采集层 filebeat 192.168.11.12 日志缓存 数据处理层、缓存层 Zookeeperkafkalogstash 192.168.11.13 192.168.11.14 日志展示 持久、检索、展示层 Logstashelasticsearchkibana 数据流向 filebeat--…
阅读更多...
git仓库太大只下载单个文件或文件夹

git仓库太大只下载单个文件或文件夹

有没有这样的苦恼&#xff1a;仓库太大&#xff0c;只想下载其中某些文件(夹)&#xff1f; 一招解决&#xff1a;bash down_folder_from_git.sh 运行前&#xff0c;先修改开头三个变量 原理: 稀疏检出 让工作树仅包含自定义的文件 #!/usr/bin/bash addrhttps://github.com/fac…
阅读更多...
时序预测 | Matlab实现CPO-BP冠豪猪算法优化BP神经网络时间序列预测

时序预测 | Matlab实现CPO-BP冠豪猪算法优化BP神经网络时间序列预测

时序预测 | Matlab实现CPO-BP冠豪猪算法优化BP神经网络时间序列预测 目录 时序预测 | Matlab实现CPO-BP冠豪猪算法优化BP神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现CPO-BP冠豪猪算法优化BP神经网络时间序列预测&#xff08;完整源码…
阅读更多...
每天五分钟卷积神经网络：如何基于滑动窗口技术完成目标的检测？

每天五分钟卷积神经网络：如何基于滑动窗口技术完成目标的检测？

汽车检测算法 现在我们想要构建一个汽车检测算法，我们希望输入到算法中一张图片，算法就可以帮助我们检测出这张图片中是否有汽车。 数据集 首先创建一个标签训练集，x是样本，y是标签。我们的训练集最好是被剪切过的图片，剪掉汽车以外的部分，使汽车居于中间位置，就是整张…
阅读更多...
安卓开机动画

安卓开机动画

目录 一、开机动画的2种模式1.1 android模式2.2 movie模式 二、开机动画代码运行位置三、删除开机动画四、自定义开机动画实践 一、开机动画的2种模式 一种是使用两张图片利用某种效果来造成动态&#xff0c;另一种则是用一个图包循环显示的方式来形成动态。当然&#xff0c;这…
阅读更多...
uinapp触底与下拉时间触发的使用

uinapp触底与下拉时间触发的使用

在UniApp中&#xff0c;onReachBottom 和 onPullDownRefresh 是两个重要的生命周期函数&#xff0c;分别用于处理页面滚动到底部时触发的事件和下拉刷新时触发的事件。 在页面的 .vue 文件中&#xff1a; <template> <view> <scroll-view scroll-y"tr…
阅读更多...
React Native框架开发APP，安装免费的图标库（react-native-vector-icons）并使用详解

React Native框架开发APP，安装免费的图标库（react-native-vector-icons）并使用详解

一、安装图标库 要使用免费的图标库&#xff0c;你可以使用 React Native Vector Icons 库。 首先&#xff0c;确保你已经安装了 react-native-vector-icons&#xff1a; npm install --save react-native-vector-iconsnpm install --save-dev types/react-native-vector-ic…
阅读更多...
Arcgis中使用NDVI阈值法提取农田shape

Arcgis中使用NDVI阈值法提取农田shape

首先有一幅NDVI影像TIFF&#xff0c;对其查看农田上的NDVI范围&#xff0c;大概是0.1以上&#xff0c;因为是12月份&#xff0c;小麦播种完1-2个月&#xff0c;此时NDVI并不是很高&#xff0c;但是树林基本叶子掉落了&#xff0c;所以比较好提取农田。 打开地图代数-栅格计算器…
阅读更多...
最新文章

Copyright @ 2022~2023