-
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使用高德地图点击下钻上浮效果的实现思路
2020-10-16 05:31:27主要介绍了vue使用高德地图点击下钻 上浮效果的实现思路,本文以浙江省为例通过实例代码给大家介绍的非常详细，需要的朋友可以参考下 -
高德地图下钻功能
2021-08-06 14:53:011.下载中华人民共和国高德地图数据包 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
上面是关于正常的省市区的一个地图下钻，现成的地图或者组件可以实现，
但是如果遇到自定义的地图层级钻取就哑火了二、需求
先来看一下最终效果
如图，最终我们要实现科室、部门、经销商的三级钻取，类似我们所说的大区下钻；
方案大概有两个，
- a、每个区域数据都用svg勾勒出来，每次点击通过id及层级去切换
- b、通过高德地图尺量图去完成；
显然，a方案耗时，不够友好，下面就用高德来实现这个需求；
三、自定义区域
可以用来实现自定义科室，自定义部门以及自定义经销商
高德尺量图形
https://lbs.amap.com/api/jsapi-v2/documentation#polygon
翻阅高德api，发现
AMap.Polygon这个api，可以绘制构造多边形对象，通过PolygonOptions指定多边形样式这里有
path这个参数，就可以把自定义的每一级所对应的地区边缘经纬度坐标拿到，用尺量图渲染出来，就得到了一个自定义的区域，也就可以绘制各种想要的异形地图了
实现
参考示列：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有两个用途- 展示区域信息及相关数据
- 通过点击实现地图下钻
通过
Marker的extData属性来携带当前层级数据，便于下一级的钻取
核心代码：
/** * 自定义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关联extensions为all，才能得到对应的边界坐标，这个也最好让服务端来批量获取并存下来，
数据比较多，可以做稀疏处理，大概6倍即可，当然数据越多轮廓越精细https://restapi.amap.com/v3/config/district?keywords=310000&key=56e119b97e84efd95dbca95cd2be3126&subdistrict=2&extensions=allpolyline就是我们最终需要的经纬度边缘坐标集合了，然后整合成二位数组
将省市区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和基于高德地图的两种地图下钻与上浮方式
2019-10-08 15:40:27vue中基于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”,图片上的城市名称以及点标记的绘制将在下一篇博客展示
-
vue使用高德地图点击下钻，上浮效果
2019-10-09 15:04:57这里给使用高德地图下钻提供一个思路 先讲下我的思路，高德地图api有一个地图绘制区域，你只要提供区码，就可以绘制该区域。以浙江省为例，我一开给浙江省的区码就可以绘制出浙江省的区域，接下来我要进入杭州市，当... -
高德地图进行省市下钻（vue）
2020-02-14 13:47:07高德地图本身就提供了省市下钻的功能，但是官网提供的下钻功能带有一个省份树，一般我们开发的过程中，主要是要用到下钻的功能而已，所以在这我就用vue的方式，只提取出来了下钻的功能。 官网地址：... -
高德地图实现区域下钻
2019-09-14 23:53:51高德地图实现区域下钻 代码开源地址：GitHub 代码开源地址：Gitee 展示图 demo地址 戳我哦 转载于:https://my.oschina.net/antsdot... -
高德地图实现全国(世界，各国，省市区，支持多级钻透)数据分布图。
2021-01-08 16:39:00高德地图实现全国(省市区，支持穿透)数据分布图，支持世界国省市区的地图显示，支持上下级，多级钻透，自定义数据源，自定义鼠标tip html提示信息，样式，根据高德地图修改，世界（各国：暂时定为中国），全国，省市... -
vue中使用Echarts地理地图并结合高德地图实现一个国、省、市、区的地图下钻功能
2021-04-02 14:37:02vue中使用Echarts地理地图并结合高德地图实现一个国、省、市、区的地图下钻功能一、需求：按不同的层级展示不同的内容1.中国地图2.省级地图3.市级地图4.县和区以下的地图二、开发1. Echarts和地图容器的设置相关代码... -
在vue中使用高德地图的上浮下钻—最简单明了的方法(无需后台接口渲染文字marker)
2019-11-06 18:09:45在vue中使用高德地图的上浮下钻—最简单明了的方法(无需后台接口渲染文字marker) 第一步： 安装vue-amap： npm i vue-amap -S 第二步: 配置main.js import VueAMap from 'vue-amap' Vue.use(VueAMap); VueAMap.... -
基于高德地图为底图实现全国、省、地级市下钻
2018-08-26 21:05:09由于前面通过echarts和百度地图都没能实现理想效果从而只能另寻方案，最终实现方案：全国省采用echarts渲染，单个省、地级市采用高德地图为地图渲染（有人可能会疑问为什么不全部采用高德地图渲染，在上一篇中我有... -
超级简单实用的三级地图下钻方法
2021-03-26 14:40:20超级简单实用的三级地图下钻方法 首先.老方法,创建html,引入jq,echarts.js等各种你需要的文件 然后创建一个容器,用来城防echarts的地图,这些都是入门级的,就不需要我多说了吧 接下来就是开始地图的绘制了 首先看一下... -
echarts地图省市区三级下钻联动
2020-04-06 21:43:00vue echarts地图三级下钻，默认全国地图，例如点击湖北省进入湖北省地图，然后点击武汉进入武汉市地图，点击上一级返回，Vue写法，js写法类似 -
Vue使用echarts地图进阶1（实现单次下钻功能）
2022-04-02 16:32:21Vue使用echarts地图进阶1（实现单次下钻功能），由于涉及的JSON文件不多，所以结合axios，按需动态请求本地JSON文件 -
地图下钻、地图点聚合
2022-04-16 17:45:48地图下钻、地图点聚合 -
echarts 地图3d+地图下钻
2021-06-02 10:24:38效果图 // 地图数据 （用来标记地图名称的散点图及弹窗数据） let dataset = [ { name: '阿拉善盟', wheat: 128, corn: 100, potato: 28, soybeans: 234, number: 152900, -
vue3的高德地图怎么标记点
2022-05-20 15:14:52这里只有标记点的代码,初始化地图的代码看这里引入高德地图 1.标记单个点 var marker = new AMap.Marker( { position:new AMap.LngLat(114.298572,30.584355), title:'武汉' } ) map.add(marker) 2.标记多个点... -
react使用高德地图react-amap：Map、Markers、Circle、ContextMenu、自定义ContextMenu
2021-09-29 20:51:32React AMap — 基于 React 的高德地图组件 目录 搜索区域代码 地图区域代码 自定义菜单样式 复杂而且不好口述，直接上代码，后面出视频 搜索区域代码 // ------------------外部资源 import React, { ... -
高德地图三级行政区钻取
2021-05-13 23:07:17高德地图实现全国区域,所有省/市/区域(街道)的钻取 三级行政区钻取的实现方式有许多种,echarts,amap也能实现,重点数据问题,假如只是针对某一个固定区域(比如某个省或者市),我们可以那个区域的 geojson 下载下来自己... -
echarts结合高德API进行地图下钻
2018-11-08 01:09:34/——————广告开始——————/ ...整合地图的时候发现针对地级市的一些geoJSON文件太多了，全部引入后有将近20M，所以就用了下高德老爷给的组件和接口，然后弄完在这记录一下（虽然这种例子在echarts社区... -
tomcat+高德地图加载本地切片数据
2021-03-29 14:25:36tomcat+高德地图加载本地切片数据效果图准备步骤 效果图 准备 tomcat8+ 切片数据（3857坐标） 步骤 将配置好的坐标的切片数据放置到指定的文件路径下（例如F:/arcgisData）。 点开tomcat -> conf -> ... -
Vue + Echarts + 高德地图 实现点击下探图表
2020-09-13 23:13:521. 高德地图 Key 申请 参考文章传送门 2. 引入使用AMapJS AMapJS 是 AMap高德地图API加载器。 帮助开发者快速加载高德地图相关API，在模块化应用、异步编程中使用API更加灵活便捷。 安装： npm i amap-js -S 完整... -
全国地图钻取（openlayers6+高德地图api行政区划）
2020-10-27 13:51:49全国地图钻取（openlayers6+高德地图api行政区划） 1、用的是两种方式加载行政范围：全国、陕西、西安用的是本地数据，其他各区域用的是高德行政区划数据。 2、用高德的web服务——行政区划，需要先申请key，个人... -
全国json以及省市区json数据-高德下载
2021-04-29 10:04:50可用于数据可视化echarts实现地图下钻（二级下钻到市） -
高德地图绘制区域问题
2019-04-29 10:44:19高德地图绘制区域问题 1.绘制后坐标出现null 空值现象 最后防线是 引用的 高德版本原因 高版本有问题 http://webapi.amap.com/maps?v=1.4.6&key=6bc2211153793508e5977563bd5bbbff& ... -
使用echarts+Amap 实现地图下钻并且带有散点图
2020-08-11 23:41:38主要实现功能：使用echarts+Amap 实现地图下钻并且带有散点图。 在项目文件中引入 import echarts from 'echarts'; 在index.html文件中引入高德地图： <script type="text/javascript" src=... -
高德地图上绘制城市名字和带涟漪的点标记
2020-07-23 16:23:01接上一篇"vue中基于echarts和基于高德地图的两种地图下钻与上浮方式" import noEmerIcon from "./img/emerManagement/noEmerIcon.png"; import emerIcon from "./img/emerManagement/emerIcon.png"; import ... -
Threejs开发3D地图实践总结
2021-02-25 19:12:31前段时间连续上了一个月班，加班加点完成了一个3D攻坚项目。也算是由传统web转型到webgl图形学开发中，坑不少，做了一下总结分享。法线是垂直于我们想要照亮的物体表面的向量。法线代表表面的方向因此他们为光源和...
收藏数
181
精华内容
72