0304-二维地图开发-涂鸦(地图标绘)_基于地图的涂鸦组件_啄慕鸟kevinzeng的博客-程序员宅基地

技术标签： WebGIS地图开发解读WebGIS应用开发与领域应用 ArcGIS API for JavaScript 4.6

能不能在地图上涂个鸦？我们先看下面这张图：
这里写图片描述
在上面这张图其实是用点、线和多边形几个图形来绘制出来。在地图上绘制点、线和多边形是基本的功能需求，对于开发者来说，经常会用到，譬如在地图上打点标注、绘制行进的线路、标绘安保区域等等，当然你也可以向我这样很二的来个素描。
言归正卷，要绘制简单的几何图形，就得有工具。目前API里提供了两个工具，一个是简单的，一个是高级的。
- 简单的用SketchViewModel。SketchViewModel简化了将临时几何图形添加到MapView的过程,它节省了大量编写不同几何类型的代码的工作量。要使用SketchViewModel，只需要配置对应的GraphicsLayer，以及点、线、多边形的符号。
- 复杂的用Draw。Draw接口提供针对节点进行编辑的高级功能，特别适合在线的要素编辑，对于传统的地信行业用户来说是一个福音。具体的Draw使用后续再专门讲解。
完整的代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>二维地图开发-素描点、线与多边形</title>
    <link rel="stylesheet" href="http://192.168.1.144/4.6/esri/css/main.css" />
    <style>
      html,
      body,
      #mapViewDiv {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        color:#8E980F;
      }
      #sketchToolsDiv {
        background: #fff;
        position: absolute;
        top: 15px;
        right: 15px;
        padding: 10px;
      }

      .action-button {
        font-size: 16px;
        background-color: transparent;
        border: 1px solid #D3D3D3;
        color: #6e6e6e;
        height: 32px;
        width: 32px;
        text-align: center;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
      }

      .action-button:hover,
      .action-button:focus {
        background: #0079c1;
        color: #e4e4e4;
      }

      .active {
        background: #0079c1;
        color: #e4e4e4;
      }
    </style>
    <script src="http://192.168.1.144/4.6/dojo/dojo.js"></script>
    <script>
      var myMap, mapView;

      require([
        "esri/Basemap",
        "esri/layers/TileLayer",
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/Sketch/SketchViewModel",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "dojo/domReady!"
      ], function (Basemap, TileLayer, Map, MapView, SketchViewModel, Graphic, GraphicsLayer){
     

        //  *************************************
        //  TileLayer接口负责加载ArcGIS Server发布的MapServer缓存切片服务
        //  http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer是GeoQ提供的以中国区域为主的缓存切片服务
        //  TileLayer将作为Basemap对象的一个图层添加到Map对象中。
        //  *************************************
        var layer = new TileLayer({
          url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer"
        });

        //  *************************************
        //  Basemap:负责管理所有自定义的基础地图
        //  我们可以把所有的基础地图都放在Basemap对象中
        //  每个基础地图服务在Basemap对象中都作为一个图层
        //  *************************************
        var customBasemap = new Basemap({
          baseLayers: [layer],
          title: "基础地图",
          id: "gisBasemap"
        });

        myMap = new Map({
          basemap: customBasemap
        });

        mapView = new MapView({
          center: [113.293701, 23.096313], //初始化地图居中时的中心经度、维度
          container: "mapViewDiv",    //地图展示区域，对应页面上的DIV
          map: myMap,   //MapView包含Map对象
          zoom: 18     //初始显示地图级别
        });

        //  *************************************
        //  定义有一个GraphicsLayer，它的职能是作为存储在地图上绘制的点、线、多边形要素.
        //  GraphicsLayer简称客户端图层，它所保存的要素全部在浏览器端绘制。
        //  *************************************
        sketchGraphicsLayer = new GraphicsLayer();
        myMap.add(sketchGraphicsLayer);

        //监听地图在加载完成之后，再初始化SketchViewModel
        mapView.when(function() {
     

          // *************************************
          // SketchViewModel简化了将临时几何图形添加到MapView的过程,它节省了大量编写不同几何类型的代码的工作量。
          // 要使用SketchViewModel，只需要配置对应的GraphicsLayer，以及点、线、多边形的符号。
          // *************************************
          var sketchViewModel = new SketchViewModel({
              view: mapView,
              sketchayer: sketchGraphicsLayer,
              pointSymbol: { //配置点符号
                type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                style: "circle",
                color: "#0413F9",
                size: "26px",
                outline: { // autocasts as new SimpleLineSymbol()
                  color: "#DBDBDB",
                  width: 1 // points
                }
              },
              polylineSymbol: { // symbol used for polylines
                type: "simple-line", // autocasts as new SimpleMarkerSymbol()
                color: "#9D9C9B",
                width: "4",
                style: "dash"
              },
              polygonSymbol: { // symbol used for polygons
                type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
                color: "#FCA800",
                style: "solid",
                outline: {
                  color: "white",
                  width: 1
                }
              }
        });

        //************************************************************
        //监听鼠标绘制完成事件
        //当绘制完成后，把绘制的图形添加到地图上
        //注意，如果是绘制线的话，使用鼠标右键绘制，点击鼠标左键完成绘制
        //***********************************************************
        sketchViewModel.on("draw-complete", function(evt) {
     
          // add the graphic to the graphics layer
          sketchGraphicsLayer.add(evt.graphic);
          setActiveButton();
        });

        // *************************************
        // 监听绘制点按钮鼠标点击事件
        // 当点击该按钮时，激活sketchViewModel的点绘制功能
        // *************************************
        var drawPointButton = document.getElementById("pointButton");
        drawPointButton.onclick = function() {
     
          // set the sketch to create a point geometry
          sketchViewModel.create("point");
          setActiveButton(this);
        };

        // ****************************************
        // 监听绘制线按钮鼠标点击事件
        // 当点击该按钮时，激活sketchViewModel的线绘制功能
        // ****************************************
        var drawLineButton = document.getElementById("polylineButton");
        drawLineButton.onclick = function() {
     
          // set the sketch to create a polyline geometry
          sketchViewModel.create("polyline");
          setActiveButton(this);
        };

        // ***************************************
        // 监听绘制多边形按钮鼠标点击事件
        // 当点击该按钮时，激活sketchViewModel的多边形绘制功能
        // ***************************************
        var drawPolygonButton = document.getElementById("polygonButton");
        drawPolygonButton.onclick = function() {
     
          // set the sketch to create a polygon geometry
          sketchViewModel.create("polygon");
          setActiveButton(this);
        };

        // **************
        // 清除在地图上绘制的图形
        // **************
        document.getElementById("resetBtn").onclick = function() {
     
          sketchGraphicsLayer.removeAll(); //删除GraphicsLayer中的所有要素
          sketchViewModel.reset();  //重新恢复sketchViewModel的初始状态
          setActiveButton();
        };

        /**
         * 激活按钮，以提醒当前在使用的工具
         * @param electedButton 
         */
        function setActiveButton(selectedButton) {
     
          // focus the view to activate keyboard shortcuts for sketching
          mapView.focus();
          var elements = document.getElementsByClassName("active");
          for (var i = 0; i < elements.length; i++) {
            elements[i].classList.remove("active");
          }
          if (selectedButton) {
            selectedButton.classList.add("active");
          }
        }
      });
      });
    </script>
  </head>
  <body>
    <div id="mapViewDiv">
    </div>
    <div id="sketchToolsDiv">
      <button class="action-button esri-icon-blank-map-pin" id="pointButton" type="button"
        title="绘制点"></button>
      <button class="action-button esri-icon-polyline" id="polylineButton" type="button"
        title="绘制线"></button>
      <button class="action-button esri-icon-polygon" id="polygonButton" type="button"
        title="绘制多边形"></button>
      <button class="action-button esri-icon-trash" id="resetBtn" type="button" title="清除"></button>
    </div>
  </body>
</html>

代码量很少，都已经写了注释，所以这里就不过多阐述。需要提醒一点的是API中涉及到的组件按钮，Esri在设计之初都已经提供了相应的CSS样式，譬如下面这个按钮：

<button class="action-button esri-icon-blank-map-pin" id="pointButton" type="button" title="绘制点"></button>

就用到了action-button esri-icon-blank-map-pin这个样式，省去了再去设计按钮样式的麻烦，而且按钮的样式设计的也很美观，对于刚刚接入地图开发的开发者来说，是一个福音，先实现功能，界面还不错，先实现个小目标再说。

本文链接：https://blog.csdn.net/peckerzeng/article/details/79289082

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

HDOJ题目分类_？？。， 1571+1类似于我了吧_mirror58229的博客-程序员宅基地

转自：http://blog.csdn.net/liangzhaoyang1/article/details/51036037HDOJ题目分类：模拟题, 枚举1002 1004 1013 1015 1017 1020 1022 1029 1031 1033 1034 1035 1036 1037 1039 1042 1047 1048 1049 1050 1057 1062 106

java SpringBoot 集成阿里云视频直播完成直播功能_千鹤开发日志_千鹤m的博客-程序员宅基地

经历了几天的周折，近期才把项目完成，在这里与大家分享一下踩坑之路，也方便日后有类似项目，可以借阅一番开发直播前先满足已下条件 1.开通视频直播功能 2.购买好了OSS存储 3.购买两个域名并且备案好,一个用来拉流,一个用来播流, 4.建议CNAM加速也设置好这样直播没那么卡该项目是一个H5直播，采用m3u8格式完成直播的展示。通过推流地址，借助第三方推流工具实现直播效果，比如：OBS 或者一些微信小...

服务器数据怎么展示到微信,微信小程序连接服务器展示MQTT数据信息的实现_螺旋真理的博客-程序员宅基地

一、实现工具——微信开发者工具为何使用微信小程序作为展示？(1)范围广且能跨平台访问;(2)小而快能够快速的访问;二、实现步骤1、总体大概：(1)界面设计：数据直观展示+历史数据+物联网调试信息(2)连接服务器与回调利用wx.request(Object object)发起 HTTPS 网络请求。参数：url：开发者服务器接口地址；data：请求的参数；header：设置请求的 header，...

gsoap开发web service客户端发送短信乱码_凛寒的博客-程序员宅基地

1. 问题Linux下利用gsoap开发web service客户端，服务器端为发送短信的功能。开发过程：https://blog.csdn.net/g1269420003/article/details/81317632可以成功发送短信，但发送中文接收到的是乱码，服务器端接收到的也是乱码。我的Linux环境locale设置为utf-8，多次修改locale设置，结果仍然无法发送中...

攻击态势下解析DDOS高防IP系统架构_qq_38461232的博客-程序员宅基地

DDoS防御发展史DDoS（Distributed Denial of Service，分布式拒绝服务）主要通过大量合法的请求占用大量网络资源，从而使合法用户无法得到服务的响应，是目前最强大、最难防御的网络攻击之一。有需要购买阿里云DDOS高防或其它任何产品，领取专属优惠代金券！领取地址：https://blog.csdn.net/qq_38461232/article/detail...

Elasticsearch实战(五)-倒排索引与分词_JavaEdge.的博客-程序员宅基地

1 倒排索引1.1 书的目录和索引正排索引即目录页，根据页码去找内容倒排索引即索引页，根据关键词去找对应页码1.2 搜索引擎正排索引文档Id =》文档内容、单词的关联关系倒排索引单词 =》文档Id的关联关系左：正排索引 =》右：倒排索引倒排索引查询流程查询包含"搜索引擎”的文档通过倒排索引获得"搜索引擎”对应的文档Id有1和3通过正排索引查询1和3的完整内容返回最终结果1.3 倒排索引的组成1.3.1 单词词典( Term Dictionar

随便推点

EF第一次加载较慢的原因以及解决方法（汇）_星辰_mya的博客-程序员宅基地

前言：这个问题没有遇到过，但是面试当中很可能会被问到，当然也不主要是为了应对面试，学到知识才是王道为什么会慢：在应用程序中定义的每个上下文，其首次使用时，JUST-INTIME编译器：Entity Framework都会根据数据库中的信息在内存中生成一个映射视图（mapping views），这个操作非常耗时。定义的每一个上下文都会受此困扰 1、Code First第一次启动

内生转换回归（ESR）模型的估计、计算ATT、ATU、ATE-附案例数据、do文件_esr模型估计_成长之路514的博客-程序员宅基地

1、数据来源：自主计算2、时间跨度：无3、区域范围：无4、指标说明：部分数据如下：相关研究：[1]才国伟, 刘冬妍. 劳动合同对农民工收入的影响机制研究——基于内生转换回归模型的实证分析[J]. 中国社会科学院研究生院学报, 2014(4):54-64.[2]冯志坚, 莫旋. 养老保险对乡城流动人口劳动供给的影响——基于内生转换回归模型的分析[J]. 人口与经济, 2019, 000(004):14-29.[3]韩军辉, 李锦. 自选择、非农就业城乡转换及工资差距[J]. 云南财经大学学报, 2015, 0

2.7 SLD参考标准与GeoServer扩展_sld 1.0.0_q237895772的博客-程序员宅基地

SLD参考标准与GeoServer扩展最开始的SLD 1.0.0版本在《OGC Styled Layer Descriptor ImplementationSpecification》中定义，该文档的下载地址为：http://portal.opengeospatial.org/files/?artifact_id=1188。之后SLD 1.1.0分为两个规范：《OGC Symbology Encoding ImplementationSpecification》和《OGC Styled Layer