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个点的经纬度数组 ,实现物体运行轨迹. 如果这些点中两个距离很近,那么我们可以用一个定时器在地图上每次重新画一个点,这样肉眼看到这个点上的运动效果,如下图代码 ...
随机推荐
- Loadrunner--关联详解
当录制脚本时,VuGen会拦截client端(浏览器)与server端(网站服务器)之间的对话,并且通通记录下来,产生脚本.在VuGen的Recording Log中,您可以找到浏览器与服务器之间所有 ...
- HibernateCRUD基础框架(3)-简单的和较为复杂的标准的CRUD API
优点:简单的和基础的CRUD功能可以很快实现,可以说是比较的"标准化".维护起来也很容易. 缺点:性能没有保障.不支持特别复杂的CRUD. 可以适用的场景:小型Web项目 1.Cr ...
- 挖一挖不经常使用到而又非常有用的重载-Split
Split这个基本上全部的程序开发者都用到,一般使用单字符和长字符串拆分字符串的较多.事实上另一个重载很好用.那就是多种组合字符来进行拆分. 比如: "aaaaaaaaaa{@}bbbbbb ...
- 全双工 串口 stm32
- vue指令应用--实现输入框常见过滤功能
前端开发最常碰到的就是输入框,经常要做各种验证,本公司惯用的需求是直接屏蔽特定字符的输入,如禁止非数字输入,特殊符号输入,空格输入等,这些功能反复使用,做成指令的形式,直接调用,非常方便,上代码: 目 ...
- 组件绑定v-model，实现最大化复用
看优秀的vue项目,对组件的封装做的都非常到位,比如一个按钮都可以实现复用,仔细研究会发现实现基础就是组件直接绑定v-model,来看看按钮: 比如有个点赞按钮,长这样: 当点赞之后变成这样: 相信很 ...
- ftp 下载时防止从缓存中获取文件
//http://baike.baidu.com/link?url=QucJiA_Fg_-rJI9D4G4Z4687HG4CfhtmBUd5TlXrcWCeIEXCZxIh0TD7ng1wROAzAu ...
- AE地图查询
原文 AE地图查询 地图查询主要有两种查询:空间查询和属性查询 所用到知识点: 1 Cursor(游标)对象 本质上是一个指向数据的指针,本身不包含数据内容,提供一个连接到ROW对象或者要素对象(F ...
- [TypeScript] Using Assertion to Convert Types in TypeScript
Sometimes the compiler needs help figuring out a type. In this lesson we learn how to help out the c ...
- 2.CCGridAction(3D效果)，3D反转特效，凸透镜特效，液体特效，3D翻页特效，水波纹特效，3D晃动的特效，扭曲旋转特效，波动特效，3D波动特效
1 类图组织 2 实例 CCSprite * spr = CCSprite::create("HelloWorld.png"); spr->setPosition(cc ...