arcgis.js中takeScreenshot()方法使用,在3D地图中截图-1

最新推荐文章于 2024-05-21 14:15:14 发布

以为不会掉头发的詹同学

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量753

点赞数

分类专栏：方法使用文章标签： javascript 3d 前端 arcgis

本文链接：https://blog.csdn.net/qq_45062700/article/details/122302506

版权

方法使用专栏收录该内容

14 篇文章 1 订阅

订阅专栏

可以把文字和图片都截取下来，截下来的图是base64，这里方法的使用，就不多说了，直接上效果图。

截图的方法放在button点击事件中。
代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>3d地图截图</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        
        #viewDiv {
            height: 40%;
            width: 40%;
        }
        
        #viewDiv2 {
            height: 40%;
            width: 40%;
        }
    </style>
    <!-- 导入arcgis -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.22/"></script>
</head>

<body>

    <!-- <div id="viewDiv" style="visibility:visible;z-index: -1;position:absolute; border: 1px red solid;"></div> -->
    <!-- <div id="viewDiv2" style="padding:30px;visibility:hidden;z-index: -1;position:absolute; border: 1px red solid;"></div> -->
    <div id="viewDiv" style="border: 1px red solid;"></div>
    <div id="viewDiv2" style="visibility:hidden;position:absolute;border: 1px red solid;"></div>
    <button id="butId">截图</button>
    <div>
        <img id="screenshotImage" src="img/lm.png" style="padding: 50px;" />
    </div>

    <script>
        let flag;
        console.log("截图，保存地图");
        //使用arcgis.js
        require([
                "esri/Map",
                "esri/views/SceneView",
                "esri/views/MapView",
                "esri/layers/FeatureLayer",
                "esri/Graphic",
            ],
            (Map, SceneView, MapView, FeatureLayer, Graphic, Point) => {
                let centerPoint = [116, 39]; //大概是北京的经纬度

                //底层
                const map = new Map({
                    basemap: "osm" //查看地图的模式，官方还有其他的模式
                });
                //3D容器
                const view = new SceneView({
                    container: "viewDiv", //与html元素绑定
                    map: map, //设置底层
                    zoom: 15, //初始地图距离大小
                    center: centerPoint //中心点(可以取小数) ，这里设置的北京
                });


                //显示在图中的点
                let point = {
                    type: "point",
                    longitude: centerPoint[0], //longitude,latitude
                    latitude: centerPoint[1],
                }
                let pointSymbol = {
                    type: "simple-marker",
                    style: "square",
                    color: [255, 0, 0], //[255,255,255] or "blue"
                    size: "8px",
                    outline: { //外边框
                        color: [255, 255, 255],
                        width: 1
                    }
                }

                let pointGraphic = new Graphic({
                    geometry: point, //点的位置
                    symbol: pointSymbol //点的图形
                });
                view.graphics.add(pointGraphic);

                //显示在图中的文字
                let textPoint = {
                    type: "point",
                    longitude: centerPoint[0],
                    latitude: centerPoint[1],
                    hasZ: true, //开启Z轴
                    hasM: true, //以米为单位
                    z: 200 //
                }
                let textSymbol = {
                    type: "text",
                    color: "black", //[255,255,255] or "blue"
                    haloSize: "1px",
                    text: "速度：10m/s \n高度：200m",
                    xoffset: 20,
                    yoffset: 20,
                }

                let textGraphic = new Graphic({
                    geometry: textPoint, //文字的位置
                    symbol: textSymbol //文字
                });
                let xpoint = {
                    type: "point",
                    longitude: 116,
                    latitude: 39,
                    hasZ: true, //开启Z轴
                    hasM: true, //以米为单位
                    z: 200 //
                }
                let pictureSymbol1 = {
                    type: "picture-marker", // autocasts as new PictureMarkerSymbol()
                    url: "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",
                    width: "64px",
                    height: "64px"
                };
                let xpointGraphic = new Graphic({
                    geometry: xpoint, //点的位置
                    symbol: pictureSymbol1 //点的图形
                });

                //添加到容器
                view.graphics.add(xpointGraphic);
                view.graphics.add(textGraphic);

                let butId = document.getElementById("butId");
                butId.addEventListener('click', function() {
                    view.takeScreenshot().then(function(screenshot) {
                        let imageElement = document.getElementById("screenshotImage");
                        imageElement.src = screenshot.dataUrl;
                    })
                })
            })
    </script>
</body>

</html>