2021-05-13

最新推荐文章于 2024-10-15 09:47:33 发布

原创最新推荐文章于 2024-10-15 09:47:33 发布 · 331 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css3 #html5 #前端

arcgis api for javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用 ArcGIS API for JavaScript 4.x 实现 SceneView 和 MapView 的贴图功能。通过 Mesh 实现三维场景贴图，并利用 BaseDynamicLayer 实现地图视图贴图，同时提供代码示例及效果预览。

acrgis api for javascript 4.x 的“贴图”功能

前言

基于acrgis api for javascript 4.x实现对SceneView和Mapview的“贴图”功能

一、利用Mesh实现对SceneView的“贴图”

对于Mesh的中文解释是“网”的意思，官方对此功能的解释是：
网格是由具有属性的顶点组成的常规客户端3D几何类型。顶点包括地理位置，影响照明/阴影的法线和可用于将图像映射到网格的uv坐标。

代码如下（示例）：
对于不熟悉或者不了解部分api功能属性的，请自己查看官方网站解释说明（官方网站），此处不再赘述。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>SceneView贴图</title>
	//以下是我本机离线包地址，请自行更换在线包或自己本地离线包地址
  <link rel="stylesheet" href="http://localhost/arcgis4.17/esri/themes/light/main.css" />
  <script src="http://localhost/arcgis4.17/init.js"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script>
    require([
      "esri/Map",
      "esri/Basemap",
      "esri/views/SceneView",
      "esri/Graphic",
      "esri/geometry/Extent",
      "esri/geometry/Point",
      "esri/geometry/Mesh",
      "esri/geometry/SpatialReference",
      "esri/symbols/SimpleFillSymbol",
      "esri/geometry/Polygon",
      "esri/geometry/support/MeshComponent",
      "esri/geometry/support/meshUtils",
      "esri/geometry/support/MeshTexture",
      "esri/layers/GraphicsLayer"
    ], function (
      Map,
      Basemap,
      SceneView,
      Graphic,
      Extent,
      Point,
      Mesh,
      SpatialReference,
      SimpleFillSymbol,
      Polygon,
      MeshComponent,
      meshUtils,
      MeshTexture,
      GraphicsLayer
    ) {
      const extent = new Extent({
        xmax: 135.511170,
        xmin: 73.501142,
        ymax: 53.852551,
        ymin: 14.998000,
      });
      var map = new Map({
        basemap: "streets-vector"
      });
      var sr= new SpatialReference({ wkid: 3857 });
      const view = new SceneView({
        container: "viewDiv",
        map: map,
        viewingMode: "local",
        clippingArea: extent,
        spatialReference:sr,
        camera: {
          position: {
            spatialReference: SpatialReference.WebMercator,
            x: 12559766.4695,
            y: 4266058.5815,
            z: 10000000
          },
          heading: 0,
          tilt: 0
        }
      });
      const graphicsLayer = new GraphicsLayer();
      map.add(graphicsLayer);

      var uv = [0, 0, 1, 0, 1, 1, 0, 1];
      var polygonTopPointArr = [];
      var polygonBottomPointArr = [];
      var positionTopArr = [];
      var positionBottomArr = [];
      var fillSymbol = {
        type: "simple-fill",
        color: [227, 139, 79, 0.8],
        outline: {
          color: [255, 0, 0],
          width: 3
        }
      };
      //水平mesh
      const meshColorByUrlHorizontal = new MeshTexture({
        url: "land.png"//所用贴图的图片路径
      });
      var meshHorizontal = new Mesh({
        spatialReference: SpatialReference.WGS84,
        vertexAttributes: {
          position: [
          //z轴设置大点会避免贴图在地图zoom过程中闪烁的问题
          73.501142, 53.852551, 12000, //左上
            135.511170, 53.852551, 12000, //右上
            135.511170, 14.998000, 12000, //右下
            73.501142, 14.998000, 12000, //左下
          ],
          uv: uv
        },
        components: [{
            faces: [0, 1, 2],
            material: {
              colorTexture: meshColorByUrlHorizontal
            }
          },
          {
            faces: [0, 2, 3],
            material: {
              colorTexture: meshColorByUrlHorizontal
            }
          }
        ]
      });
      const graphicHorizontal = new Graphic({
        geometry: meshHorizontal,
        symbol: {
          type: "mesh-3d",
          symbolLayers: [{
            type: "fill"
          }]
        }
      });
      graphicsLayer.add(graphicHorizontal);
    });
  </script>
</head>

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

</html>

效果如下图：

二、利用BaseDynamicLayer实现对MapView的“贴图”

由于业务功能的需要，此示例涉及了一下功能点：

利用BaseDynamicLayer的功能实现对Mapview的贴图功能
利用地图（pointer-move）监听事件获取当前鼠标经过区域的geometry高亮
利用地图（pointer-move）监听事件获取当前鼠标经过区域的geometry弹窗提示相关信息以及弹窗样式修改

代码如下（示例）：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>MapView贴图渲染</title>

    <link rel="stylesheet" href="http://localhost/arcgis4.17/esri/themes/light/main.css" />
    <script src="http://localhost/arcgis4.17/init.js"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
		//修改地图弹窗样式
        .esri-component.esri-popup.esri-popup--aligned-top-center.esri-popup--shadow .esri-popup__main-container.esri-widget {
            width: auto;
            max-width: none;
        }

        .esri-popup__header-buttons {
            display: none;
        }

        .esri-popup__footer.esri-popup__footer--has-actions {
            display: none;
        }
    </style>

    <script>
        require([
            "esri/Map",
            "esri/Basemap",
            "esri/layers/BaseDynamicLayer",
            "esri/geometry/Extent",
            "esri/geometry/support/webMercatorUtils",
            "esri/geometry/SpatialReference",
            "esri/views/MapView",
            "esri/geometry/Extent",
            "esri/layers/FeatureLayer",
            "esri/layers/GraphicsLayer",
            "esri/layers/TileLayer",
            "esri/Graphic",
            "esri/geometry/Point",
        ], function (Map,
            Basemap, BaseDynamicLayer, Extent, webMercatorUtils, SpatialReference, MapView, Extent,
            FeatureLayer, TileLayer, GraphicsLayer, Graphic, Point
        ) {
            const xz = new FeatureLayer({
                url: ''//行政区划地图服务地址
            });
            var myMap = new Map({
                zoom: 8,
                minZoom: 8
            });
            const extent = new Extent({
                xmax: 135.511170,
                xmin: 73.501142,
                ymax: 53.852551,
                ymin: 14.998000,
                spatialReference: {
                    wkid: 4326
                }
            });
            var graphicsLayer = new GraphicsLayer();
            myMap.add(graphicsLayer);
            let curMapView = new MapView({
                map: myMap,
                container: "viewDiv",
                extent: extent,
                layerId: 'di'
            });
            const createWrytLayers = function (curPicUrl, curMapView, geoExtent, layerId) {
                let CustomImageOverlayLayer = BaseDynamicLayer.createSubclass({
                    properties: {
                        picUrl: null,
                        extent: null,
                        image: null,
                        canvas: null
                    },
                    getImageUrl: function (extent, width, height) {
                        if (!this.image) {
                            this.image = new Image()
                        }
                        //extent = new Extent({xmin: 73.441277, ymin: 18.159829001, xmax: 135.09105966, ymax: 53.563321521, spatialReference: {wkid: 4326}});
                        this.image.src = this.picUrl
                        // Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
                        this.image.setAttribute('crossOrigin', 'Anonymous')
                        // 创建canvas DOM元素，并设置其宽高和图片一样
                        if (!this.canvas) {
                            this.canvas = document.createElement('canvas')
                            this.canvas.setAttribute('id', 'wryt-canvas' + layerId)
                        }
                        //let clientHeight = document.documentElement.clientHeight || document.body.clientHeight
                        //let clientWidth = document.documentElement.clientWidth || document.body.clientWidth
                        // 需要覆盖屏幕    需要考虑大屏的情况  需要比屏幕尺寸大
                        this.canvas.width = 2000
                        this.canvas.height = 2000
                        // 左上角坐标转换屏幕坐标,为了获取canvas绘制图片的起点
                        let mapPoint = {
                            x: 66,
                            y: 61,
                            spatialReference: {
                                wkid: 4326
                            }
                        }
                        let screenPoint = curMapView.toScreen(mapPoint)
                        // 根据extent范围计算canvas绘制图片的宽度以及高度
                        // 左下角
                        let leftbottom = {
                            x:66,
                            y: 10.5,
                            spatialReference: {
                                wkid: 4326
                            }
                        }
                        let screen_leftbottom = curMapView.toScreen(leftbottom)
                        // 右上角
                        let righttop = {
                            x: 142.5,
                            y: 61,
                            spatialReference: {
                                wkid: 4326
                            }
                        }
                        let screen_righttop = curMapView.toScreen(righttop)
                        let context = this.canvas.getContext('2d')
                        let left = screenPoint.x
                        let top = screenPoint.y
                        let imgWidth = Math.abs(screen_righttop.x -
                            screen_leftbottom.x)
                        let imgHeight = Math.abs(screen_righttop.y -
                            screen_leftbottom.y)
                        context.drawImage(this.image, left, top, imgWidth,
                            imgHeight)
                        // 根据type参数指定的类型将包含在canvas中的图片文件编码成字符串形式
                        // type参数的默认值为image/png.如果该canvas的宽度或长度是0,则会返回字符串"data:,".
                        // 如果指定的type参数不是image/png,但返回的字符串是以data:image/png开头的,
                        // 则所请求的图片类型不支持.Chrome支持image/webp类型.如果type参数的值为image/jpeg或image/webp,
                        // 则第二个参数的值如果在0.0和1.0之间的话,会被看作是图片质量参数,如果第二个参数的值不在0.0和1.0之间,则会使用默认的图片质量
                        return this.canvas.toDataURL('image/png')
                    }
                })
                // 实例化一个叠加图片图层类
                let WrytImageLayer = new CustomImageOverlayLayer({
                    picUrl: curPicUrl,
                    id: layerId,
                    extent: geoExtent
                })

                myMap.add(WrytImageLayer)
                myMap.add(xz)
                //pointer-move鼠标hover触发事件
                curMapView.on('pointer-move', function (event) {
                    curMapView.hitTest(event).then(getGraphics);
                })
            }
            //http://localhost/demo/china.png  所需贴图的本地路径
            createWrytLayers('http://localhost/demo/china.png', curMapView, extent, curMapView.layerId)

            function getGraphics(response) {
                if (response.results.length) {
                    if (response.results[0].graphic) {
                        curMapView.graphics.removeAll();
                        //绘制高亮区域
                        const graphicHorizontal = new Graphic({
                            geometry: response.results[0].graphic.geometry,
                            symbol: {
                                type: "simple-fill",
                                color: "orange",
                                size: "12px", // pixels
                                outline: { // autocasts as new SimpleLineSymbol()
                                    color: [255, 255, 0],
                                    width: 2 // points
                                }
                            }
                        });
                        curMapView.graphics.add(graphicHorizontal);
                    }
                    if (response.results[0].mapPoint) {
                        if (response.results[0].graphic.attributes && response.results[0].graphic.attributes
                            .NAME) {
                            var title = response.results[0].graphic.attributes.NAME
                            curMapView.popup = {
                                collapseEnabled: false,
                                dockOptions: {
                                    buttonEnabled: false // 隐藏固定标签页
                                },
                                actions: [],
                                autoOpenEnabled: false
                            }
                            curMapView.popup.open({
                                title: title,
                                location: response.results[0].mapPoint
                            });
                        }
                    }
                }
            }
        })
    </script>
</head>

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

</html>