echarts巴彦淖尔市磴口县geoJson地图tooltip自定义html效果

echarts yekong

可视化大屏 项目中会有渲染地图的需要,除了百度地图以及高德地图外,也会需要echarts或者threejs效果的地图,今天为大家整理巴彦淖尔市磴口县echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。

磴口县,内蒙古 巴彦淖尔市 下辖县,地处东经106°9′~107°10′,北纬40°9′~40°57′。位于巴彦淖尔市西南部。东连杭锦后旗,北与乌拉特后旗接壤,西靠阿拉善盟阿拉善右旗,南隔黄河与鄂尔多斯市杭锦旗相望。面积4166.6平方公里。辖4个镇、1个苏木:巴彦高勒镇、隆盛合镇、渡口镇、补隆淖镇、沙金套海苏木。

echarts巴彦淖尔市磴口县geoJson地图tooltip自定义html

echarts tooltip演示自定义,通过toolTip的formatter方法以html+css的方式实现自己想要的样式效果,鼠标移上去就可以看到我们想要的效果了,也可以通过css自定义为自己需要的样式.

echarts巴彦淖尔市磴口县geoJson地图tooltip自定义html

echarts巴彦淖尔市磴口县geoJson地图点击地图获取经纬度

echarts地图渲染后,有时候会需要点击后获取到经纬度信息,通过经纬度信息来查询一些内容,这里我们可以通过convertFromPixel来获取经纬度.

echarts巴彦淖尔市磴口县geoJson地图点击地图获取经纬度

echarts巴彦淖尔市磴口县geoJson地图自定义引导线

echarts地图渲染中,会遇到多个地名凑到一块导致名称重叠的情况,这时候我们可以通过一条线指向对应的位置并通过label来进行标注的效果.

echarts巴彦淖尔市磴口县geoJson地图自定义引导线

threejs巴彦淖尔市磴口县geoJson地图3d地图鼠标移入显示标签并高亮

通过threejs绘制的3d地图鼠标移入显示标签并高亮,如果对threejs感兴趣,可以观看threejs教程视频 WebGL/Three.js前端高薪3D可视化

threejs巴彦淖尔市磴口县geoJson地图3d地图鼠标移入显示标签并高亮

threejs巴彦淖尔市磴口县geoJson地图3d地图CSS3D标签

通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小

threejs巴彦淖尔市磴口县geoJson地图3d地图CSS3D标签

threejs巴彦淖尔市磴口县geoJson地图3d地图自定义贴图加CSS2D标签

通过threejs绘制3d地图并添加CSS2D标签和自定义贴图

threejs巴彦淖尔市磴口县geoJson地图3d地图自定义贴图加CSS2D标签

巴彦淖尔市磴口县 下辖有 补隆淖镇,哈腾套海农场,巴彦套海农场,纳林套海农场,沙漠林业实验中心农场,渡口镇,乌兰布和农场,隆盛合镇,包尔盖农场,巴彦高勒镇,沙金套海苏木乡

巴彦淖尔市磴口县下辖区域坐标

{"补隆淖镇":[107.0543964565949,40.44821414520477],"哈腾套海农场":[107.0089575594735,40.56154826044259],"巴彦套海农场":[106.79132944821063,40.5541800260774],"纳林套海农场":[106.7052286521238,40.52372395295417],"沙漠林业实验中心农场":[106.77901961787748,40.38445190827896],"渡口镇":[107.08680234109048,40.41798375618623],"乌兰布和农场":[106.94588023352419,40.42368600981837],"隆盛合镇":[106.94980156472211,40.64099858112581],"包尔盖农场":[106.54411701002437,40.57870737596771],"巴彦高勒镇":[106.87530618431943,40.27110247240778],"沙金套海苏木乡":[106.65163597699168,40.49687738091421]}

说明

1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。

2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。

3、本数据仅用于echarts threejs地图效果展示。

巴彦淖尔市磴口县echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts巴彦淖尔市磴口县geoJson地图tooltip自定义html效果