精华内容
下载资源
问答
  • 有geoJson,将地图高亮显示实现:在有geoJson数据的情况下,将对应地图高亮显示。(一般geoJson数据是从后台获取的,也可以在获取到后台返回数据后的then中直接调用该方法) 实现:在有geoJson数据的情况下,将对应...

    实现:在有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 ~~~...

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

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

    开发工具与关键技术: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


    展开全文
  • 利用目标区域点的集合与外围自定义区域形成一个环形遮罩层,高亮显示所选行政区划,遮盖非目标区域。
  • 全国各省学校分布图。实现功能:xml配置可以互动的省区和项目分布结构。省区滑过高亮,点击放大自动适应,在省区显示具体分布点。
  • 这个时候,点击那个图层的时候,就没有高亮效果,要想点击高亮,就需要featureLayerView. 把这段代码加入到view的点击事件里面,就可以点击那个图层, 那个图层就高亮。 view.whenLayerView(graphic.layer).then...

    有的时候,我们没有用到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

                                              })

    展开全文
  • 设置百度地图样式修改 http://lbsyun.baidu.com/customv2/editor/82e7bad64506614df73507d2f8a35847/teafield 在此基础上修改的,可以参考一下这个 function loadMap(data,id) { var path=[]; myChart = echarts....
  • Arcgis server 查询地图 高亮显示 定位
  • 位置在地图高亮

    2020-01-03 11:15:55
    做过一个需求是关于后台数据返回对应的城市,然后在地图高亮显示出来。 过程:想通过静态的城市位置数据js与echarts来实现这个需求,一直找echarts显示地图的资料,找了挺久的,后来发现官网停止了关于地图的api...
  • smartbi地图循环高亮

    2018-05-29 15:41:34
    最近在项目中使用到了smartbi,觉得还是蛮方便的,在此分享一下关于smartbi中地图循环高亮的实现方法。 (注:下方区域有蓝色填充不是高亮效果,而是smartbi地图中的染色效果)关于smartbi的安装与部署在这里就不...
  • 百度地图 行政区域 高亮

    千次阅读 2018-08-03 09:31:37
    最近接着个需求,需要在地图上将行政区域高亮,在网上找了几个方法,都是自己算的点顺序,总结了一下,出现过以下几个问题 1、行政区域边线画出来了,但是遮罩不准,应该是点顺序的问题,导致总是有显示或者不显示...
  • jQuery中国省份地图选择高亮代码是一款基于Bootstrap库制作下拉框选择中国省份城市插件下载。
  • echarts地图某些省份禁止高亮显示

    千次阅读 2017-01-22 10:03:49
    echarts地图在某些省禁止高亮显示 echarts3地图在某些省禁止高亮显示 echarts3地图在某些省禁止显示hu
  • 方案设计:根据用户注册时获取用户的ip地址,根据ip地址获取经纬度,再根据经纬度显示在地图上展示,并高亮。 解决需求: 1.获取用户注册ip (比较简单,省略); 2.根据ip地址获取经纬度。使用百度地图的api:...
  • Arcgis server 查询地图,高亮显示,定位源代码
  • jQuery中国省份地图选择高亮代码是一款基于Bootstrap库制作下拉框选择中国省份城市插件下载。
  • 项目要求左右两张地图能够在鼠标悬浮的时候高亮部分联动,曾尝试了connect不好使,所以自己写了这段代码。代码思路为: 鼠标移入地图时,另一侧的地图根据鼠标悬浮获取到的区域name使该区域高亮; 鼠标移入地图时,...
  • // 全部取消高亮 // myChart.dispatchAction({ // type: 'downplay',//默认显示江苏的提示框 // //seriesIndex: 0,//这行不能省 // dataIndex: this.highDataIndex // }); // 设置高亮 // myChart....
  • 项目要求左右两张地图能够在鼠标悬浮的时候高亮部分联动 一、思路如下: 鼠标移入地图时,另一侧的地图根据鼠标悬浮获取到的区域name使该区域高亮; 鼠标移入地图时,根据鼠标在地图的坐标位置,使另一侧的地图...
  • Echarts3实例 map地图选中高亮显示

    万次阅读 2018-12-18 18:33:17
    Echarts Map中实现点击区域高亮,点击事件实现 实现效果 实现代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&...
  • 百度地图 行政区域高亮显示

    千次阅读 2019-09-12 17:29:41
    >本文转载至网络: 原文地址:...function getBoundary(){ //百度地图获取行政区域的对象 var bdary = new BMap.Boundary(); bdary.get("重庆", fun...
  • 选择的地区高亮
  • 在DotSpatial中,当要素进入地图或者图层的选中要素集合后,颜色会高亮显示,但是默认颜色为Color.Cyan,其RGB为(0,255,255),在地图中并不是很显眼,就是下图这个颜色。实际需求中,可能更需要类似于红色这种颜色...
  • html5+css3世界地图区域划分高亮显示特效是一款鼠标移动到地图区域划分块上,该区域高亮显示代码。
  • 需求把地图划分成均匀网格,放置玩家到任意一个网格,显示玩家可攻击范围所有网格高亮(放置) 1.如何划分网格? 定义行和列最大数量(自走棋row=8 col=8) 定义起始位置Vector3 startPos从起始点 向X轴正方向延伸列 ...
  • 比如鼠标指到指定的地图区域,该区域高亮显示,然后显示该区域的一些基本信息,还有一些点击事件处理等等。 示例图片: 一、HTML的usemap属性 img标签的usemap属性:它可以指定一个map标签 map标签:地图集合。...
  • css3+html5世界地图区域划分高亮显示特效@media screen and (max-width: 320px) {#map_base svg {height: 100px;}}@media screen and (max-width: 400px) and (min-width: 321px) {#map_base svg {height: 134px;}}@...
  • echarts地图点击某区域高亮的问题

    千次阅读 2020-07-02 17:42:54
    背景:地图点击某个区域高亮。 解析:通过查找api,我找到一种既可以实现点击高亮,又可以不更改其他区域的值的方法。 获取到数据后,手动给数据添加itemstyle属性设置正常颜色和强调颜色,点击时,通过点击的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,146
精华内容 4,058
关键字:

地图高亮