实现：在有geoJson数据的情况下，将对应地图高亮显示。（一般geoJson数据是从后台获取的，也可以在获取到后台返回数据后的then中直接调用该方法

1、首先，先来看一下geoJson的数据结构：（后面的多维数组经纬度是重点）
{ 
"type": "Polygon", 
"coordinates": [ [
   [ 112.21574111878, 34.213652805745845 ], [ 112.21592954357959, 34.213579386996621 ],
   [ 112.21611899593837, 34.213577508491284 ], [ 112.21632567121881, 34.213575458879134 ],
   [ 112.21656679235296, 34.21357306722502 ], [ 112.21675624465269, 34.213571187735752 ],
   [ 112.21696291986875, 34.213569137050172 ], [ 112.21715237213178, 34.213567256949247 ], 
   [ 112.21734161859173, 34.213551068456994 ], [ 112.21751281879061, 34.213477818264977 ],
   [ 112.21768422452988, 34.213418875936952 ], [ 112.21790791631945, 34.21340234456364 ],
   [ 112.21811397329061, 34.213357367660798 ], [ 112.21828517240064, 34.213284116411096 ],
   [ 112.21833457554335, 34.213126214093208 ], [ 112.21836654975367, 34.21295417476135 ], 
   [ 112.21832983873209, 34.212797127907763 ], [ 112.21820722009718, 34.212655244540983 ],
   [ 112.21803396321413, 34.21258541469011 ], [ 112.21784430734759, 34.212572988007032 ], 
   [ 112.21765485735843, 34.212574869128993 ], [ 112.21746520155293, 34.212562441857926 ], 
   [ 112.21729194544176, 34.212492610940238 ], [ 112.21716953471871, 34.212365034584309 ], 
   [ 112.21709838088508, 34.212208329145099 ], [ 112.2169587482414, 34.212080923474048 ], 
   [ 112.21676785955285, 34.211982646466033 ], [ 112.21673163060051, 34.211959808398596 ], 
   [ 112.21657841080889, 34.211984525897087 ], [ 112.21649435404311, 34.212128461156446 ], 
   [ 112.216358628976, 34.212272908815422 ], [ 112.21625734885673, 34.212417014733788 ], 
   [ 112.21619071944842, 34.212575087100582 ], [ 112.21600229709679, 34.212648506209817 ], 
   [ 112.21581346336983, 34.212693308817684 ], [ 112.21566010245665, 34.212809310255459 ], 
   [ 112.21552416940757, 34.212939448919442 ], [ 112.21545753823654, 34.213097520913053 ], 
   [ 112.21526849776865, 34.213128014595604 ], [ 112.21507863555672, 34.213101275541739 ], 
   [ 112.21488918419051, 34.213103152417375 ], [ 112.21469973280679, 34.213105029000459 ], 
   [ 112.21459844886841, 34.213249133611725 ], [ 112.21454903864311, 34.213407034572811 ], 
   [ 112.21455129708748, 34.213564423825851 ], [ 112.21458800150964, 34.21372147193528 ], 
   [ 112.21462491140558, 34.2138928281394 ], [ 112.21476433833989, 34.214005928330927 ], 
   [ 112.21488674796262, 34.214133507081478 ], [ 112.21509363010514, 34.214145767626157 ], 
   [ 112.21530030685172, 34.214143719712013 ], [ 112.21548893861097, 34.214084609721823 ], 
   [ 112.21555577592905, 34.213940845828155 ], [ 112.21565705900377, 34.213796740459209 ], 
   [ 112.21574111878, 34.213652805745845 ] ] ] 
 }

2 、再来看看我们的代码：
HTML中：
<div ref="map" id="map"> </div>

引入所需地图相关包：
import { loadModules } from "esri-loader";

data中声明对象：
 map:"",
 mapView:"",
 graphicLayer:null,

3、methods中封装好的方法：
将地图初始化：
 mapInit() {
      loadModules([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/MapImageLayer",
        "esri/layers/WebTileLayer",
        "esri/geometry/SpatialReference",
        "esri/layers/GraphicsLayer"
      ])
        .then(
          ([Map, MapView, MapImageLayer, WebTileLayer, SpatialReference,GraphicsLayer]) => {
            this.map = new Map({
              basemap: "satellite",
              spatialReference: {
                wkid: 4326
              }
            });

            this.mapView = new MapView({
              //实例化地图视图
              container: "map",
              map: this.map,
              zoom: 7,
              center: [113.65, 34.76667]
            });
            this.mapView.ui.components = [];
            let baseLayer = new MapImageLayer(
            //地图后台地址，获取地图文件
              this.$config.mapServerIP +
                "arcgis/rest/services/HeNanMap/MapServer",
              {
                id: "baseLayer"
              }
            );
            this.map.add(baseLayer);
          }
        )
        .catch(err => {
          console.error(err);
        });
    },

获取到geoJson将地图高亮展示：
//通过geoJson高亮显示
    Drawline(geoJson) {
    //在高亮显示本区域之前移除之前的图层
      this.map.remove(this.graphicLayer);
      loadModules([
        "esri/layers/GraphicsLayer",
        "esri/Graphic",
        "esri/geometry/Polyline",
        "esri/symbols/SimpleLineSymbol",
        "esri/Color",
      ]).then(
        ([GraphicsLayer, Graphic, Polyline,SimpleLineSymbol,Color
        ]) => {    
          this.graphicLayer = new GraphicsLayer();
          let coordinates = geoJson;
          coordinates = JSON.parse(geoJson).coordinates
          let polyLine = new Polyline(coordinates);
        
          let lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 255, 0]), 1);
          //（255，255，0）是高亮展示的黄色，后面1是线条宽度，需要别的颜色可以自己根据需求调整
          let graphic = new Graphic(polyLine, lineSymbol);
          this.graphicLayer.add(graphic);
          this.map.add(this.graphicLayer);
        })
    },

然后在获取到了对应的geoJson数据的情况下，调用上面的方法，就可以直接将该geoJson中对应的地图边框高亮显示了。

通过数据库查询条件使地图高亮

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：vs2015，supermap_iserver

作者：陈显其

撰写时间：2019/2/3

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

想要地图中的一些区域高亮显示，首先把该图层的地图数据全查询出来（图1），



图1

然后在成功的方法里把区域的区域名提取出来，然后去数据库里把想要亮起来的区域的区域名查询出来和地图查询后提取出来的区域名和数据库中要亮起来的区域名通过for循环比对（图2），如果区域名一样，就给该区域的设置一个新的样式给到新的图层中，这样地图就亮起来了（图3）



图2



图3

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    <title>添加行政区划</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html><pre name="code" class="javascript"><script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 7);
    map.enableScrollWheelZoom();
    function getBoundary(){       
        var bdary = new BMap.Boundary();
        bdary.get("廊坊", function(rs){       //获取行政区域
            map.clearOverlays();        //清除地图覆盖物           
        //添加遮罩层
        //思路：利用行政区划点的集合与外围自定义东南西北形成一个环形遮罩层
        //1.获取选中行政区划边框点的集合  rs.boundaries[0]
        var strs = new Array();
        strs = rs.boundaries[0].split(";");
        var EN = "";    //行政区划东北段点的集合
        var NW = ""; //行政区划西北段点的集合
        var WS = ""; //行政区划西南段点的集合
        var SE = ""; //行政区划东南段点的集合
        var pt_e = strs[0]; //行政区划最东边点的经纬度
        var pt_n = strs[0]; //行政区划最北边点的经纬度
        var pt_w = strs[0]; //行政区划最西边点的经纬度
        var pt_s = strs[0]; //行政区划最南边点的经纬度
        var n1 = ""; //行政区划最东边点在点集合中的索引位置
        var n2 = ""; //行政区划最北边点在点集合中的索引位置
        var n3 = ""; //行政区划最西边点在点集合中的索引位置
        var n4 = ""; //行政区划最南边点在点集合中的索引位置
        //2.循环行政区划边框点集合找出最东南西北四个点的经纬度以及索引位置
        for (var n = 0; n < strs.length; n++) {
            var pt_e_f = parseFloat(pt_e.split(",")[0]);
            var pt_n_f = parseFloat(pt_n.split(",")[1]);
            var pt_w_f = parseFloat(pt_w.split(",")[0]);
            var pt_s_f = parseFloat(pt_s.split(",")[1]);
            var sPt = new Array();
            try {
                sPt = strs[n].split(",");
                var spt_j = parseFloat(sPt[0]);
                var spt_w = parseFloat(sPt[1]);
                if (pt_e_f < spt_j) {   //东
                    pt_e = strs[n];
                    pt_e_f = spt_j;
                    n1 = n;
                }
                if (pt_n_f < spt_w) {  //北
                    pt_n_f = spt_w;
                    pt_n = strs[n];
                    n2 = n;
                }
                if (pt_w_f > spt_j) {   //西
                    pt_w_f = spt_j;
                    pt_w = strs[n];
                    n3 = n;
                }
                if (pt_s_f > spt_w) {   //南
                    pt_s_f = spt_w;
                    pt_s = strs[n];
                    n4 = n;
                }
            }
            catch (err) {
                alert(err);
            }
        }
        //3.得出东北、西北、西南、东南四段行政区划的边框点的集合
        if (n1 < n2) {     //第一种情况 最东边点在索引前面
            for (var o = n1; o <= n2; o++) {
                EN += strs[o] + ";"
            }
            //判断西北
            if(n2<n3){
                for (var o = n2; o <= n3; o++) {
                    NW += strs[o] + ";"
                }
            }else{
                for (var o = n2; o < strs.length; o++) {
                    NW += strs[o] + ";"
                }
                for (var o = 0; o <= n3; o++) {
                    NW += strs[o] + ";"
                }
            }
            for (var o = n3; o <= n4; o++) {
                WS += strs[o] + ";"
            }
            //判断东南
            if(n4<n1)
            {
                for (var o = n4; o <= n1; o++) {
                    SE += strs[o] + ";"
                }
            }else{
                for (var o = n4; o < strs.length; o++) {
                    SE += strs[o] + ";"
                }
                for (var o = 0; o <= n1; o++) {
                    SE += strs[o] + ";"
                }
            }
        }
        else {   //第二种情况 最东边点在索引后面
            for (var o = n1; o < strs.length; o++) {
                EN += strs[o] + ";"
            }
            for (var o = 0; o <= n2; o++) {
                EN += strs[o] + ";"
            }
            for (var o = n2; o <= n3; o++) {
                NW += strs[o] + ";"
            }
            for (var o = n3; o <= n4; o++) {
                WS += strs[o] + ";"
            }
            for (var o = n4; o <= n1; o++) {
                SE += strs[o] + ";"
            }
        }
        //4.自定义外围边框点的集合
        var E_JW = "170.672126, 39.623555;";            //东
        var EN_JW = "170.672126, 81.291804;";       //东北角
        var N_JW = "105.913641, 81.291804;";        //北
        var NW_JW = "-169.604276,  81.291804;";     //西北角
        var W_JW = "-169.604276, 38.244136;";       //西
        var WS_JW = "-169.604276, -68.045308;";     //西南角
        var S_JW = "114.15563, -68.045308;";            //南
        var SE_JW = "170.672126, -68.045308 ;";         //东南角
        //4.添加环形遮罩层
        var ply1 = new BMap.Polygon(EN + NW + WS + SE + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + EN_JW + E_JW,
 { strokeColor: "none", fillColor: "rgb(246,246,246)", strokeOpacity:1,fillOpacity:1}); //建立多边形覆盖物
       map.addOverlay(ply1);  //遮罩物是半透明的，如果需要纯色可以多添加几层
        //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
        var ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#ff0000",fillColor: "" });
        map.addOverlay(ply);   
        map.setViewport(ply.getPath());    //调整视野                 
        });   
    }
    setTimeout(function(){
        getBoundary();
    }, 2000);
</script>



转载自 http://blog.csdn.net/u013008179/article/details/48341441

有的时候，我们没有用到popupTemplate 。这个时候，点击那个图层的时候，就没有高亮效果，要想点击高亮，就需要featureLayerView.  

把这段代码加入到view的点击事件里面，就可以点击那个图层，  那个图层就高亮。

 

view.whenLayerView(graphic.layer).then(function(featureLayerView) {   

                                        if (_this.highlight) {

                                        _this.highlight.remove()

                                        }

                                          _this.highlight = featureLayerView.highlight(graphic);

                                        }

                                       ).catch(function(error) {

                                            // An error occurred during the layerview creation

                                          })