数据大屏可视化 项目中经常需要渲染echarts地图,为了不同城市快速实现,将不同城市的echarts地图效果整理出来,今天为大家整理昌吉回族自治州昌吉市echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
昌吉市(维吾尔语:سانجى شەھىرى),新疆维吾尔自治区昌吉回族自治州下辖县级市,是昌吉回族自治州州府所在地。位于天山北麓、准噶尔盆地南缘,地处亚欧大陆中心。总面积7971.03平方千米。截至2022年10月,昌吉市下辖6个街道、8个镇、2个乡。截至2021年末,昌吉市总人口40.45万人。
echarts昌吉回族自治州昌吉市geoJson地图热力图
echarts通过heatmap实现热力图效果
echarts昌吉回族自治州昌吉市geoJson地图点击弹出自定义弹窗
我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.
echarts昌吉回族自治州昌吉市geoJson地图自定义引导线
echarts地图渲染中,会遇到多个地名凑到一块导致名称重叠的情况,这时候我们可以通过一条线指向对应的位置并通过label来进行标注的效果.
threejs昌吉回族自治州昌吉市geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮,如果想系统的学习threejs的话,可以观看threejs视频教程 WebGL/Three.js前端3D可视化教程
threejs昌吉回族自治州昌吉市geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果
threejs昌吉回族自治州昌吉市geoJson地图3d地图自定义贴图加CSS2D标签
通过threejs绘制3d地图并添加CSS2D标签和自定义贴图
昌吉回族自治州昌吉市 下辖有 宁边路街道,二六工镇,中山路街道,建国路街道,庙尔沟乡,硫磺沟镇,阿什里哈萨克民族乡,新疆昌吉国家农业科技园区,昌吉市北部荒漠生态保护管理站,佃坝镇,兵团军户农场,大西渠镇,三工镇,六工镇,滨湖镇,北京南路街道,兵团共青团农场,榆树沟镇,延安北路街道,绿洲路街道
昌吉回族自治州昌吉市下辖区域坐标
{"宁边路街道":[87.31000488725408,44.04212056409691],"二六工镇":[87.14008201105082,44.0493906717585],"中山路街道":[87.27310206022153,44.04539834316685],"建国路街道":[87.24740557758457,43.99612917019749],"庙尔沟乡":[],"硫磺沟镇":[87.0754954703562,43.72635533093334],"阿什里哈萨克民族乡":[86.76459888680645,43.5249050471792],"新疆昌吉国家农业科技园区":[],"昌吉市北部荒漠生态保护管理站":[87.2952402670359,44.81412451270858],"佃坝镇":[87.36148875079519,44.170289456304],"兵团军户农场":[87.0519045284976,43.9724536780508],"大西渠镇":[87.24997898630414,44.17024245508601],"三工镇":[87.19309022159531,43.93388944415764],"六工镇":[87.42171183805289,44.10096078161615],"滨湖镇":[87.4168259335418,44.16415592708965],"北京南路街道":[87.28941732646621,43.9836596948533],"兵团共青团农场":[],"榆树沟镇":[87.09935624832166,44.20111403079817],"延安北路街道":[87.29456799533799,44.01450494411955],"绿洲路街道":[87.35598772499534,44.02401876766277]}
昌吉回族自治州昌吉市行政划分代码
[{"name":"宁边路街道","code":"652301001000"},{"name":"二六工镇","code":"652301103000"},{"name":"中山路街道","code":"652301005000"},{"name":"建国路街道","code":"652301004000"},{"name":"庙尔沟乡","code":"652301203000"},{"name":"硫磺沟镇","code":"652301100000"},{"name":"阿什里哈萨克民族乡","code":"652301202000"},{"name":"新疆昌吉国家农业科技园区","code":""},{"name":"昌吉市北部荒漠生态保护管理站","code":"652301401000"},{"name":"佃坝镇","code":"652301107000"},{"name":"兵团军户农场","code":"652301504000"},{"name":"大西渠镇","code":"652301104000"},{"name":"三工镇","code":"652301101000"},{"name":"六工镇","code":"652301105000"},{"name":"滨湖镇","code":"652301106000"},{"name":"北京南路街道","code":"652301003000"},{"name":"兵团共青团农场","code":"652301503000"},{"name":"榆树沟镇","code":"652301102000"},{"name":"延安北路街道","code":"652301002000"},{"name":"绿洲路街道","code":"652301006000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。