精华内容
下载资源
问答
  • 2021-08-10 16:58:32

    继上一篇文章(https://blog.csdn.net/qq_41877050/article/details/119455047)优化后的完整代码: 

    <template>
        <div id="map_index"></div>
    </template>
    <script>
    import axios from 'axios'
    export default {
        name:"ditu",
        data(){
            return{
                amap:null,
            }
        },
        methods: {
            getAMap(){
                var map = new AMap.Map('map_index', {
                    resizeEnable: true,
                    center: [116.30946, 39.937629],
                    zoom: 4
                });
                this.amap = map
            },
            markerProvince(){//标注省
                axios.get("https://restapi.amap.com/v3/config/district?keywords=100000&subdistrict=2&key=key",{
                }).then(res=>{
                    res.data.districts[0].districts.forEach(ele=>{
                    let map = this.amap
                     // 创建纯文本标记
                    var text = new AMap.Text({
                        text:ele.name + "--10",
                        anchor:'center', // 设置文本标记锚点
                        // draggable:true,
                        cursor:'pointer',
                        angle:2,
                        style:{
                            'padding': '.5rem 1.25rem',
                            'margin-bottom': '1rem',
                            'border-radius': '.25rem',
                            'background-color': 'rgb(0, 51, 51,0.6)',
                            'width': '8rem',
                            'height': '2rem',
                            'border-width': 0,
                            'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                            'text-align': 'center',
                            'font-size': '10px',
                            'color': '#fff'
                        },
                        position: [Number(ele.center.split(",")[0]),Number(ele.center.split(",")[1])]
                    });
                    text.setMap(map);
                    let that = this
                    text.on('click', function () {
                        that.searchNext(ele,map);
                    })
                })
                }).catch({
    
                });
            },
            searchNext(ele,map){
                axios.get("https://restapi.amap.com/v3/config/district?keywords="+ele.adcode+"&subdistrict=2&key=key",{
                }).then(res=>{
                    this.markerNext(ele,res.data.districts[0].districts,map);
                }).catch({
    
                });
            },
            markerNext(centerp,nextData,premap){
                //清除之前的
                premap.clearMap();  // 清除地图覆盖物
                //标记新的,并以点击的点为中心
                // premap.setCenter(centerp.properties.center); //设置地图中心点
                premap.setZoomAndCenter(12, [Number(centerp.center.split(",")[0]),Number(centerp.center.split(",")[1])]); //同时设置地图层级与中心点
                nextData.forEach(ele=>{
                    var text = new AMap.Text({
                        text:ele.name + "--0",
                        anchor:'center',
                        cursor:'pointer',
                        angle:2,
                        style:{
                            'padding': '.5rem 1.25rem',
                            'margin-bottom': '1rem',
                            'border-radius': '.25rem',
                            'background-color': 'rgb(0, 51, 51,0.6)',
                            'width': '8rem',
                            'height': '2rem',
                            'border-width': 0,
                            'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                            'text-align': 'center',
                            'font-size': '10px',
                            'color': '#fff'
                        },
                        position: [Number(ele.center.split(',')[0]),Number(ele.center.split(',')[1])]
                    });
                    text.setMap(premap);
                    let that = this
                    text.on('click', function () {
                        that.searchNext(ele,premap);
                    })
                })
            }
        },
        mounted(){
            this.getAMap();
            this.markerProvince();
        }
    }
    </script>
    
    <style scoped>
        #map_index{
            width: 100%;
            height: 100%;
        }
    </style>

    更多相关内容
  • 主要介绍了vue使用高德地图点击下钻 上浮效果的实现思路,本文以浙江省为例通过实例代码给大家介绍的非常详细,需要的朋友可以参考
  • 高德地图下钻功能

    2021-08-06 14:53:01
    1.下载中华人民共和国高德地图数据包 2.页面加载完成在地图对省级(找到对应中心点)进行打点标注 3.为标注添加点击事件,传参为当前点击省的adcode,调用高德地图行政区域查询API服务 详见官方文档:...

    一、首先分析思路

     

    1.下载中华人民共和国高德地图数据包  

    这一步是为了得到初始数据,但是直接调用下图接口就可以,参数传100000

    (不断进步的过程,欢迎大家批评指正!)

    2.页面加载完成在地图对省级(找到对应中心点)进行打点标注

    3.为标注添加点击事件,传参为当前点击省的adcode,调用高德地图行政区域查询API服务

     详见官方文档:https://lbs.amap.com/api/webservice/guide/api/district

    4.市区级依次类推

    二、代码实现

    1.引入数据包

    import zhongguo from '@/utils/amap/zhongguo.json'

     2.引入axios

    (我是之前安装了,如果之前没有安装,请执行npm install axios)

    import axios from 'axios'

    3.接口调用及方法实现

    export default {
        name:"ditu",
        data(){
            return{
                amap:null,
            }
        },
        methods: {
            getAMap(){
                var map, district, polygons = [], citycode;
                map = new AMap.Map('map_index', {
                    resizeEnable: true,
                    center: [116.30946, 39.937629],
                    zoom: 4
                });
                this.amap = map
            },
            markerProvince(){//标注省
                zhongguo.features.forEach(ele=>{
                    let map = this.amap
                     // 创建纯文本标记
                    var text = new AMap.Text({
                        text:ele.properties.name + "--10",
                        anchor:'center', // 设置文本标记锚点
                        // draggable:true,
                        cursor:'pointer',
                        angle:2,
                        style:{
                            'padding': '.5rem 1.25rem',
                            'margin-bottom': '1rem',
                            'border-radius': '.25rem',
                            'background-color': 'rgb(0, 51, 51,0.6)',
                            'width': '8rem',
                            'height': '2rem',
                            'border-width': 0,
                            'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                            'text-align': 'center',
                            'font-size': '10px',
                            'color': '#fff'
                        },
                        position: ele.properties.center
                    });
                    text.setMap(map);
                    let that = this
                    text.on('click', function () {
                        that.searchNext(ele,map);
                    })
                })
            },
            searchNext(ele,map){
                axios.get("https://restapi.amap.com/v3/config/district?keywords="+ele.properties.adcode+"&subdistrict=2&key='yourkey'",{
                }).then(res=>{
                    this.markerNext(ele,res.data.districts[0].districts,map);
                }).catch({
    
                });
            },
            markerNext(centerp,nextData,premap){
                //清除之前的
                premap.clearMap();  // 清除地图覆盖物
                //标记新的,并以点击的点为中心
                // premap.setCenter(centerp.properties.center); //设置地图中心点
                premap.setZoomAndCenter(8, centerp.properties.center); //同时设置地图层级与中心点
                nextData.forEach(ele=>{
                    var text = new AMap.Text({
                        text:ele.name + "--10",
                        anchor:'center',
                        cursor:'pointer',
                        angle:2,
                        style:{
                            'padding': '.5rem 1.25rem',
                            'margin-bottom': '1rem',
                            'border-radius': '.25rem',
                            'background-color': 'rgb(0, 51, 51,0.6)',
                            'width': '8rem',
                            'height': '2rem',
                            'border-width': 0,
                            'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                            'text-align': 'center',
                            'font-size': '10px',
                            'color': '#fff'
                        },
                        position: [Number(ele.center.split(',')[0]),Number(ele.center.split(',')[1])]
                    });
                    text.setMap(premap);
                    let that = this
                    text.on('click', function () {
                        that.searchNext(ele,premap);
                    })
                })
            }
        },
        mounted(){
            this.getAMap();
            this.markerProvince();
        }
    }

    实现效果:

    查看官方文档很重要哦

    展开全文
  • 利用高德api实现自定义区域下钻

    千次阅读 2022-03-27 19:15:08
    利用高德api实现自定义区域下钻 源码:https://github.com/wforguo/amap-drill 演示:https://forguo.cn/app/amap-drill.html

    高德地图实现自定义区域下钻

    源码:https://github.com/wforguo/amap-drill
    演示:https://forguo.cn/app/amap-drill.html

    一、地图下钻

    • antv区域钻取

    https://l7.antv.vision/zh/examples/choropleth/drill#order-drill

    在这里插入图片描述

    • 高德区域钻取

    https://lbs.amap.com/demo/amap-ui/demos/amap-ui-districtexplorer/index
    在这里插入图片描述

    上面是关于正常的省市区的一个地图下钻,现成的地图或者组件可以实现,
    但是如果遇到自定义的地图层级钻取就哑火了

    二、需求

    先来看一下最终效果

    gaode-under-custom-min.gif

    如图,最终我们要实现科室、部门、经销商的三级钻取,类似我们所说的大区下钻;

    方案大概有两个,

    • a、每个区域数据都用svg勾勒出来,每次点击通过id及层级去切换
    • b、通过高德地图尺量图去完成;

    显然,a方案耗时,不够友好,下面就用高德来实现这个需求;

    三、自定义区域

    可以用来实现自定义科室,自定义部门以及自定义经销商

    高德尺量图形

    https://lbs.amap.com/api/jsapi-v2/documentation#polygon

    翻阅高德api,发现AMap.Polygon这个api,可以绘制构造多边形对象,通过PolygonOptions指定多边形样式

    这里有path这个参数,就可以把自定义的每一级所对应的地区边缘经纬度坐标拿到,用尺量图渲染出来,就得到了一个自定义的区域,也就可以绘制各种想要的异形地图了

    image.png

    实现

    参考示列:https://lbs.amap.com/demo/jsapi-v2/example/overlayers/polygon-draw

    1、先拿到当前自定义区域所对应的经纬度坐标数组,这里以上海为列子

    核心代码:

      /**
       * 需要绘制的经纬度数据源
       * 三维数组,这里以上海为列子
       */
      let paths = [
          // 由于每个区域并非是连一起的,所以每个小的区域是去绘制的,
          [
              // 这里的经纬度是一个数组,由于参数 path 是这种格式,保持一致即可
              [121.7789, 31.3102],
              [121.5723, 31.4361],
              [121.5624, 31.4864],
              [121.7694, 31.3907],
              [121.7789, 31.3102],
          ],
          [
              [121.9433, 31.2155],
              [121.9573, 31.2304],
              [122.0086, 31.221],
              [121.9957, 31.1608],
              [121.9596, 31.1593],
              [121.9433, 31.2155],
          ],
      ];
    
    

    2、遍历该区域下的坐标,绘制每个子区域矢量图

    **小细节:**每个小区域都需要用尺量图绘制,一起绘制是可以的,但是后面地图的自适应就不好使了

    核心代码:

    /**
     * 尺量图集合
     */
    let polygons = [];
    
    /**
     * 构造多边形对象
     * @param path 多边形轮廓线的节点坐标数组
     * @param color
     */
    let addPolygon = function (path, color) {
        // 用于在地图上绘制线、面等矢量地图要素的类型
        let polygon = new AMap.Polygon({
            strokeWeight: 2, // 线条宽度,默认为 1
            path: path, // 多边形轮廓线的节点坐标数组
            fillOpacity: 0.4,
            clickable: false,
            fillColor: color, // 多边形填充颜色
            strokeColor: color, // 线条颜色
            lineJoin: 'round', // 折线拐点的绘制样式,默认值为'miter'尖角,其他可选值:'round'圆角、'bevel'斜角
        });
        polygons.push(polygon);
    }
    
    /**
     * tips:小细节,
     * 每个小区域都需要用尺量图绘制,一起绘制是可以的,但是后面地图的自适应就不好使了
     * 遍历每个小区域并绘制
     * @param path 多边形轮廓线的节点坐标数组
     */
    paths.map(path => {
        addPolygon(path);
    });
    

    3、添加到地图,并做自适应

    **小细节:**渲染到地图之后,用setFitView做个地图窗口自适应

    // 渲染尺量图到地图
    map.add(polygons);
    
    /**
     * tips:小细节,
     * 绘制完成之后,做个窗口自适应
     */
    map.setFitView(polygons);
    

    4、添加中心点Marker

    https://lbs.amap.com/api/jsapi-v2/documentation#marker

    自定义区域绘制好了,接下来就得将区域名称及数据展示出来
    需要使用Marker组件将对应信息绘制在这个区域的中心位置

    这里的Marker有两个用途

    • 展示区域信息及相关数据
    • 通过点击实现地图下钻

    通过MarkerextData属性来携带当前层级数据,便于下一级的钻取

    image.png

    核心代码:

      /**
       * 自定义marker内容
       * @param item { title: '', count: '', position: []}
       * @returns {string}
       */
      let renderMarker = function (item) {
          const {
              title = '',
              count = 0,
              center = [],
          } = item;
    
          // 创建纯文本标记
          let marker = new AMap.Marker({
              content: `<div class='area-map-marker' style='color: ${item.color || '#000'}'>
                          <div class='area-map-marker__title' style='font-weight: bold;'>${title}</div>
                          <div class='area-map-marker__title'>${count || 0}</div>
                        </div>`,
              anchor: 'center', // 设置文本标记锚点
              draggable: false,
              cursor: 'pointer',
              position: center,
              extData: item,
              zIndex: 1000,
          });
          markers.push(marker);
          // 通过点击实现地图下钻
          marker.on('mousedown', (e) => {
              handleAreaClick(e);
          });
          marker.setMap(map);
      }
    

    这里需要将每个merker放到一个集合markers,用于后期的回收

    // 清空markers
    if (markers.length >  0) {
        map.remove(markers);
        markers = [];
    }
    

    5、中心位置的获取

    通过当前所有的经纬度集合【原数据需要做展开处理】,计算得到中心点的经纬度

    核心代码:

    /**
     * 获取随机数
     */
    function getRandomNum (min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
    }
    
    /**
     * @desc 返回中心点的[经度,纬度]
     * @param points  points = [[经度,纬度], [经度,纬度]]; 参数数组points的每一项为每一个点的:[经度,纬度]
     * @returns {number[]} 返回中心点的数组[经度,纬度]
     */
    function getPointsCenter (points) {
        try {
            let point_num = points.length; // 坐标点个数
            let X = 0, Y = 0, Z = 0;
            for (let i = 0; i < points.length; i++) {
                if (points[i] == '') {
                    continue;
                }
                let point = points[i];
                let lat, lng, x, y, z;
                lng = parseFloat(point[0]) * Math.PI / 180;
                lat = parseFloat(point[1]) * Math.PI / 180;
                x = Math.cos(lat) * Math.cos(lng);
                y = Math.cos(lat) * Math.sin(lng);
                z = Math.sin(lat);
                X += x;
                Y += y;
                Z += z;
            }
            X = X / point_num;
            Y = Y / point_num;
            Z = Z / point_num;
    
            let tmp_lng = Math.atan2(Y, X);
            let tmp_lat = Math.atan2(Z, Math.sqrt(X * X + Y * Y));
    
            // 经纬度分别小数点后2位加随机数,防止Marker完全重叠
            let x = getRandomNum(2, 12) * 0.01;
            let y = getRandomNum(3, 12) * 0.01;
            return [(tmp_lng * 180 / Math.PI) + x, (tmp_lat * 180 / Math.PI) + y];
        } catch (e) {
            console.warn('获取中心坐标失败');
            console.log(e);
        }
    }
    

    四、数据整合

    上面的是一个简单步骤,最重要的还是数据,这里需要得到两个数据

    经纬度边缘坐标

    https://lbs.amap.com/api/webservice/guide/api/district/
    通过省市区code看来查询全国所有的省、市、区对应的经纬度边缘坐标,并通过省市区code关联

    extensionsall,才能得到对应的边界坐标,这个也最好让服务端来批量获取并存下来,
    数据比较多,可以做稀疏处理,大概6倍即可,当然数据越多轮廓越精细

    https://restapi.amap.com/v3/config/district?keywords=310000&key=56e119b97e84efd95dbca95cd2be3126&subdistrict=2&extensions=all
    

    polyline就是我们最终需要的经纬度边缘坐标集合了,然后整合成二位数组
    image.png

    将省市区code和经纬度数组整合成Object,键为省市区code,值为坐标集合

    最终结构如下
    最好可以放在CDN,来做一个缓存

    // 对应上海,苏州和无锡
    let areaPath = {
        "310000": [
            // 由于每个区域并非是连一起的,所以每个小的区域是去绘制的,
            [
                // 这里的经纬度是一个数组,由于参数 path 是这种格式,保持一致即可
                [121.7789, 31.3102],
                [121.5723, 31.4361],
                [121.5624, 31.4864],
                [121.7694, 31.3907],
                [121.7789, 31.3102],
            ],
            [
                [121.627, 31.445],
                [121.5758, 31.4782],
                [121.635, 31.453],
                [121.627, 31.445],
            ],
            [
                [121.9433, 31.2155],
                [121.9573, 31.2304],
                [122.0086, 31.221],
                [121.9957, 31.1608],
                [121.9596, 31.1593],
                [121.9433, 31.2155],
            ],
        ],
        "320500": [
            [[121.3435, 31.51206], [121.32251, 31.49936], [121.32016, 31.50588], [121.30553, 31.50534], [121.2986,
            31.49151], [121.26887, 31.48746], [121.25943, 31.47795], [121.25445, 31.48375], [121.24707, 31.47706], [
            121.2419, 31.49329], [121.23524, 31.49312], [121.23036, 31.47743], [121.2138, 31.47891], [121.18082,
            31.45146], [121.14734, 31.44393], [121.14783, 31.43619], [121.16434, 31.43106], [121.14625, 31.42107], [
            121.15938, 31.40579], [121.14383, 31.39233], [121.14844, 31.38541], [121.11375, 31.37445], [121.12022,
            31.36867], [121.10695, 31.3666], [121.10728, 31.35525], [121.11798, 31.35141], [121.11797, 31.34345], [
            121.13044, 31.34421], [121.12995, 31.30259], [121.14378, 31.3097], [121.16156, 31.28299], [121.14521,
            31.27529], [121.12065, 31.28703], [121.10545, 31.27365], [121.08879, 31.29208], [121.08215, 31.27154], [
            121.06246, 31.26745], [121.05716, 31.24643], [121.06435, 31.24614], [121.0668, 31.19496], [121.0773,
            31.16602], [121.06912, 31.1487], [121.04542, 31.15403], [121.04077, 31.13759], [121.02672, 31.14377], [
            121.01849, 31.1341], [120.98391, 31.13171], [120.93034, 31.14141], [120.87874, 31.13338], [120.8568,
            31.10283], [120.89235, 31.09749], [120.90472, 31.0805], [120.89462, 31.05866], [120.90136, 31.0175], [
            120.89135, 31.00374], [120.8655, 30.98968], [120.8474, 30.9896], [120.82298, 31.0057], [120.80291, 31.00541],
            [120.76993, 30.99662], [120.7697, 30.9773], [120.74594, 30.9625], [120.7256, 30.97154], [120.6982, 30.97079], [
            120.68445, 30.95518], [120.69756, 30.95034], [120.71063, 30.92905], [120.71326, 30.88505], [120.70128,
            30.88336], [120.70392, 30.87094], [120.69312, 30.87066], [120.68282, 30.88254], [120.66326, 30.86131], [
            120.65869, 30.86527], [120.65488, 30.84704], [120.64356, 30.85546], [120.60862, 30.84825], [120.58896,
            30.85443], [120.55949, 30.83152], [120.50444, 30.75797], [120.48909, 30.76369], [120.47553, 30.80386], [
            120.45528, 30.81685], [120.4604, 30.83986], [120.4413, 30.85629], [120.45318, 30.86972], [120.4345,
            30.88798], [120.44254, 30.90168], [120.435, 30.92082], [120.4201, 30.92771], [120.42422, 30.90058], [
            120.37941, 30.89077], [120.36466, 30.88047], [120.35682, 30.911], [120.35967, 30.93294], [120.37129,
            30.94867], [120.25066, 30.92571], [120.1979, 30.92831], [120.13252, 30.94308], [120.05245, 31.00574], [
            120.00041, 31.02775], [119.98852, 31.05922], [119.94364, 31.10466], [119.93982, 31.14295], [119.9205,
            31.16234], [119.9197, 31.17074], [120.11023, 31.264], [120.17372, 31.30881], [120.20961, 31.34566], [
            120.41771, 31.44768], [120.47418, 31.44656], [120.52361, 31.46873], [120.54297, 31.46993], [120.55524,
            31.47787], [120.54804, 31.49508], [120.5552, 31.50758], [120.59124, 31.52751], [120.59666, 31.51627], [
            120.60549, 31.52402], [120.59457, 31.57601], [120.57384, 31.58595], [120.56742, 31.584], [120.57303,
            31.57747], [120.55021, 31.57502], [120.54309, 31.60174], [120.56647, 31.60193], [120.57708, 31.61416], [
            120.6006, 31.61712], [120.5921, 31.62504], [120.59213, 31.65028], [120.55862, 31.65733], [120.57023,
            31.66932], [120.56821, 31.68546], [120.58645, 31.69071], [120.60081, 31.70885], [120.58245, 31.72117], [
            120.58436, 31.73447], [120.60002, 31.74463], [120.58424, 31.78215], [120.57071, 31.79378], [120.55838,
            31.78571], [120.55589, 31.7942], [120.53156, 31.78779], [120.52254, 31.80629], [120.53131, 31.82785], [
            120.50328, 31.84171], [120.49088, 31.87133], [120.46882, 31.87962], [120.4665, 31.88998], [120.37867,
            31.91374], [120.39126, 31.92861], [120.37353, 31.94644], [120.3707, 31.99082], [120.40376, 32.01622], [
            120.46567, 32.04583], [120.5038, 32.04102], [120.62839, 32.00117], [120.76158, 32.02045], [120.78204,
            32.01599], [120.80313, 31.98844], [120.86033, 31.87306], [120.91664, 31.79366], [120.9595, 31.78304], [
            121.06064, 31.78306], [121.10122, 31.76252], [121.14533, 31.75392], [121.28911, 31.61628], [121.37221,
            31.55321], [121.3435, 31.51206]
            ]
        ],
        "320200": [
            [[120.3707, 31.99082], [120.37353, 31.94644], [120.39126, 31.92861], [120.37867, 31.91374], [120.4665,
        31.88998], [120.46882, 31.87962], [120.49088, 31.87133], [120.50328, 31.84171], [120.53131, 31.82785], [
        120.52254, 31.80629], [120.53156, 31.78779], [120.55589, 31.7942], [120.55838, 31.78571], [120.57071,
        31.79378], [120.59766, 31.75503], [120.60002, 31.74463], [120.58171, 31.72763], [120.58509, 31.71443], [
        120.59995, 31.7059], [120.58645, 31.69071], [120.56821, 31.68546], [120.57023, 31.66932], [120.55858,
        31.65851], [120.59213, 31.65028], [120.5921, 31.62504], [120.6006, 31.61712], [120.57708, 31.61416], [
        120.56647, 31.60193], [120.54309, 31.60174], [120.55021, 31.57502], [120.57303, 31.57747], [120.56742,
        31.584], [120.57384, 31.58595], [120.59457, 31.57601], [120.60502, 31.54607], [120.60235, 31.51899], [
        120.59666, 31.51627], [120.59124, 31.52751], [120.5552, 31.50758], [120.54804, 31.49508], [120.55524,
        31.47787], [120.54297, 31.46993], [120.52361, 31.46873], [120.47418, 31.44656], [120.41771, 31.44768], [
        120.20961, 31.34566], [120.17372, 31.30881], [120.11023, 31.264], [119.91862, 31.17019], [119.87874,
        31.1608], [119.82785, 31.17454], [119.82345, 31.16582], [119.82937, 31.15827], [119.80986, 31.14852], [
        119.79128, 31.15661], [119.79252, 31.17146], [119.77932, 31.17878], [119.71589, 31.16958], [119.70388,
        31.1519], [119.67261, 31.168], [119.64186, 31.14843], [119.63705, 31.13453], [119.61373, 31.12918], [
        119.59978, 31.10917], [119.57651, 31.11027], [119.57133, 31.12901], [119.53259, 31.15909], [119.55357,
        31.17916], [119.55386, 31.22105], [119.52259, 31.24217], [119.53576, 31.27566], [119.52003, 31.31824], [
        119.53051, 31.33088], [119.52817, 31.36524], [119.54172, 31.39431], [119.53624, 31.40787], [119.55177,
        31.4155], [119.5525, 31.4325], [119.57719, 31.43077], [119.5896, 31.44766], [119.58833, 31.46669], [
        119.56515, 31.46434], [119.57515, 31.4808], [119.56716, 31.50508], [119.58362, 31.50454], [119.60787,
        31.55318], [119.64445, 31.57296], [119.63938, 31.60026], [119.67303, 31.60933], [119.68512, 31.60383], [
        119.69979, 31.57655], [119.70996, 31.576], [119.71482, 31.55618], [119.73326, 31.56316], [119.79218,
        31.55338], [119.83272, 31.5291], [119.8478, 31.5298], [119.8622, 31.54634], [119.93563, 31.55272], [
        119.97172, 31.53596], [119.97357, 31.51586], [119.99611, 31.4975], [119.99716, 31.50812], [120.04568,
        31.49091], [120.03761, 31.42589], [120.02107, 31.38301], [120.0237, 31.36495], [120.04176, 31.34588], [
        120.10015, 31.33533], [120.09614, 31.35249], [120.04485, 31.35881], [120.03971, 31.37813], [120.05479,
        31.43429], [120.11007, 31.46153], [120.10874, 31.48099], [120.12847, 31.50547], [120.11957, 31.50834], [
        120.12067, 31.51615], [120.10303, 31.51407], [120.0992, 31.54823], [120.06026, 31.55799], [120.05566,
        31.5777], [120.07489, 31.59536], [120.07558, 31.60711], [120.10448, 31.62877], [120.11948, 31.6309], [
        120.12853, 31.68463], [120.14327, 31.67608], [120.15253, 31.68364], [120.143, 31.68833], [120.15684,
        31.70383], [120.15447, 31.75624], [120.16902, 31.76097], [120.18394, 31.74992], [120.20116, 31.75327], [
        120.17425, 31.80103], [120.17923, 31.81334], [120.16392, 31.83029], [120.18425, 31.85613], [120.17589,
        31.87021], [120.14423, 31.85893], [120.08547, 31.85306], [120.04498, 31.82175], [120.02877, 31.83212], [
        120.01981, 31.82276], [120.00492, 31.82582], [119.99007, 31.85461], [120.00327, 31.85915], [120.01478,
        31.88179], [119.99783, 31.89435], [120.00089, 31.90557], [120.02241, 31.91969], [120.0074, 31.93593], [
        120.00878, 31.9513], [120.0224, 31.96775], [120.13481, 31.93938], [120.2366, 31.93291], [120.3707, 31.99082]]
        ],
    }
    

    每一级部门数据及对应的区域code集合

    下钻的每一级区域及对应数据是已知的,这里的数据已经存有区域code,
    所以就可以很好的和经纬度数据做一个关联

    区域数据结构如下
    这个数据一般由接口返回

    let areaList = [
        {
            "id": "2", 
            "name": "华东科", 
            "level": 2, 
            "levelTitle": "科室", 
            "count": 100,
            "areaIdList": [
                "310000", 
                "320000", 
                "330000", 
                "370000", 
                "420000", 
                "500000"
            ]
        }, 
        {
            "id": "3", 
            "name": "华南科", 
            "mapTier": 2, 
            "levelTitle": "科室", 
            "count": 100,
            "areaIdList": [
                "350000", 
                "360000", 
                "430000", 
                "450000", 
                "440000", 
                "420000", 
                "460000", 
                "520000", 
                "530000"
            ]
        }, 
        {
            "id": "4", 
            "name": "西北科", 
            "level": 2, 
            "levelTitle": "科室", 
            "count": 100,
            "areaIdList": [
                "610000", 
                "650000", 
                "500000", 
                "620000", 
            ]
        }, 
        {
            "id": "5", 
            "name": "华北科", 
            "level": 2, 
            "levelTitle": "科室", 
            "count": 100,
            "areaIdList": [
                "120000", 
                "130000", 
                "140000", 
                "370000", 
                "340000"
            ]
        }, 
        {
            "id": "7", 
            "name": "东北科", 
            "level": 2, 
            "levelTitle": "科室", 
            "count": 100,
            "areaIdList": [
                "110000", 
                "150000", 
                "230000", 
                "220000", 
                "210000"
            ]
        }
    ]
    

    这里的id和level根据业务需要来定,
    当前level是按照如下划分:
    1:国家
    2:科室
    3:部门
    4:经销商
    5:区县

    五、地图下钻

    下钻其实就是获取到下一级的区域数据,并渲染到地图

    在marker渲染的时候,添加了事件的处理,

    // 通过点击实现地图下钻
    marker.on('mousedown', (e) => {
        handleAreaClick(e);
    });
    

    就可以在事件回调中来根据当前层级来获取下一层级的数据,并完成地图的渲染

    let handleAreaClick = function () {
        const data = e.target.De.extData;
        const {
            level,
            levelTitle,
            id,
            count,
        } = data;
        getMapData(id, level);
    }
    
    
    // 默认从科室层级开始
    let getMapData = function (id, level = 2) {
     
        // 接口获取
        getUnderData({
            id,
            level: level + 1,
        }).then(res => {
            console.log(res);
            let areaList = res;
            areaList.map(item => {
                let position = [];
                item.areaList.map(areaId => {
                    let paths = areaPath[areaId];
                    paths.map(path => {
                        position = [...position, ...path];
                        addPolygon(path);
                    });
                });
                // 获取中心点坐标,并渲染区域名称及数据marker
                let center = getPointsCenter(position);
                 renderMarker({
                    ...item,
                    center,
                    color: '#ccc',
                 });
            });
        })
    }
    

    至此,下钻功能完成,源码请移步 https://github.com/wforguo/amap-drill

    展开全文
  • vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的dom节点 <template> <div id="mapChart" style=...

    **

    vue中基于echarts和基于高德地图的两种地图下钻与上浮方式

    **

    基于echarts的地图下钻与上浮(浙江省为例)

     第一步:在<template>中构建承载echarts的dom节点
     <template>
       <div id="mapChart" style="width: 100%;height: 95%;" ></div>
    </template>
    第二步:引入echarts并使用,引入浙江省json;
       import echarts from "echarts";
      Vue.use(echarts)
      //以上是使用echarts的前提条件
          import zhejiang from '../../../static/zhejiangPro/zhejiang';
    	  import hangzhou from '../../../static/zhejiangPro/hangzhou';
    	  import huzhou from '../../../static/zhejiangPro/huzhou';
    	  import jiaxing from '../../../static/zhejiangPro/jiaxing';
    	  import jinhua from '../../../static/zhejiangPro/jinhua';
    	  import lanzhou from '../../../static/zhejiangPro/lanzhou';
    	  import lishui from '../../../static/zhejiangPro/lishui';
    	  import ningbo from '../../../static/zhejiangPro/ningbo';
    	  import quzhou from '../../../static/zhejiangPro/quzhou';
    	  import shaoxing from '../../../static/zhejiangPro/shaoxing';
    	  import taizhou from '../../../static/zhejiangPro/taizhou';
    	  import wenzhou from '../../../static/zhejiangPro/wenzhou';
    	  import zhoushan from '../../../static/zhejiangPro/zhoushan';
    	    //以上是地图下钻的前提条件(这是我自己的json,大家根据自己的进行相应的更改)
    第三步:  全局定义参数mapCharts和mapCharts_option,并在methods中初始化echarts地图---自定义initMap()方法
    var mapCharts;//接收初始化的dom节点(接收创建的echarts实例)
     var mapCharts_option;//图表配置
    methods:{
    //初始化echarts地图
          initMap(cityName){
                var cityMap = {
    			          "杭州市": hangzhou,
    			          "丽水市": lishui,
    			          "兰州市": lanzhou,
    			          "台州市": taizhou,
    			          "嘉兴市": jiaxing,
    			          "宁波市": ningbo,
    			          "温州市": wenzhou,
    			          "湖州市": huzhou,
    			          "绍兴市": shaoxing,
    			          "舟山市": zhoushan,
    			          "衢州市": quzhou,
    			          "金华市": jinhua
    			        };
    			        var name = [cityName];
    			        var idx = 0;
    			        var pos = {
    			          leftPlus: 115,
    			          leftCur: 150,
    			          left: 198,
    			          top: 50
    			        };
    			
    			        var line = [
    			          [0, 0],
    			          [8, 11],
    			          [0, 22]
    			        ];
    			        // style
    			        var style = {
    			          font: '18px "Microsoft YaHei", sans-serif',
    			          textColor: '#eee',
    			          lineColor: 'rgba(147, 235, 248, .8)'
    			        };
    			        if(cityName==''||cityName=='浙江'){
    			          cityName='浙江'
    			          echarts.registerMap('浙江', zhejiang);
    			        }
    			         mapCharts=echarts.init(document.getElementById('mapChart'))
    			         mapCharts_option={
    			          graphic: [{
    			            type: 'group',
    			            left: pos.left,
    			            top: pos.top - 4,
    			            children: [{
    			              type: 'line',
    			              left: 0,
    			              top: -20,
    			              shape: {
    			                x1: 0,
    			                y1: 0,
    			                x2: 60,
    			                y2: 0
    			              },
    			              style: {
    			                stroke: style.lineColor,
    			              }
    			            }, {
    			              type: 'line',
    			              left: 0,
    			              top: 20,
    			              shape: {
    			                x1: 0,
    			                y1: 0,
    			                x2: 60,
    			                y2: 0
    			              },
    			              style: {
    			                stroke: style.lineColor,
    			              }
    			            }]
    			          },
    			            {
    			              id: '',
    			              type: 'group',
    			              left: pos.left+2,
    			              top: pos.top,
    			              children: [{
    			                type: 'polyline',
    			                left: 90,
    			                top: -12,
    			                shape: {
    			                  points: line
    			                },
    			                style: {
    			                  stroke: 'transparent',
    			                  key: name[0]
    			                },
    			                onclick: function() {
    			
    			                }
    			              }, {
    			                type: 'text',
    			                left: 0,
    			                top: 'middle',
    			                style: {
    			                  text: '浙江',
    			                  textAlign: 'center',
    			                  fill:style.textColor,
    			                  font: style.font
    			                },
    			                onclick:()=> {
    			                    mapCharts.clear()
    			                  echarts.registerMap('浙江', zhejiang);
    			                  mapCharts_option.geo.map ='浙江'
    			                  mapCharts.setOption(mapCharts_option,true);
    			                }
    			              }, {
    			                type: 'text',
    			                left: 0,
    			                top: 10,
    			                style: {
    			                  text: 'zhejiang',
    			                  textAlign: 'center',
    			                  fill: style.textColor,
    			                  font: '12px "Microsoft YaHei", sans-serif',
    			                },
    			                onclick: function() {
    			
    			                }
    			              }]
    			            }],
    			          geo: {//设置地图
    			            map:cityName,
    			            zoom: '1.2',//缩放比例
    			            scaleLimit:{
    			              min:1,
    			              max:30
    			            },
    			            roam:true,
    			            label: {
    			              normal:{
    			                show:true,
    			                color:'#fff'
    			              },
    			              emphasis: {
    			                show: false
    			              }
    			            },
    			            itemStyle: {
    			              normal: {
    			                borderColor: 'rgba(147, 235, 248, 1)',
    			                borderWidth: 1,
    			                areaColor: {
    			                  type: 'radial',
    			                  x: 0.5,
    			                  y: 0.5,
    			                  r: 0.8,
    			                  colorStops: [{
    			                    offset: 0,
    			                    color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
    			                  }, {
    			                    offset: 1,
    			                    color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
    			                  }],
    			                  globalCoord: false // 缺省为 false
    			                },
    			                shadowColor: 'rgba(128, 217, 248, 1)',
    			                shadowOffsetX: -2,
    			                shadowOffsetY: 2,
    			                shadowBlur: 10
    			              },
    			              emphasis: {
    			                areaColor: '#389BB7',
    			                borderWidth: 0
    			              }
    			            },
    			          },
    			          series: [
    			          ]
    			        }
    			        mapCharts.clear()
    			        mapCharts.setOption(mapCharts_option,true);
    			        mapCharts.resize();
    			        mapCharts.on('click',(params)=>{//地图下钻
    			            if(cityMap[params.name]){
    			              this.cityName=params.name
    			               var url=cityMap[params.name]
    			              echarts.registerMap(params.name,url)
    			              mapCharts_option.geo.map = params.name
    			              mapCharts.setOption(mapCharts_option,true);
    			            }				
    			        })
          }
          第三步:在mounted中调用initMap()
           mounted(){
    		      setTimeout(()=>{
    		        this.initMap('浙江')//在进入页面时绘制地图
    		      },200)
    		    },
    

    在这里插入图片描述
    在这里插入图片描述

    基于高德地图的地图下钻与上浮(浙江省为例)

    注释:本例中上浮下钻后地图上的省市名称与坐标是从后台获取的。
    第一步:vue中使用cdn引入高德地图,并在main.js中进行全局配置。(百度上有高德地图引入与配置方法,这里就不详细介绍);
    1) npm install vue-amap --save
    2)main.js:
    import VueAMap from ‘vue-amap’
    Vue.use(VueAMap);
    VueAMap.initAMapApiLoader({
    key: ‘********************’,//自己在高德地图平台上的key值
    plugin: [‘AMap.Autocomplete’, ‘AMap.PlaceSearch’, ‘AMap.Scale’, ‘AMap.OverView’, ‘AMap.ToolBar’, ‘AMap.MapType’, ‘AMap.PolyEditor’, ‘AMap.CircleEditor’,‘AMap.ControlBar’,‘AMap.MouseTool’,‘AMap.GeometryUtil’,‘AMap.DistrictSearch’],//需要的高德地图插件,需要什么插件添加什么插件(这里只是其中一部分)
    // 默认高德 sdk 版本为 1.4.4
    v: ‘1.4.4’,
    uiVersion:‘1.0.11’
    });
    第二步:在vue页面中创建dom节点,初始化地图。
    在这里插入代码片

     <template>
       <div id="mapGeo" style="width: 100%;height: 95%;" ></div>
    </template>
    
     <script>
    
      import noEmerIcon from "./img/emerManagement/noEmerIcon.png";
      import emerIcon from "./img/emerManagement/emerIcon.png";
      import noEmerIcon7 from "./img/emerManagement/icon7.png";
      import noEmerIcon10 from "./img/emerManagement/icon10.png";
     export default {
      data(){
      return{
          /******************地图******************/
            map:null,//高德地图实例
            sectionMarker:null,//点标记
            sectionTextMarker:null,//文字标记
            sectionMarker_data:[],//存放图标点标记
            sectionTextMarker_data:[],//存放省市名字点标记
            sectionText:null,//点标记上的内层涟漪
            sectionText2:null,//点标记上的外层涟漪
            dataPosition:'',//坐标
            adcode:'',//城市区码
            sectionIcon:'',//点标记样式
            sectionBorder:'',//点标记涟漪
            icon:{//点标记样式
              noEmerIcon:new AMap.Icon({
                image: noEmerIcon,
                imageSize: $(window).width()>=1600?new AMap.Size(15,15):new AMap.Size(10,10),
                offset: new AMap.Pixel(0, 0)
              }),
              noEmerIcon7:new AMap.Icon({
                image: noEmerIcon7,
                imageSize: $(window).width()>=1600?new AMap.Size(15,15):new AMap.Size(10,10),
                offset: new AMap.Pixel(0, 0)
              }),
              noEmerIcon10:new AMap.Icon({
                image: noEmerIcon10,
                imageSize: $(window).width()>=1600?new AMap.Size(15,15):new AMap.Size(10,10),
                offset: new AMap.Pixel(0, 0)
              }),
              emerIcon:new AMap.Icon({
                image: emerIcon,
                imageSize: $(window).width()>=1600?new AMap.Size(15,15):new AMap.Size(10,10),
                offset: new AMap.Pixel(0, 0)
              }),
            },
            border:{//点标记涟漪
              noEmerBorder:'5px solid green',
              noEmerIcon7:'5px solid orange',
              noEmerIcon10:'5px solid red',
              emerIcon:'5px solid red'
            },
          }
      },
     mounted(){
        this.initGeoMap();//加载地图,如果加载不出来可以用setTimeOut延时加载
     },
    	methods:{
    	       //*************************初始化地图*******************************************/
    	      initGeoMap(){
    	          let that=this
    	          var adcodes=[];//区码数组(用于绘制行政区域)
    	        //创建地图
    	          that.map = new AMap.Map("mapGeo", {
    	              resizeEnable: true,
    	              expandZoomRange: true,
    	              gestureHandling: "greedy",
    	              // zooms:[3,20],
    	              // zoom:8,
    	              defaultCursor: "pointer",//鼠标指针样式
    	              mapStyle: "amap://styles/f6e3818366ba5268d50ea3f2296eb3eb",
    	              // mapStyle:'amap://styles/7039f56cefc56223614dc153f8cc3e5e',
    	              // mapStyle:'amap://styles/c60b975548e3543842bdc515f68b5a5b',
    	              showLabel: true,
    	                // viewMode: "3D",
    	                // pitch:40
    	            });
    	            that.typhoonLayer = new AMap.OverlayGroup(); //覆盖物集合创建
    	            that.typhoonLayer.setMap(that.map)
    	            // //地图加载完成后执行的事件
    	            that.map.on("complete", () => {
    	              if(window.screen.width>=1600&&window.screen.height>900){
    	                that.map.setZoom(8)
    	                that.map.setCenter([119.846375,29.10946])
    	              }else{
    	                that.map.setZoom(7.5)
    	                that.map.setCenter([119.759863,29.3437])
    	              }
    	
    	                setTimeout(()=>{
    	                  $(".leftOne").css({ "opacity": "1", "top": "20px", "left": "20px"});
    	                  $(".leftTwo").css({ "opacity": "1", "top": "35%", "left": "20px"});
    	                  $(".leftThree").css({ "opacity": "1", "bottom": "20px", "left": "20px"});
    	                },500)
    	            });
    	            AMap.event.addListener(that.map, 'click', getLnglat); //点击事件
    	            function getLnglat(e) {
    	            var x = e.lnglat.getLng();
    	            var y = e.lnglat.getLat();
    	            console.log(x,y)
    	        }
    	          //行政区域
    	          AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {
    	            //创建一个实例
    	            var districtExplorer = new DistrictExplorer({
    	              eventSupport: true,
    	              map: this.map
    	            });
    	            //内部区域feature被点击
    	            districtExplorer.on("featureClick", (e, feature) => {
    	              console.log(111,feature,feature.properties)
    	                if(feature.properties.level=='city'){//只允许下钻到城市级别
    	                  adcodes = []; //清空区码数组
    	                  adcodes = [feature.properties.adcode]; //绘制地图区域
    	                  **//地图下钻时需要进行的操作**
    	                  **that.getCityName(feature.properties.adcode);
    	                  that.getScreenSectionPoint(feature.properties.adcode)**
    	                  districtExplorer.loadMultiAreaNodes(adcodes, (error, areaNodes) => {//绘制多区域
    	                    //设置定位节点,支持鼠标位置识别
    	                    //注意节点的顺序,前面的高优先级
    	                    districtExplorer.setAreaNodesForLocating(areaNodes);
    	                    //清除已有的绘制内容
    	                    districtExplorer.clearFeaturePolygons();
    	                    for (var i = 0, len = areaNodes.length; i < len; i++) {
    	                      renderAreaNode(areaNodes[i]);
    	                    }
    	                    //更新地图视野
    	                    that.map.setFitView(districtExplorer.getAllFeaturePolygons()); 
    	                  })
    	              }
    	            });
    	            //外部区域被点击
    	            districtExplorer.on("outsideClick", e => {
    	              adcodes = [];
    	              adcodes = [
    	                330000 //浙江
    	              ];
    	              that.getCityName('');
    	              that.getScreenSectionPoint('')
    	              districtExplorer.loadMultiAreaNodes(adcodes, (error, areaNodes) => {
    	                //设置定位节点,支持鼠标位置识别
    	                //注意节点的顺序,前面的高优先级
    	                districtExplorer.setAreaNodesForLocating(areaNodes);
    	                //清除已有的绘制内容
    	                districtExplorer.clearFeaturePolygons();
    	                for (var i = 0, len = areaNodes.length; i < len; i++) {
    	                  renderAreaNode(areaNodes[i]);;
    	                }
    	                //更新地图视野 下钻上浮效果
                     if(window.screen.width>=1600&&window.screen.height>900){
    	                    that.map.setZoom(8)
    	                    that.map.setCenter([119.703553,29.315624])
    	                  }else{
    	                    that.map.setZoom(7.5)
    	                   that.map.setCenter([119.759863,29.3437])
    	                  }
    	              });
    	            });
    	            //设置绘制的子区域和父区域的自身属性(包括线颜色,透明度等)
    	            function renderAreaNode(areaNode) {
    	              //绘制子级区划
    	              districtExplorer.renderSubFeatures(areaNode, function(feature, i) {
    	                return {
    	                  cursor: "default",
    	                  bubble: true,
    	                  // strokeColor: "#00a4ce", //线颜色
    	                  strokeColor: "#03d7a1",
    	                  strokeOpacity: 1, //线透明度
    	                  strokeWeight: 1.5, //线宽
    	                  // fillColor: "#09152a", //填充色
    	                  fillColor: "#072942",
    	                  fillOpacity: 0.1 //填充透明度
    	                };
    	              });
    	              //绘制父区域
    	              districtExplorer.renderParentFeature(areaNode, {
    	                cursor: "default",
    	                bubble: true,
    	                // strokeColor: "#00a4ce", //线颜色
    	                strokeColor: "#03d7a1",
    	                strokeOpacity: 1, //线透明度
    	                strokeWeight: 1.5, //线宽
    	                // fillColor: "#09152a", //填充色
    	                fillColor: "#072942",
    	                fillOpacity: 0.5 //填充透明度
    	              });
    	            }
    	            adcodes = [];
    	            adcodes=[330000]//默认展示浙江省,根据需求进行变更,也可根据下方的角色权限进行变更
    	            **//根据角色和省份来绘制行政区域和添加点标记----这边如果有做角色权限的话可以参考,没有的话可以需要
    	            if (that.roles.roleId == "SYS_ADMIN" || that.roles.roleId == "province_user") { //角色为系统管理员或省级时显示全部区域
    	              adcodes=[330000]
    	            }
    	            
    	            if (that.roles.roleId == "city_user") {//角色为市级
    	              if (that.roles.orgId == "11HZ") {
    	                adcodes = [330100];
    	              } else if (that.roles.orgId == "11NB") {
    	                adcodes = [330200];
    	              } else if (that.roles.orgId == "11WZ") {
    	                adcodes = [330300];
    	              } else if (that.roles.orgId == "11JX") {
    	                adcodes = [330400];
    	              } else if (that.roles.orgId == "11HZ") {
    	                adcodes = [330500];
    	              } else if (that.roles.orgId == "11SX") {
    	                adcodes = [330600];
    	              } else if (that.roles.orgId == "11JH") {
    	                adcodes = [330700];
    	              } else if (that.roles.orgId == "11QZ") {
    	                adcodes = [330800];
    	              } else if (that.roles.orgId == "11ZS") {
    	                adcodes = [330900];
    	              } else if (that.roles.orgId == "11TZ") {
    	                adcodes = [331000];
    	              } else if (that.roles.orgId == "11LS") {
    	                adcodes = [331100];
    	              }
    	            }
    	            if(adcodes[0]==330000||adcodes.length==0){
    	                that.getCityName('');
    	                setTimeout(()=>{
    	                that.getScreenSectionPoint('')
    	                },300)
    	            }else{
    	                that.getCityName(adcodes[0]);
    	                that.getScreenSectionPoint(adcodes[0])
    	            }
    	             //根据角色和省份来绘制行政区域和添加点标记----这边如果有做角色权限的话可以参考,没有的话可以需要**
    	            //绘制多区域
    	            districtExplorer.loadMultiAreaNodes(adcodes, (error, areaNodes) => {
    	              //设置定位节点,支持鼠标位置识别
    	              //注意节点的顺序,前面的高优先级
    	              districtExplorer.setAreaNodesForLocating(areaNodes);
    	              //清除已有的绘制内容
    	              districtExplorer.clearFeaturePolygons();
    	              for (var i = 0, len = areaNodes.length; i < len; i++) {
    	                renderAreaNode(areaNodes[i]);
    	              }
    	              //更新地图视野 下钻效果
    	              that.map.setFitView(districtExplorer.getAllFeaturePolygons());
    	            });
    	          });
    	      },
    	   //*************************初始化地图结束*******************************************/
    }
    
    </script>
    

    图片是用3d地图展示的效果,如果不需要可以隐藏 viewMode: “3D”,图片上的城市名称以及点标记的绘制将在下一篇博客展示
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 这里给使用高德地图下钻提供一个思路 先讲我的思路,高德地图api有一个地图绘制区域,你只要提供区码,就可以绘制该区域。以浙江省为例,我一开给浙江省的区码就可以绘制出浙江省的区域,接下来我要进入杭州市,当...
  • 高德地图进行省市下钻(vue)

    千次阅读 2020-02-14 13:47:07
    高德地图本身就提供了省市下钻的功能,但是官网提供的下钻功能带有一个省份树,一般我们开发的过程中,主要是要用到下钻的功能而已,所以在这我就用vue的方式,只提取出来了下钻的功能。 官网地址:...
  • 高德地图实现区域下钻

    千次阅读 2019-09-14 23:53:51
    高德地图实现区域下钻 代码开源地址:GitHub 代码开源地址:Gitee 展示图 demo地址 戳我哦 转载于:https://my.oschina.net/antsdot...
  • 高德地图实现全国(省市区,支持穿透)数据分布图,支持世界国省市区的地图显示,支持上下级,多级透,自定义数据源,自定义鼠标tip html提示信息,样式,根据高德地图修改,世界(各国:暂时定为中国),全国,省市...
  • vue中使用Echarts地理地图并结合高德地图实现一个国、省、市、区的地图下钻功能一、需求:按不同的层级展示不同的内容1.中国地图2.省级地图3.市级地图4.县和区以下的地图二、开发1. Echarts和地图容器的设置相关代码...
  • 在vue中使用高德地图的上浮下钻—最简单明了的方法(无需后台接口渲染文字marker) 第一步: 安装vue-amap: npm i vue-amap -S 第二步: 配置main.js import VueAMap from 'vue-amap' Vue.use(VueAMap); VueAMap....
  • 由于前面通过echarts和百度地图都没能实现理想效果从而只能另寻方案,最终实现方案:全国省采用echarts渲染,单个省、地级市采用高德地图为地图渲染(有人可能会疑问为什么不全部采用高德地图渲染,在上一篇中我有...
  • 超级简单实用的三级地图下钻方法 首先.老方法,创建html,引入jq,echarts.js等各种你需要的文件 然后创建一个容器,用来城防echarts的地图,这些都是入门级的,就不需要我多说了吧 接下来就是开始地图的绘制了 首先看一下...
  • vue echarts地图三级下钻,默认全国地图,例如点击湖北省进入湖北省地图,然后点击武汉进入武汉市地图,点击上一级返回,Vue写法,js写法类似
  • Vue使用echarts地图进阶1(实现单次下钻功能),由于涉及的JSON文件不多,所以结合axios,按需动态请求本地JSON文件
  • 地图下钻地图点聚合
  • 效果图 // 地图数据 (用来标记地图名称的散点图及弹窗数据) let dataset = [ { name: '阿拉善盟', wheat: 128, corn: 100, potato: 28, soybeans: 234, number: 152900,
  • 这里只有标记点的代码,初始化地图的代码看这里引入高德地图 1.标记单个点 var marker = new AMap.Marker( { position:new AMap.LngLat(114.298572,30.584355), title:'武汉' } ) map.add(marker) 2.标记多个点...
  • React AMap — 基于 React 的高德地图组件 目录 搜索区域代码 地图区域代码 自定义菜单样式 复杂而且不好口述,直接上代码,后面出视频 搜索区域代码 // ------------------外部资源 import React, { ...
  • 高德地图实现全国区域,所有省/市/区域(街道)的钻取 三级行政区钻取的实现方式有许多种,echarts,amap也能实现,重点数据问题,假如只是针对某一个固定区域(比如某个省或者市),我们可以那个区域的 geojson 下载下来自己...
  • echarts结合高德API进行地图下钻

    千次阅读 2018-11-08 01:09:34
    /——————广告开始——————/ ...整合地图的时候发现针对地级市的一些geoJSON文件太多了,全部引入后有将近20M,所以就用了下高德老爷给的组件和接口,然后弄完在这记录一下(虽然这种例子在echarts社区...
  • tomcat+高德地图加载本地切片数据效果图准备步骤 效果图 准备 tomcat8+ 切片数据(3857坐标) 步骤 将配置好的坐标的切片数据放置到指定的文件路径(例如F:/arcgisData)。 点开tomcat -> conf -> ...
  • 1. 高德地图 Key 申请 参考文章传送门 2. 引入使用AMapJS AMapJS 是 AMap高德地图API加载器。 帮助开发者快速加载高德地图相关API,在模块化应用、异步编程中使用API更加灵活便捷。 安装: npm i amap-js -S 完整...
  • 全国地图钻取(openlayers6+高德地图api行政区划) 1、用的是两种方式加载行政范围:全国、陕西、西安用的是本地数据,其他各区域用的是高德行政区划数据。 2、用高德的web服务——行政区划,需要先申请key,个人...
  • 可用于数据可视化echarts实现地图下钻(二级下钻到市)
  • 高德地图绘制区域问题

    千次阅读 2019-04-29 10:44:19
    高德地图绘制区域问题 1.绘制后坐标出现null 空值现象 最后防线是 引用的 高德版本原因 高版本有问题 http://webapi.amap.com/maps?v=1.4.6&key=6bc2211153793508e5977563bd5bbbff& ...
  • 主要实现功能:使用echarts+Amap 实现地图下钻并且带有散点图。 在项目文件中引入 import echarts from 'echarts'; 在index.html文件中引入高德地图: <script type="text/javascript" src=...
  • 接上一篇"vue中基于echarts和基于高德地图的两种地图下钻与上浮方式" import noEmerIcon from "./img/emerManagement/noEmerIcon.png"; import emerIcon from "./img/emerManagement/emerIcon.png"; import ...
  • 前段时间连续上了一个月班,加班加点完成了一个3D攻坚项目。也算是由传统web转型到webgl图形学开发中,坑不少,做了一下总结分享。法线是垂直于我们想要照亮的物体表面的向量。法线代表表面的方向因此他们为光源和...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 181
精华内容 72
关键字:

高德地图下钻