ArcGIS API for javascript（4.0）开发笔记 —— view.toScreen 转换坐标

来源：互联网发布：ie8 js错误缺少对象编辑：程序博客网时间：2024/06/05 03:53
<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">  <title>Get started with graphics - 4.0</title>  <link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">  <script src="https://js.arcgis.com/4.0/"></script>  <style>    html,    body,    #viewDiv {      padding: 0;      margin: 0;      height: 100%;      width: 100%;      position: absolute;    }  </style>  <script>    require([      "esri/Map",      "esri/views/MapView",      "esri/Graphic",      "esri/geometry/Point",      "esri/symbols/SimpleMarkerSymbol",      "dojo/domReady!"    ], function(            Map,            MapView,            Graphic,            Point,            SimpleMarkerSymbol    ) {      var map = new Map({        basemap: "hybrid"      });      var view = new MapView({        center: [-80, 35],        container: "viewDiv",        map: map,        zoom: 3      });      var point = new Point({        longitude: -49.97,        latitude: 41.73      });      var markerSymbol = new SimpleMarkerSymbol({        color: [226, 119, 40],        outline: {          color: [255, 255, 255],          width: 2        }      });      var pointGraphic = new Graphic({        geometry: point,        symbol: markerSymbol      });      view.graphics.add(pointGraphic);      view.watch("extent", function(evt){        var point = view.graphics.getItemAt(0);        if(point.geometry){          // 关键代码 点的空间参考需与地图保持一致          point.geometry.spatialReference = view.spatialReference;          var screenPoint = view.toScreen(point.geometry);          var test = document.getElementById("location") ;          test.style.top = Number(screenPoint.y) + 'px' ;          test.style.left = Number(screenPoint.x) + 'px' ;        }      });    });  </script></head><body><div id="viewDiv"></div><div id = "location" style="position: absolute;z-index: 999;background:red;">I am here!</div></body></html>
0 0