arcgis jsapi接口入门系列(8):鼠标在地图画面
初始化,每个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):鼠标在地图画面的更多相关文章
- arcgis jsapi接口入门系列(0):总览
开发环境: arcgis jsapi版本4.9 由于我们这套代码是基于vue,webpack开发的,会有少数vue代码,但总体不影响 里面还有些我们公司的js库和html css,给出的代码不能百分百 ...
- arcgis jsapi接口入门系列(5):几何(点线面)基本操作
点 point: function () { //通过wkt生成点 //wkt,代表点的坐标 let wkt = "POINT(113.566806 22.22445)"; //w ...
- arcgis jsapi接口入门系列(3):各种类型的图层添加
这里说的tomcat切片,是指arcgis server切片后,把切片图片文件用tomcat发布(其他任意web服务器发布都行) //添加tomcat切片图层 addTomcatTileLayer: ...
- arcgis jsapi接口入门系列(2):图层基础操作
//图层相关demo layerFun: function () { //获取地图的所有图层(不包括的图层类型:底图图层(basemaps)) let layers = this.map.layers ...
- arcgis jsapi接口入门系列(7):鼠标在地图画线
初始化,每个map执行一次就行 drawPolylineInit: function () { //画几何对象初始化 //新建一个图形图层用于存放画图过程中的图形 let layer = new th ...
- arcgis jsapi接口入门系列(10):图形高亮
jsapi也有提供高亮的实现接口,但这里没用,而用的是一种改变图形(graphic)样式的思路 本文实现效果是:地图有多个面图形,当鼠标移动到面的上方,面高亮显示,鼠标移出后高亮解除 初始化 //高亮 ...
- arcgis jsapi接口入门系列(9):可以同时显示多个的地图popup
jsapi有提供popup功能,但缺点很多,例如地图上只能同时显示一个popup,popup内容有限制等 本文提供另一个方法,原理不用jsapi,在地图外用一个普通的div放在地图上面,再监听地图的鼠 ...
- arcgis jsapi接口入门系列(4):用代码在地图画点线面
PS:用代码画点这样写是为了跟后面的用鼠标画点线面区分出来 画点 drawPointGraphic: function () { //点有多种样式:一般的点,显示文字,显示图片 //一般的点 let ...
- arcgis jsapi接口入门系列(6):样式
symbol: function () { //线样式 //样式详情请看官方文档 let style = { //线颜色,支持多种格式: //CSS color string:例如"dodg ...
随机推荐
- PHP mysql_fetch_array与mysql_fetch_row的区别
如果你的表里面有字段a,b,c那么你用mysql_fetch_row() 就返回array(1=>a的值,2=>b的值,3=>c的值)这个时候你读数组的话,只能这样写$array[1 ...
- 如何给容器服务的Docker增加数据盘
如何给容器服务的Docker增加数据盘 摘要: 我们知道Docker的数据是通过联合文件系统的方式存储到磁盘上,当需要在机器上运行的容器或者镜像的数量不断增加时,有可能磁盘的大小不再满足需求,这个时候 ...
- 比利牛斯獒犬 flask web
1. 使用 session.get('name') 直接从会话中读取 name 参数的值.和普通的字典一样,这里使用 get() 获取字典中键对应的值以避免未找到键的异常情况,因为对于不存在的键, g ...
- Java字符串理解
1. 字符串基本知识 用java.lang.String类的对象表示字符串 字符串类型不是基本类型, 而是引用类型(类似于数组和对象) Java基于Unicode字符集 2. 字符串创建 public ...
- python_学习笔记
1,多态:对不同类的对象使用同样的操作,但使用函数显示地检查类型能够毁掉多态(eg: type,isinstance,issubclass) 封装:多态让用户对于不知道是什么类的对象进行方法调用,而封 ...
- Java SE ,Java EE和Java ME 的区别
JAVA 语言版本 Java SE (J2SE)(Java2 Platform Standard Edition,java平台标准版): 包含标准的 JDK.开发工具.运行时环境和类库.适合开发桌面 ...
- 【HBase】HBase笔记:HBase的Region机制
HBase 的机制里包含了许多优秀的算法,如 Region 定位.Region 分配.Region Server的上线和下线.Master 的上线和下线.在谈到这些之前,先把 HBase 的基本架构里 ...
- 洛谷1303 A*B Problem 解题报告
洛谷1303 A*B Problem 本题地址:http://www.luogu.org/problem/show?pid=1303 题目描述 求两数的积. 输入输出格式 输入格式: 两个数 输出格式 ...
- Tomcat 容器的安全认证和鉴权
大量的 Web 应用都有安全相关的需求,正因如此,Servlet 规范建议容器要有满足这些需求的机制和基础设施,所以容器要对以下安全特性予以支持: 身份验证:验证授权用户的用户名和密码 资源访问控制: ...
- Golang : flag 包简介
在 Golang 程序中有很多种方法来处理命令行参数.简单的情况下可以不使用任何库,直接处理 os.Args:其实 Golang 的标准库提供了 flag 包来处理命令行参数:还有第三方提供的处理命令 ...