ArcGIS API For Javascript 4.15 绘制地图：在地图上绘制点和面

1、HTML 页面

## index.html<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第六讲-绘制图形</title><link rel="stylesheet" href="http://localhost/arcgis_js_api/4.15/esri/css/main.css"><link rel="stylesheet" href="css/index.css"><script src="http://localhost/arcgis_js_api/4.15/init.js"></script><script src="js/index.js"></script>
</head><body><div id="viewDiv"><div class="toolbar"><button id="drawPoint" class="tool-btn1">绘制点</button><button id="drawPolygon" class="tool-btn2">绘制面</button><button id="clearDrawings" class="tool-btn3">清除绘制</button></div></div>
</body>
</html>

2、样式设置

## index.csshtml,
body {height: 100%;width: 100%;padding: 0;margin: 0;
}#viewDiv {height: 100%;width: 100%;
}.tool-btn1 {position: absolute;top: 20px;right: 150px;
}.tool-btn2 {position: absolute;top: 20px;right: 90px;
}.tool-btn3 {position: absolute;top: 20px;right: 15px;
}

3、Javascript API 实现地图绘制

## index.jsrequire(["esri/Map","esri/views/MapView","esri/Graphic","esri/layers/GraphicsLayer","esri/views/draw/Draw","esri/geometry/Polygon","esri/geometry/Point"
], function(Map, MapView, Graphic, GraphicsLayer, Draw, Polygon, Point) {var map = new Map({basemap: "satellite"});var view = new MapView({container: "viewDiv",map: map});var graphicsLayer = new GraphicsLayer();map.add(graphicsLayer);// 绘制面图形用到的填充符号var fillSymbol = {type: "simple-fill",color: "yellow",outline: {color: "red",width: 2}};// 简单点符号var pointSymbol = {type: "simple-marker",style: "circle",size: 12,color: "blue"}var drawTool = new Draw({view: view});function showPolygon(event) {var polygon = new Polygon({rings: event.vertices,spatialReference: view.spatialReference});var polygonGraphic = new Graphic({geometry: polygon,symbol: fillSymbol});// graphicsLayer.removeAll();view.graphics.removeAll();view.graphics.add(polygonGraphic);// graphicsLayer.add(polygonGraphic);}function addPolygonGraphic(event) {var polygon = new Polygon({rings: event.vertices,spatialReference: view.spatialReference});var polygonGraphic = new Graphic({geometry: polygon,symbol: fillSymbol});view.graphics.removeAll();graphicsLayer.add(polygonGraphic);}document.getElementById("drawPolygon").addEventListener("click", function(e) {var drawAction = drawTool.create("polygon", { mode: "click" });drawAction.on("vertex-add", showPolygon);drawAction.on("vertex-remove", showPolygon);drawAction.on("cursor-update", showPolygon);drawAction.on("draw-complete", addPolygonGraphic);});document.getElementById("drawPoint").addEventListener("click", function(e) {var drawAction = drawTool.create("point");// drawAction.on("cursor-update", showPoint);drawAction.on("draw-complete", addPointGraphic);});function addPointGraphic(event) {var point = new Point({x: event.coordinates[0],y: event.coordinates[1],spatialReference: view.spatialReference});var pointGraphic = new Graphic({geometry: point,symbol: pointSymbol});graphicsLayer.add(pointGraphic);}document.getElementById("clearDrawings").addEventListener("click", function(e) {graphicsLayer.removeAll();})
});

4、实现效果

绘制点

绘制面

ArcGIS API For Javascript 4.15 绘制地图：在地图上绘制点和面相关推荐

ArcGIS API For Javascript 4.15 绘制地图：在地图上测距离、测面积和在不同图层上搜索
1.HTML 页面 ## index.html<!DOCTYPE html> <html lang="en"> <head><meta c ...
ArcGIS API For Javascript 4.15 绘制地图：结合 Echarts 绘制地形剖面图
1.HTML 页面 ## index.html<!DOCTYPE html> <html lang="en"> <head><meta c ...
ArcGIS API for JavaScript 4.X Basemap类（史上最全)
Basemap 类基础底图类,API提供了17种底图我们也可以自定义底图,代码如下. <!DOCTYPE html> <html><head><meta ...
视频教程-主流前端框架下ArcGIS API for JavaScript的开发-其他
主流前端框架下ArcGIS API for JavaScript的开发毕业于中国矿业大学地理信息科学专业.现就任于全球领先的GIS公司,主要担任地理平台研发工作,日常工作任务是ArcGIS JS A ...
19 html2canvas实现ArcGIS API for JavaScript 4.X截图功能
需求描述在我们项目开发过程中,有时候需要将地图上面绘制的元素或添加的一些图标之类的小元素进行截图保存或者展示,这时候就需要我们实现关于地图的截图功能.目前在ArcGIS API for JavaSc ...
ArcGIS API for JavaScript之基础篇（二）
ArcGIS API for JavaScript之基础篇(二) 上一篇文章介绍了Map MapView SceneView的基本知识以及简单的demo.最近几天学习了WebMap WebScene ...
基于ArcGIS API for JavaScript加载百度各种类型切片地图
文章目录应用场景需求分析效果图实现代码原理解读应用场景部分项目基于ArcGIS平台,但是甲方只提供部分矢量数据,用作底图的地形图数据没有,表示可以使用百度地图作为底图.所以才会有使用Ar ...
地图小部件—ArcGIS API for JavaScript
电子地图和传统的纸质地图最大的区别就是交互的程度不一样,而交互性很大程度上由地图的小部件所控制.传统的纸制地图主要有三个基本的部件(要素):比例尺.指北针.图例,而电子地图有更多的交互性小部件选择,在 ...
ArcGIS API for JavaScript——绘制工具（Draw）
ArcGIS API for JavaScript--绘制工具(Draw) 在WEB GIS开发过程中,我们不可避免的会用到绘制工具.比如利用绘制工具执行查询任务和利用绘制工具绘制空间分析的处理范围等 ...

ArcGIS API For Javascript 4.15 绘制地图：在地图上绘制点和面

1、HTML 页面

2、样式设置

3、Javascript API 实现地图绘制

4、实现效果

绘制点

绘制面

ArcGIS API For Javascript 4.15 绘制地图：在地图上绘制点和面相关推荐

最新文章

热门文章