echarts黑河市五大连池市geoJson地图根据经纬度显示自定义html弹窗效果

geoJson2 yekong 81℃

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

五大连池市,黑龙江省 辖县级市,由 黑河市 代管,位于黑龙江省北部,黑河市南部,小兴安岭与松嫩平原的过渡地带。东邻逊克县,西与克山县,讷河市毗连,南接北安市、克东县,北与孙吴县接壤,西北与嫩江市隔河相望,市域总面积8745平方千米。2021年末,五大连池市户籍总人口313050人,同比下降0.94%。

echarts黑河市五大连池市geoJson地图根据经纬度显示自定义html弹窗

echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.

echarts黑河市五大连池市geoJson地图根据经纬度显示自定义html弹窗

echarts黑河市五大连池市geoJson地图局部颜色渐变

echarts地图渲染,通过echarts.graphic.LinearGradient线性渐变来实现地图区域颜色的渐变效果

echarts黑河市五大连池市geoJson地图局部颜色渐变

echarts黑河市五大连池市geoJson地图添加柱状图

echarts地图渲染时,为了让地图上的数据有一个对比的效果,会在地图上标注柱状图,以便于更直观的看出各个区域的数值.

echarts黑河市五大连池市geoJson地图添加柱状图

threejs黑河市五大连池市geoJson地图3d地图css2d标签

通过threejs绘制的3d地图css2d标签实例,CSS2D面向摄像机,不随场景缩放而缩放,如果对threejs感兴趣,可以观看threejs视频教程 Three.js前端3D可视化

threejs黑河市五大连池市geoJson地图3d地图css2d标签

threejs黑河市五大连池市geoJson地图3d地图自定义贴图加CSS2D标签

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

threejs黑河市五大连池市geoJson地图3d地图自定义贴图加CSS2D标签

threejs黑河市五大连池市geoJson地图3d地图CSS3D标签

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

threejs黑河市五大连池市geoJson地图3d地图CSS3D标签

黑河市五大连池市 下辖有 引龙河农场,兴安乡,小孤山林场,二龙山林场,焦得布林场,引龙河林场,格球山农场,第二良种场,莲花管理委员会,青山街道,龙门农场,龙镇,和平镇,药泉林场,新发镇,兴隆乡,双泉镇,太平乡,襄河农场,尾山农场,永丰监狱,团结乡,建设乡,华山监狱,龙镇农场,三九六林场,二龙山农场,五大连池镇,凤凰山监狱,花园劳教所,二龙山蚕种场,五大连池农场,沾河林业局,朝阳乡,畜牧场,朝阳林场,元青山林场,小兴安林场

黑河市五大连池市下辖区域坐标

{"引龙河农场":[126.54144423046156,48.8396731009142],"兴安乡":[126.67971487742267,48.87358850168049],"小孤山林场":[126.44621807614197,48.64199589560818],"二龙山林场":[126.79309902168424,48.4838081139888],"焦得布林场":[126.42700612780362,48.71720477388616],"引龙河林场":[126.5729769644779,49.05972007663864],"格球山农场":[126.08976513113566,48.85019149608981],"第二良种场":[126.23474097926706,48.51251184991398],"莲花管理委员会":[126.82502937341648,49.07468506147104],"青山街道":[126.18835010091662,48.52097472982169],"龙门农场":[126.8522890623205,48.93661488574294],"龙镇":[126.67716552260939,48.6078704721041],"和平镇":[125.96127950522667,48.45614665279356],"药泉林场":[126.13647192540677,48.73010748600241],"新发镇":[126.18842126868073,48.39487180332137],"兴隆乡":[126.43867277178376,48.39779084734285],"双泉镇":[126.27629852657329,48.52833647004285],"太平乡":[125.8690255065183,48.4408485618835],"襄河农场":[127.05886850841142,48.82292605367114],"尾山农场":[126.24899069450669,48.8980793495903],"永丰监狱":[126.2403508561618,48.58444507576675],"团结乡":[125.89968517894111,48.59504597639946],"建设乡":[126.07750015064451,48.48656553260061],"华山监狱":[126.03294281603912,48.32967122560373],"龙镇农场":[126.91640596349698,48.69004488953676],"三九六林场":[126.92689032737167,48.54036163113771],"二龙山农场":[126.60528988954756,48.47710193867468],"五大连池镇":[126.10407849069102,48.6781051651443],"凤凰山监狱":[126.45182598881041,48.41235786558451],"花园劳教所":[126.28777210725003,48.36153658930597],"二龙山蚕种场":[126.73147907067175,48.47796806331709],"五大连池农场":[126.0926861211686,48.63048549085229],"沾河林业局":[127.72811866203439,48.56317424851594],"朝阳乡":[126.40951652538388,49.03939145531421],"畜牧场":[126.68838268179766,48.96582315620576],"朝阳林场":[126.31115453708,49.02284722886392],"元青山林场":[127.29843997600665,48.87061830211033],"小兴安林场":[127.0508148590783,49.03010770878309]}

说明

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

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

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

黑河市五大连池市echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢 (0)
echarts黑河市五大连池市geoJson地图根据经纬度显示自定义html弹窗效果