初始化,每个map执行一次

PS:画点也差不多,都是用SketchViewModel,因此本demo没有专门写画点的

        drawPolygonInit: function () {
//画几何对象初始化 //新建一个图形图层用于存放画图过程中的图形
let layer = new this.apiInstance.GraphicsLayer({
//空间参考,一般要跟地图的一样
spatialReference: this.mapView.spatialReference,
});
//图层添加到地图
//PS:GraphicsLayer也是图层之一,因此也支持通用的图层功能
this.map.add(layer); //new SketchViewModel,此对象用于画图
this.sketchPolygon = new this.apiInstance.SketchViewModel({
//mapView
view: this.mapView,
//一个图形图层
layer: layer,
polygonSymbol: {
type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
color: "rgba(138,43,226, 0.8)",
style: "solid",
outline: { // autocasts as new SimpleLineSymbol()
color: "white",
width: 1
}
}
}); //绑定create-complete事件,新增画图完成时会触发
this.sketchPolygon.on("create-complete", function (event) {
//画的几何对象类型,值同开始画的create方法的参数1
let drawGeometryType = event.tool;
//画的结果的几何对象
//PS:画完后SketchViewModel创建的图形会消失,因此如果要在画完后还要显示在地图上,就要另外再编码画在地图上,SketchViewModel只会提供画的结果的几何对象
let geometry = event.geometry; //样式
//PS:其他高级样式配置请看样式的章节
let style = {
//线颜色
color: [50, 205, 50, 0.3],
outline: {
color: [255, 0, 0],
width: 1
}
}; let graphic = mapUtil.geometry.polygonToPolygonGraphic(this.apiInstance, geometry, style, this.mapView.spatialReference, null); //把图形添加到地图的图形集合
//PS:图形要在地图上显示,可以添加到两种地方。一是mapView的graphics,这是地图的图形容器。第二是创建图形图层(GraphicsLayer),然后把图形加入到图层里
this.mapView.graphics.add(graphic);
}.bind(this));
//
// //绑定update-complete事件,编辑画图完成时会触发
// this.sketchPolyline.on("update-complete", function (event) {
// //画的结果的几何对象
// //PS:画完后SketchViewModel创建的图形会消失,因此如果要在画完后还要显示在地图上,就要另外再编码画在地图上,SketchViewModel只会提供画的结果的几何对象
// let geometry = event.geometry;
//
// //后续代码略。。。
// }.bind(this));
},

开始画面

        drawPolygon: function () {
//开始画面
//参数1:画的几何类型,有值:point=点 | multipoint=多点 | polyline=线 | polygon=面 | rectangle=矩形 | circle=原型
this.sketchPolygon.create("polygon");
},

arcgis jsapi接口入门系列(8):鼠标在地图画面的更多相关文章

  1. arcgis jsapi接口入门系列(0):总览

    开发环境: arcgis jsapi版本4.9 由于我们这套代码是基于vue,webpack开发的,会有少数vue代码,但总体不影响 里面还有些我们公司的js库和html css,给出的代码不能百分百 ...

  2. arcgis jsapi接口入门系列(5):几何(点线面)基本操作

    点 point: function () { //通过wkt生成点 //wkt,代表点的坐标 let wkt = "POINT(113.566806 22.22445)"; //w ...

  3. arcgis jsapi接口入门系列(3):各种类型的图层添加

    这里说的tomcat切片,是指arcgis server切片后,把切片图片文件用tomcat发布(其他任意web服务器发布都行) //添加tomcat切片图层 addTomcatTileLayer: ...

  4. arcgis jsapi接口入门系列(2):图层基础操作

    //图层相关demo layerFun: function () { //获取地图的所有图层(不包括的图层类型:底图图层(basemaps)) let layers = this.map.layers ...

  5. arcgis jsapi接口入门系列(7):鼠标在地图画线

    初始化,每个map执行一次就行 drawPolylineInit: function () { //画几何对象初始化 //新建一个图形图层用于存放画图过程中的图形 let layer = new th ...

  6. arcgis jsapi接口入门系列(10):图形高亮

    jsapi也有提供高亮的实现接口,但这里没用,而用的是一种改变图形(graphic)样式的思路 本文实现效果是:地图有多个面图形,当鼠标移动到面的上方,面高亮显示,鼠标移出后高亮解除 初始化 //高亮 ...

  7. arcgis jsapi接口入门系列(9):可以同时显示多个的地图popup

    jsapi有提供popup功能,但缺点很多,例如地图上只能同时显示一个popup,popup内容有限制等 本文提供另一个方法,原理不用jsapi,在地图外用一个普通的div放在地图上面,再监听地图的鼠 ...

  8. arcgis jsapi接口入门系列(4):用代码在地图画点线面

    PS:用代码画点这样写是为了跟后面的用鼠标画点线面区分出来 画点 drawPointGraphic: function () { //点有多种样式:一般的点,显示文字,显示图片 //一般的点 let ...

  9. arcgis jsapi接口入门系列(6):样式

    symbol: function () { //线样式 //样式详情请看官方文档 let style = { //线颜色,支持多种格式: //CSS color string:例如"dodg ...

随机推荐

  1. c和c++字符串分割

    1.c++版本,第一个参数为待分割的字符串 , 第二个参数为分割字符串 std::vector<std::string> split(const std::string& s, c ...

  2. Microsoft Speech SDK开发包 使用

    下载开发包.我们首先从微软的官网上面下载开发包,下载地址如下: http://www.microsoft.com/en-us/download/details.aspx?id=10121我们主要下载三 ...

  3. 解除win10禁ping方法

    在局域网中,有一台电脑安装了win10操作系统,win10电脑连接网络没有问题,就是在其他电脑ping这台windows10电脑时就是ping不通,显示“请求超时.”.虽然这台windows10电脑联 ...

  4. 微信小程序开发之页面数据绑定

    js:Page( { data:{ parmer:"",             //字符串参数 userinfo:{      userphone:"",   ...

  5. Flutter实战视频-移动电商-13.首页_广告Banner组件制作

    13.首页_广告Banner组件制作 主要是做这个小广告条. 其实就是读取一个图片做一个widget放到这里 使用stlessW快速生成 定义一个变量存放图片的url地址: 这样我们的广告条就写完了 ...

  6. 关于weblogic 10.3.6.0 的漏洞复现(2)

    今天小R又学会了一个工具的使用,而且这个工具很强大很强大. 待会介绍. 一.需要的试验环境: 一台宿主机,虚拟机(kali+window2008或其他版本的windows)  1.宿主机需要的工具:B ...

  7. java多线程知识点收集-总

    1.线程与进程的关系 进程(Process):当一个程序进入内存开始运行时,就产生一个进程.进程是一个独立单元,它的资源由系统分配和调度. 线程(Thread):线程是进程的执行单元,线程在进程中是独 ...

  8. 如何将基于对话框的MFC工程改成基于BCG的

    1.stdafx.h 加入如下内容.BCGCBProInc.h间接导入了lib. 2.应用程序类的父类由CWinApp改成CBCGPWinApp.构造函数增加如下代码: 3.对话框的父类有CDialo ...

  9. Unity5自动命名Assetbundle并打包

    http://www.shihuanjue.com/?p=57 using UnityEngine; using System.Collections; using UnityEditor; usin ...

  10. Codevs 1961 躲避大龙

    1961 躲避大龙  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 你早上起来,慢悠悠地来到学校门口, ...