echarts忻州市忻府区geoJson地图tooltip自定义html实例代码

geoJson2 yekong

大屏数据可视化 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是忻州市忻府区echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。

忻府区,隶属 山西省 忻州市。位于山西省北中部,东连定襄县,西邻静乐县,南靠阳曲县,北依原平市,总面积1980平方公里。2021年,忻府区常住人口577990人。截至2021年10月,忻府区下辖7个街道、8个镇、3个乡。

echarts忻州市忻府区geoJson地图tooltip自定义html

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

echarts忻州市忻府区geoJson地图tooltip自定义html

echarts忻州市忻府区geoJson地图自定义引导线

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

echarts忻州市忻府区geoJson地图自定义引导线

echarts忻州市忻府区geoJson地图定义颜色

echarts地图通过visualMap来事先设置好数据区间,根据区间来来显示地图的颜色,这里的visualMap数据是随机生成的,可以通过实例代码根据自己的需要配置颜色和数据区间.

echarts忻州市忻府区geoJson地图定义颜色

threejs忻州市忻府区geoJson地图3d地图自定义贴图加CSS2D标签

通过threejs绘制3d地图并添加CSS2D标签和自定义贴图,如果对threejs感兴趣,可以观看threejs教程视频 Three.js 3D可视化

threejs忻州市忻府区geoJson地图3d地图自定义贴图加CSS2D标签

threejs忻州市忻府区geoJson地图3d地图CSS3D标签

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

threejs忻州市忻府区geoJson地图3d地图CSS3D标签

threejs忻州市忻府区geoJson地图3d地图自定义贴图加CSS3D标签

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

threejs忻州市忻府区geoJson地图3d地图自定义贴图加CSS3D标签

忻州市忻府区 下辖有 长征街街道,三交镇,奇村镇,忻口镇,东楼乡,云中路街道,兰村乡,合索镇,庄磨镇,旭来街街道,西张镇,董村镇,九原街街道,豆罗镇,北义井乡,新建路街道,新建路街道,新建路街道,秀容街道,桥西街街道,长征街街道,三交镇,奇村镇,忻口镇,东楼乡,云中路街道,兰村乡,合索镇,庄磨镇,旭来街街道,西张镇,董村镇,九原街街道,豆罗镇,北义井乡,新建路街道,新建路街道,新建路街道,秀容街道,桥西街街道

忻州市忻府区下辖区域坐标

{"长征街街道":[112.73349853943638,38.43047094178738],"三交镇":[112.40529718463856,38.35481005575539],"奇村镇":[112.50621397822249,38.5670433327917],"忻口镇":[112.78374579913475,38.55595133260134],"东楼乡":[112.78365215423491,38.43935743919543],"云中路街道":[112.75555345902256,38.48759467222882],"兰村乡":[112.63467325573727,38.35665917194605],"合索镇":[112.55074202245788,38.47394575960962],"庄磨镇":[112.56664691260863,38.28603441576414],"旭来街街道":[112.6914049188357,38.512316027277],"西张镇":[112.79402463824479,38.34325485348905],"董村镇":[112.89480713398811,38.37303449237345],"九原街街道":[112.6422219850087,38.43821802541758],"豆罗镇":[112.70077821276247,38.28542101484211],"北义井乡":[112.83473053982078,38.45878335001215],"新建路街道":[112.73329369746304,38.42804236831],"秀容街道":[112.73384168307334,38.3840633195551],"桥西街街道":[112.78248446603118,38.39529497086002]}

忻州市忻府区行政划分代码

[{"name":"长征街街道","code":"140902002000"},{"name":"三交镇","code":"140902102000"},{"name":"奇村镇","code":"140902101000"},{"name":"忻口镇","code":"140902107000"},{"name":"东楼乡","code":"140902209000"},{"name":"云中路街道","code":"140902004000"},{"name":"兰村乡","code":"140902206000"},{"name":"合索镇","code":"140902108000"},{"name":"庄磨镇","code":"140902103000"},{"name":"旭来街街道","code":"140902006000"},{"name":"西张镇","code":"140902106000"},{"name":"董村镇","code":"140902105000"},{"name":"九原街街道","code":"140902005000"},{"name":"豆罗镇","code":"140902104000"},{"name":"北义井乡","code":"140902210000"},{"name":"新建路街道","code":"140902003000"},{"name":"新建路街道","code":"140902003000"},{"name":"新建路街道","code":"140902003000"},{"name":"秀容街道","code":"140902001000"},{"name":"桥西街街道","code":"140902007000"}]

说明

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

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

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

忻州市忻府区echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts忻州市忻府区geoJson地图tooltip自定义html实例代码