Arcgis api for javascript学习笔记(4.5版本) - 点击多边形(Polygon)并高亮显示
在现在的 arcgis_js_v45_api 版本中并没有直接提供点击Polygon对象高亮显示。需要实现如下几个步骤：
1.点击地图时，获取Polygon的Graphic对象；
2.对获取到的Graphic对象进行高亮显示和移出高亮显示；
1. 点击地图时，获取当前点击的Polygon的Graphic对象
在4.x版本中可以通过 view.on("click", function (event) { }); 结合 view.hitTest(event).then(function (response) { }); 来获取点击的Graphic对象。但是这种实现方式只能在以下两种情况下才能获取到。
Ⅰ. 在二维地图（MapView）中，无论是Point还是Polygon，都可以获取到他们对应的Graphic对象；
Ⅱ. 在三维地图（SceneView）中，只能获取到 Point 的Graphic对象，而 Polygon 的Graphic对象没有办法获取到；
所以个人的实现思路：获取当前鼠标点击的位置，循环多边形，判断点是否在该多边形内。考虑到多边形rings比较多，所以先在判断点是否在多边形的外界矩形内部。
2. Graphic对象高亮显示与移除
方案1：在官方文档中有提供高亮显示的功能，https://developers.arcgis.com/javascript/latest/api-reference/esri-views-layers-FeatureLayerView.html#highlight；
方案2：新增一个同样位置的Graphic对象，初始化时设置高亮的symbol。经过本人测试，直接修改 Graphic 对象的 symbol 属性，是无法达到预期的效果。因为尽管修改 symbol 属性，Graphic 在地图中的样式并不会发生改变；
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to SceneView - Create a 3D map</title>
<style type="text/css">
html, body, #viewDiv { height: 100%; width: 100%; }
</style>
<!--<script type="text/javascript">-->
<!--dojoConfig = {-->
<!--async: true, //dojo核心示范异步加载-->
<!--baseUrl: "http://localhost:8001/arcgis_js_v45_api/dojo",-->
<!--packages: [{-->
<!--name: "extends",-->
<!--location: location.pathname.replace(/\/[^/]+$/, "")-->
<!--}],-->
<!--waitSeconds: 5, //加载模块的请求响应时间-->
<!--cacheBust: false, //是否清空模块缓存（原理就是在请求模块的URL加上当前时间戳）-->
<!--locale: location.search.match(/locale=([\w\-]+)/) ? RegExp.$1 : "en-us"-->
<!--};-->
<!--</script>-->
<!--<script type="text/javascript" src="jquery-1.8.0.min.js"></script>-->
<!--<link rel="stylesheet" href="http://127.0.0.1:8001/arcgis_js_v45_api/esri/css/main.css">-->
<!--<script type="text/javascript" src="http://127.0.0.1:8001/arcgis_js_v45_api/init.js"></script>--> <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/views/SceneView",
"esri/Graphic",
"extends/GraphicLayerEx",
"dojo/domReady!"
], function (esriConfig, Map, SceneView, Graphic, GraphicLayerEx) {
esriConfig.request.proxyUrl = "http://127.0.0.1:8002/proxy.ashx";
esriConfig.request.corsDetection = true;
var map = new Map({
"basemap": "hybrid",
"ground": "world-elevation"
});
var view = new SceneView({
"map": map,
"container": "viewDiv"
});
var polygonLayer = new GraphicLayerEx();
map.layers.add(polygonLayer); view.then(function () {
jQuery.getJSON("data.json", function (data) {
for(var i = 0; i < data.length; i++){
var item = data[i];
console.info(item);
var polygonGraphic = new Graphic({
"geometry": {
"type": "polygon",
"rings": item
},
"symbol": {
"width": 2,
"type": "simple-line",
"color": [255, 255, 255]
}
});
polygonLayer.graphics.add(polygonGraphic);
}
}); var highlightPolygon;
view.on("click", function (event) {
if(highlightPolygon){
highlightPolygon.remove();
}
console.info(event)
view.hitTest(event).then(function (response) {
var g_move = polygonLayer.getInsidePolygon({
y: response.results[0].mapPoint.latitude,
x: response.results[0].mapPoint.longitude
});
if (g_move) {
view.whenLayerView(polygonLayer).then(function (lyrView) {
highlightPolygon = lyrView.highlight(g_move);
});
}
});
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
GraphicLayerEx.js (GraphicLayer扩展，获取点坐落所在多边形polygon)
define([
"esri/core/declare",
"esri/layers/GraphicsLayer"
], function (declare, GraphicsLayer) {
return declare([GraphicsLayer], {
/**
* @description 获取点坐落所在多边形polygon
* @param {Object} pt 待判断的点，格式：{ x: X坐标, y: Y坐标 }
* @return {Object} 多边形graphic对象
*/
"getInsidePolygon": function (pt) {
for (var k = 0; k < this.graphics.length; k++) {
var g = this.graphics.items[k];
if (g.geometry.type !== "polygon") {
continue;
}
var rings = g.geometry.rings[0];
var gExtent = g.geometry.extent;
if( pt.x > gExtent.xmin &&
pt.x < gExtent.xmax &&
pt.y > gExtent.ymin &&
pt.y < gExtent.ymax){
//如果在多边形外界矩形，再详细判断是否在多边形内部
var flag = false;
for (var i = 0, l = rings.length, j = l - 1; i < l; j = i, i++) {
var sx = rings[i][0],
sy = rings[i][1],
tx = rings[j][0],
ty = rings[j][1]; // 点与多边形顶点重合
if ((sx === pt.x && sy === pt.y) || (tx === pt.x && ty === pt.y)) {
return g;
} // 判断线段两端点是否在射线两侧
if ((sy < pt.y && ty >= pt.y) || (sy >= pt.y && ty < pt.y)) {
// 线段上与射线 Y 坐标相同的点的 X 坐标
var x = sx + (pt.y - sy) * (tx - sx) / (ty - sy);
// 点在多边形的边上
if (x === pt.x) {
return g;
}
// 射线穿过多边形的边界
if (x > pt.x) {
flag = !flag;
}
}
}
//射线穿过多边形边界的次数为奇数时点在多边形内
if(flag){
return g;
}
}
}
return null;
}
});
});
data.json（模拟数据）
[
[
[81.99385,41.423614],
[84.311909,41.062564],
[82.214617,38.363399],
[81.99385,41.423614]
],
[
[82.251412,35.166954],
[88.138547,35.348045],
[85.489336,31.239761],
[82.251412,35.166954]
],
[
[90.934936,38.218397],
[92.958639,33.05534],
[98.220266,35.918797],
[90.934936,38.218397]
],
[
[98.514622,32.620448],
[101.016655,27.829668],
[103.70266,32.277243],
[98.514622,32.620448]
],
[
[112.386184,32.744923],
[117.095892,31.681338],
[115.256162,26.579477],
[112.386184,32.744923]
]
]
效果图：
源码下载地址： https://download.csdn.net/download/tracine0513/10339435
Arcgis api for javascript学习笔记(4.5版本) - 点击多边形(Polygon)并高亮显示的更多相关文章
- Arcgis api for javascript学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合
在Arcgis api for javascript 3.x 版本中,我们可以直接通过某个FeatureLayer对象中的graphics属性获取要素集合. graphics属性 但是在4.x版本中, ...
- Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置
在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...
- Arcgis api for javascript学习笔记(3.2X版本)-初步尝试
Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...
- Arcgis api for javascript学习笔记(4.6版本) - 二维MapView中的FeatureLayer显示标注
4.6版本api的FeatureLayer中有提供 labelsVisible 和 labelingInfo 两个属性,设置这两个属性可以实现显示将属性中某个字段作为标注.但是这两个属性只针对三维Sc ...
- Arcgis api for javascript学习笔记(4.5版本)-三维地图实现弹窗功能
1. 对于Graphic对象,在初始化Graphic对象时设置popupTemplate属性,即可实现点击Graphic时显示弹窗. <!DOCTYPE html> <html> ...
- Arcgis api for javascript学习笔记(4.5版本)-三维地图的飞行效果
其实就只是用到了 view.goTo() 函数,再利用 window.setInterval() 函数(定时器)定时执行goTo().代码如下: <!DOCTYPE html> < ...
- Arcgis api for javascript学习笔记(4.5版本)-三维地图并叠加天地图标注
1.三维地图实现 在官网的demo中就有三维地图的实现,如下图所示 <!DOCTYPE html> <html> <head> <meta charset=& ...
- Arcgis api for javascript学习笔记(3.2X版本)-Map图层叠加以及基本操作
1. 不设置默认底图,第一个图层作为底图,然后叠加另外一个图层 先添加图层1,第一个图层1作为默认底图,然后在图层1上叠加图层2,并设置图层2的透明度为50%. <!DOCTYPE html&g ...
- Arcgis api for javascript学习笔记(3.2版本) - 匀速行驶轨迹动画效果
一.前言 有这样一个需求:已知某条线上的n个点的经纬度数组 ,实现物体运行轨迹. 如果这些点中两个距离很近,那么我们可以用一个定时器在地图上每次重新画一个点,这样肉眼看到这个点上的运动效果,如下图代码 ...
随机推荐
- windows下安装wabt
windows下安装wabt 安装前准备cmake.mingw环境 安装cmake 安装mingw 步骤 # 1.克隆wabt源码 git clone https://github.com/WebAs ...
- 利用OBJECT_DEFINITION函数来代码存档
作为一名数据库管理员,在进行代码迁移之前,总是尽力给提交于开发环境的代码一个完整的面貌.但是,不得不承认,我不能保证不发生任何可能破坏开发系统的事情.当这种情况发生时,可能的补救措施是恢复到目标代码的 ...
- 【例题 6-15 UVA - 10129】Play on Words
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 拓扑大水题 [代码] #include <bits/stdc++.h> using namespace std; con ...
- Iceberg使用
Iceberg是Mac下比較好用的pkg生成工具. 在files中选择你想要存放(自己文件的目录),生成pkg后目录就会存储在设置的那个目录下. 点击scripts选择pkg安装各个阶段所要运行脚本路 ...
- Linux定时器的使用（三种方法）
使用定时器的目的无非是为了周期性的执行某一任务,或者是到了一个指定时间去执行某一个任务.要达到这一目的,一般有两个常见的比较有效的方法.一个是用linux内部的三个定时器,另一个是用sleep, us ...
- 25、驱动调试之打印到proc虚拟文件
1.dmesg指令是通过读/proc/kmsg来获取打印信息,也可以通过cat /proc/kmsg打印: 说明:kmsg是环形缓存区,只能读一次 2.内核中fs/proc目录下有相关文件,比如pro ...
- [AngualrJS NG-redux] Map State and Dispatchers to Redux
In this lesson, we are going to learn how to map our Angular component directly to our application s ...
- linux下的打包和压缩
linux中常见的两种压缩包文件的格式是.tar..gz和.tar.gz..tar仅仅是将文件简单地打包,文件的大小没有变化,也就是说.tar文件仅仅是一个包,没有被压缩:.tar.gz文件是打包后用 ...
- 用Eclipse替代Keil&IAR来开发ARM应用（升级版）
Eclipse GNU ARM Plugin 2014/7/16 作者 kiya 几个月前写了一篇<),想自己丰衣足食的参考我的上一篇文章,以及GNU ARM的官网. 用Eclipse替代Kei ...
- fastjson排序 Map多层嵌套转换自动排序问题终极解决方案
阅读更多 最近项目中用到了fastjson(1.2.15)需要将前端多层嵌套json转换为map,由于map的无序性,想了很多办法,最终找到使用 Map m= JSONArray.parseObjec ...