<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XXX警系统</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
</head>
<body style="background-size: cover;">
<div class="mune" style="color: #fff;">
<a href="jvascript:void(0)" id="sssj" onclick="loadMapDateTitle(this)" code=""></a> <a href="jvascript:void(0)" id="ssdsz" onclick="loadMapDateTitle(this)" code=""></a> <a href="jvascript:void(0)" id="ssfsx"></a>
</div>
<div id="back_btn" onclick="loadMapDateTitleBack(this)">返回</div>
<div>
<div id="main_map" style="float:left;width:100%;height:950px;"></div>
</div>
</div>
<script>
function getUrlQuery(name) {
var pos, str, para, parastr;
var array = []
str = window.location.href;
if (str.split("?")[1] != undefined && str.split("=")[1] != undefined) {
parastr = str.split("?")[1];
parastr=decodeURIComponent(parastr);
var arr = []
arr = parastr.split("&");
for (var i = 0; i < arr.length; i++) {
array[arr[i].split("=")[0]] = arr[i].split("=")[1];
}
}
return array[name];//project为所要获取的参数
}
//当前登录用户单位代码
var myOrgCode = getUrlQuery("orgCode");
//当前登录用户单位名称
var myOrgName = getUrlQuery("orgName");
if(myOrgCode==null){
myOrgCode="100000";
}
if(myOrgName==null){
orgName="中国";
}
//地图
var myChartMap = echarts.init(document.getElementById('main_map'));
//当前缓存对象
var mapDateObj = {};
//当前缓存散点对象
var mapPontObj = {};
//当前缓存散点对象中心点
var mapCenterObj = {};
//当前地图OrgCode
var thisOrgCode = "";
//当前地图OrgName
var thisOrgName = "";
//地图标点颜色
var pointColor = ['#27d726', '#e992d6', '#eba67c', '#10dbdb', '#eaef5e', '#0ad9dc', '#ee7990'];
//地图区域的颜色
var cityColor = ['#ccc', '#9074c3','#4487d5', '#7e9e8e', '#51a2c2'];
/**
*地图点击事件
*
**/
myChartMap.on('click', function (params) {
if(mapDateObj[thisOrgCode] && mapDateObj[thisOrgCode]!=null && mapDateObj[thisOrgCode].features){
var listFeatures = mapDateObj[thisOrgCode].features;
var loadOrgCode = "";
var loadOrgName = "";
if(listFeatures!=null && listFeatures.length > 0){
for (var i = 0; i < listFeatures.length; i++) {
var properties = listFeatures[i].properties;
if(properties.name == params.name){
loadOrgCode = properties.adcode;
loadOrgName = params.name;
}
}
}
if(loadOrgCode!=""){
loadMapDate(loadOrgCode+"",loadOrgName);
}
}
});
/**
*初始化
*
**/
jQuery(function() {
$("#sssj").html(myOrgName);
$("#sssj").attr("code",myOrgCode);
thisOrgCode = myOrgCode;
thisOrgName = myOrgName;
initMap();
});
/**
*初始化地图页面
*
**/
function initMap(){
loadMapDate(myOrgCode,myOrgName);
}
/**
*标题点击事件
*obj
*
***/
function loadMapDateTitle(obj){
loadMapDate($(obj).attr("code"),$(obj).html());
}
/**
*返回按钮点击事件
*obj
*
***/
function loadMapDateTitleBack(obj){
if(!($("#ssfsx").is(':hidden'))){
if(myOrgCode.substring(myOrgCode.length - 4,myOrgCode.length) == "0000"){
loadMapDateTitle($("#ssdsz"));
}else{
if($(obj).attr("code")!=null && $(obj).attr("code")!=""){
loadMapDateTitle($("#ssdsz"));
}else{
loadMapDateTitle($("#sssj"));
}
}
}else if(!($("#ssdsz").is(':hidden'))){
loadMapDateTitle($("#sssj"));
}
}
/**
*加载地图页面数据
*orgCode
*orgName
*
***/
function loadMapDate(orgCode,orgName){
myChartMap.showLoading();
if(mapDateObj[orgCode] && mapDateObj[orgCode]!=null && mapDateObj[orgCode]!= undefined){
registerMap(mapDateObj[orgCode],orgCode,orgName);
}else{
// $.get('你的json地址'+orgCode+'.json?uuid=123456', function (geoJson) {
$.get('https://geo.datav.aliyun.com/areas/bound/'+orgCode+'_full.json', function (geoJson) {
var listFeatures = geoJson.features;
var codeList = [];
for (var i = 0; i < listFeatures.length; i++) {
var ent = listFeatures[i].properties;
try{
if(ent.centroid){
codeList.push({name: ent.name,value:[ent.centroid[0], ent.centroid[1], Math.floor(Math.random()*100+1)],code:ent.adcode});
}else{
codeList.push({name: ent.name,value:[ent.center[0], ent.center[1], Math.floor(Math.random()*100+1)],code:ent.adcode});
}
}catch(e){
}
}
if(orgCode.substring(orgCode.length - 1,orgCode.length) != "0" || codeList.length==1){
mapPontObj[orgCode] = codeList;
mapDateObj[orgCode] = geoJson;
registerMap(geoJson,orgCode,orgName);
}else{
mapPontObj[orgCode] = codeList;
mapDateObj[orgCode] = geoJson;
registerMap(geoJson,orgCode,orgName);
}
});
}
}
function getMapCenter(orgCode){
var list = mapPontObj[orgCode];
if(list!=null && list.length>0){
for (var i = 0; i < list.length; i++) {
var tmpEnt = list[i];
mapCenterObj[tmpEnt.code] = [tmpEnt.value[0],tmpEnt.value[1]]
}
}
return mapCenterObj[orgCode];
}
/**
*重新加载地图页面
*geoJson
*orgCode
*orgName
*
***/
function registerMap(geoJson,orgCode,orgName){
myChartMap.hideLoading();
echarts.registerMap('TTMAP', geoJson);
if(orgCode==myOrgCode){
$("#back_btn").hide();
}else{
$("#back_btn").show();
}
var orgNames = [];
var orgDatas = [];
var orgDataZps = [];
thisOrgCode = orgCode;
thisOrgName = orgName;
var pcsBool = false;
if(orgCode.substring(orgCode.length - 1,orgCode.length) != "0"){
$("#ssfsx").show();
$("#ssfsx").html(orgName);
pcsBool = true;
}else if(orgCode!=myOrgCode){
$("#ssdsz").show();
$("#ssdsz").html(orgName);
$("#ssdsz").attr("code",orgCode);
$("#ssfsx").hide();
}else{
$("#ssdsz").hide();
$("#ssfsx").hide();
}
if(myOrgCode.substring(myOrgCode.length - 1,myOrgCode.length) != "0"){
$("#ssfsx").hide();
}
let optionMap = { // echarts 配置
visualMap: {
show: false,
min: 1,
max: 99,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: true,
seriesIndex: [1],
inRange: {
color: cityColor
}
},
tooltip: {
trigger: 'item',
formatter: function(t, n, i) {
if(t && t.data){
var data = t.data;
var dw = 10;
var sb = 50;
var hc = 12560;
var yj = 15;
if(data.value && data.value != undefined && data.value!=null && data.value.length>=2){
return data.name +"<br/>"
+"<em style='background-color:#27d726;'> </em> 数据1"+data.value[2]+"条<br/>"
+"<em style='background-color:#eba67c;'> </em> 数据2"+sb+"条<br/> "
+"<em style='background-color:#10dbdb;'> </em> 数据3"+hc+"条<br/> "
+"<em style='background-color:#ee7990;'> </em> 数据4"+yj+"条";
}else{
return data.name;
}
}
}
},
geo: { // 地图配置
show: true,
map: 'TTMAP',
label: {
normal: {
show: false,
},
emphasis: {
show: false
}
},
zoom: 1.2,
roam: true,
center: getMapCenter(orgCode),
itemStyle: {
normal: {
areaColor: cityColor[Math.floor(Math.random()*cityColor.length)]
}
},
emphasis: {
itemStyle: {
ar
浙江省矢量地图echart包含省级市级县级多级geojson.json数据
需积分: 33 82 浏览量
2019-10-11
16:27:59
上传
评论
收藏 861KB RAR 举报
浙江省矢量地图echart包含省级市级县级多级geojson.json数据 （102个子文件） 
home.html 9KB
331100.json 166KB 330100.json 150KB 330700.json 141KB 330300.json 132KB 330000.json 125KB 331000.json 116KB 330200.json 108KB 330400.json 103KB 330903.json 100KB 330500.json 99KB 330921.json 97KB 330521.json 95KB 330523.json 94KB 330600.json 94KB 330182.json 90KB 330800.json 90KB 331102.json 87KB 330225.json 87KB 331082.json 86KB 330900.json 84KB 330803.json 81KB 330185.json 81KB 330681.json 78KB 331127.json 78KB 331123.json 76KB 331181.json 76KB 330723.json 76KB 330683.json 75KB 330127.json 74KB 330122.json 73KB 331121.json 73KB 331122.json 73KB 330281.json 72KB 330783.json 71KB 330110.json 70KB 330603.json 70KB 330483.json 69KB 330381.json 69KB 330411.json 68KB 330324.json 68KB 330502.json 66KB 330781.json 66KB 330825.json 66KB 330902.json 65KB 330522.json 65KB 330702.json 64KB 330481.json 64KB 331024.json 64KB 330922.json 64KB 330111.json 63KB 330881.json 63KB 331126.json 60KB 330727.json 59KB 330782.json 58KB 330329.json 56KB 330784.json 56KB 331023.json 56KB 330213.json 55KB 331124.json 55KB 330503.json 54KB 330326.json 54KB 331081.json 53KB 330624.json 52KB 330328.json 51KB 331125.json 51KB 330109.json 51KB 330726.json 50KB 330424.json 50KB 330824.json 49KB 330604.json 48KB 330421.json 48KB 330402.json 47KB 331003.json 47KB 331022.json 46KB 330226.json 46KB 330327.json 45KB 330482.json 44KB 330382.json 44KB 330822.json 42KB 330304.json 41KB 330802.json 39KB 330305.json 38KB 330203.json 34KB 331002.json 32KB 330703.json 32KB 330602.json 32KB 331083.json 30KB 330212.json 29KB 330282.json 27KB 331004.json 25KB 330206.json 23KB 330106.json 23KB 330302.json 22KB 330205.json 19KB 330104.json 16KB 330211.json 15KB 330303.json 14KB 330105.json 10KB 330108.json 7KB共 102 条
- 1
- 2
资源评论
