Arcgis api for javascript学习笔记(4.5版本) - 点击多边形(Polygon)并高亮显示

最新推荐文章于 2022-11-25 15:53:04 发布

weixin_30650039

最新推荐文章于 2022-11-25 15:53:04 发布

阅读量1.4k

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/tracine0513/p/8780825.html

版权

在现在的 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(/\/[^/]+$/, "")-->
            <!--}],-->

最低0.47元/天解锁文章

weixin_30650039

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
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...
复制链接

扫一扫