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 ...
随机推荐
- 蓝桥杯 2014本科C++ B组 六角填数 枚举排列
标题:六角填数 如图[1.png]所示六角形中,填入1~12的数字. 使得每条直线上的数字之和都相同. 图中,已经替你填好了3个数字,请你计算星号位置所代表的数字是多少? 请通过浏览器提交答案,不要填 ...
- 二维码扫描极速版2.0.apk
二维码扫描极速版2.0.apk 百度网盘下载地址: http://pan.baidu.com/s/1o686bGI 二维码扫描极速版 描述 二维码扫描极速版,快速识别二维码中的信息. 简单易用. 提高 ...
- 1.13-1.14 Hive Action
一.Hive Action 1.创建文件 [root@hadoop-senior oozie-apps]# pwd /opt/cdh-5.3.6/oozie-4.0.0-cdh5.3.6/oozie- ...
- hihocoder #1607 : H星人社交网络(双指针)
传送门 题意 分析 可知对与某个数x,设其可发送信息的边界为[L,R],那么随着x的递增,[L,R]也右移,故可对输入数排序,做一次双指针即可 trick 代码 //1. Aj < 1/8 * ...
- UVALive 7327【模拟】
题意: 每次方案一个或多个子序列: 每个子序列要整除m 认为分割不同,子序列边界的不同就是不同: 1246有4个 1246 12 46 124 6 12 4 6 思路: 先从整体考虑,因为取膜适用于加 ...
- Forward Rendering 正向渲染
Forward Rendering 正向渲染 正向渲染一个基于着色器的渲染路径.它支持逐像素计算光照(包括法线贴图和灯光Cookies)和来自一个平行光的实时阴影.在默认设置中,少数最亮 ...
- 51nod1267(双指针)
题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1267 题意:中文题诶- 思路:双指针 求a+b+c+d=0,令 ...
- 2014-5-24 NOIP模拟赛
Problem 1 护花(flower.cpp/c/pas) [题目描述] 约翰留下他的N(N<=100000)只奶牛上山采木.他离开的时候,她们像往常一样悠闲地在草场里吃草.可是,当他回来的时 ...
- cogs 1176. [郑州101中学] 月考
1176. [郑州101中学] 月考 ★ 输入文件:mtest.in 输出文件:mtest.out 简单对比时间限制:1 s 内存限制:128 MB [题目描述] 在上次的月考中Bug ...
- STC单片机掉电断电失电瞬间EEPROM数据保存处理办法(转)
由于客户在请人设计开发一设备,但是设备用户处总停电,造成设备及其周边耗材损耗严重,因此请我司在现有STC为主要芯片的基础上做掉电瞬间EEPROM里的20个参数保存,上电后通过读取EEPROM中的参数回 ...