读取shp一般来说都是后台去做，但是现在不需要进行读取库的话，可以直接用前台做
代码如下：
// 初始化地图读取本地的shp文件
function readLocalData(pointData, lineData) {
// 读取本地的 .shp 文件，主要是作为一个显示的参考，当查询 节点数据的时候，需要有一些shp线数据作为参考，但是不需要变化颜色
shapefile.read('../json/shp/line_project.shp')
.then(function (result) {
// 从解析结果中提取坐标信息数组
let geomData = result.features.map(feature => {
// console.log("feature=",feature)
const coordinates_start = feature.geometry.coordinates[0];
const coordinates_end = feature.geometry.coordinates[1];
//线wgs84转换成 火星坐标系
const gcj_start_lng = wgs84togcj02(coordinates_start[0], coordinates_start[coordinates_start.length - 1])[0]
const gcj_start_lat = wgs84togcj02(coordinates_start[0], coordinates_start[coordinates_start.length - 1])[1]
const gcj_end_lng = wgs84togcj02(coordinates_end[0], coordinates_end[coordinates_end.length - 1])[0]
const gcj_end_lat = wgs84togcj02(coordinates_end[0], coordinates_end[coordinates_end.length - 1])[1]
//然后再转换成百度坐标系
const baidu_start_lng = gcj02tobd09(gcj_start_lng, gcj_start_lat)[0]
const baidu_start_lat = gcj02tobd09(gcj_start_lng, gcj_start_lat)[1]
const baidu_end_lng = gcj02tobd09(gcj_end_lng, gcj_end_lat)[0]
const baidu_end_lat = gcj02tobd09(gcj_end_lng, gcj_end_lat)[1]
// console.log("baidu_start_lng=", baidu_start_lng)
// console.log("baidu_start_lat=", baidu_start_lat)
// console.log("baidu_end_lng=", baidu_end_lng)
// console.log("baidu_end_lat=", baidu_end_lat)
const start_x = baidu_start_lng;
const start_y = baidu_start_lat;
const end_x = baidu_end_lng;
const end_y = baidu_end_lat;
return {
// coords: [[start_x, start_y], [end_x, end_y]],//百度地图的坐标系
coords: [[gcj_start_lng, gcj_start_lat], [gcj_end_lng, gcj_end_lat]],//高德地图的坐标系
};
});
// 最终的数据格式 但是放在百度地图上有偏移，等后面转换成百度地图的坐标系
// console.log("读取出来的东西=",geomData)
if (lineData != null) {
//如果是点数据，就把点数据和线数据合并
console.log("lineData不为空,则把本地读取的shp线数据赋值到地图上用来配合点数据显示")
geomData = null;
}
// 使用百度地图的扩展加载高德地图
// 在创建地图图表之前，设置高德地图的风格
echarts.registerMap('amap', {
// style: 'dark' // 设置地图风格为黑色风格
});
// 创建地图图表
var mapChart = echarts.init(document.getElementById('mapChart'));
// 设置地图配置项
var mapOption = {
amap: {
center: [120.34591, 36.238],//地图中心点
zoom: 12,//变焦
roam: true,
minZoom: 9, // 最小缩放级别
maxZoom: 18, // 最大缩放级别
// tile: { //引用了apiv2.0.3.min.js 后，在其代码里设置瓦片地图的地址，这里不需要设置
// x: 256,
// y: 256,
// url: 'F:/nginx_map/html/chengyangTiles/{z}/{x}/{y}.png'
// },
// 自定义地图加载方法
getTilesUrl: function (x, y, z) {
return 'YourLocalTilesPath/' + z + '/' + x + '/' + y + '.png';
},
// mapStyle: 'amap://styles/darkblue' // 设置地图风格为黑色风格
},
tooltip: {
trigger: 'item',
formatter: function (params, ticket, callback) {
if (params.data.value && params.data.value.length > 2) {
return params.data.value[2];
} else {
return params.data[2];
}
},
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'amap',
data: pointData,//后端请求的点shp数据
itemStyle: {
color: function (params) {
var color = params.data[3];
return color;
},
shadowBlur: 5, // 阴影的模糊程度
shadowColor: '#333' // 阴影的颜色
},
symbolSize: 7, // 调整点的直径大小
showEffectOn: 'emphasis', // 特效显示的时机为高亮状态
rippleEffect: { // 涟漪特效设置
brushType: 'stroke', // 设置涟漪特效的画笔类型为描边
period: 10, // 设置涟漪的周期，数值越小涟漪越频繁
scale: 30, // 设置涟漪的大小，数值越大涟漪越大
},
hoverAnimation: true, // 鼠标悬停时是否启用动画效果
// label: { // 标签设置
// formatter: '{b}', // 标签内容格式化
// position: 'right', // 标签位置在图形的右侧
// show: true // 是否显示标签
// },
zlevel: 1 // 系列的层级，用于控制图形的覆盖顺序
},
// {
// type: 'lines', //绘制线条 没用，保留主要是为了看json数据格式
// coordinateSystem: 'amap',
// polyline: true,
// data: [
// {
// coords: [
// [120.20372, 36.34189],
// [120.34271, 36.23179],
// ],
// value: ['featid', 'fanciyu', '目标线条', 'red'],
// },
// {
// coords: [
// [120.2035, 36.3439],
// [120.34271, 36.23179],
// ],
// value: [120.20372, 36.34189, '目标线条2', 'blue'],
// }
//
// ],
// lineStyle: {
// color: 'black',
// width: 1 // 调整线的粗细
// },
// },
],
};
// 动态添加 lines 对象，如果传入线shp数据，才进行添加
if (lineData) {
lineData.forEach(function (data) {
console.log("当lineData存在时候，进入方法输出data=", data)
if (data) {
var lines = {
type: 'lines',
coordinateSystem: 'amap',
polyline: true,
data: data.lineShpVOList,
lineStyle: {
color: data.color,
width: 3, // 调整线的粗细
// type: 'dashed' // 设置线条为虚线,这样设置可以显示出流动效果，不然太粗的线没有流动效果
},
// effect: {
// constantSpeed: 20, // 设置运动的速度为20
// show: true, // 设置显示效果为true
// trailLength: 0.1, // 设置尾迹的长度为线条长度的10%
// symbolSize: 1.5 // 设置符号的大小为1.5
// },
zlevel: 2 // 设置元素的层级为1
};
mapOption.series.push(lines);//此option是其他对象的option
}
});
} else {//如果没有传入线shp数据，就使用默认的线shp数据，作为点的搭配
var lines = {
type: 'lines',
coordinateSystem: 'amap',
polyline: true,
data: geomData,//本地数据渲染的线shp数据
lineStyle: {
color: 'rgb(0,0,0)',
width: 1, // 调整线的粗细
},
// effect: {
// constantSpeed: 20, // 设置运动的速度为20
// show: false, // 设置显示效果为true
// trailLength: 0.1, // 设置尾迹的长度为线条长度的10%
// symbolSize: 1.5 // 设置符号的大小为1.5
// },
zlevel: 10 // 设置元素的层级为1
};
mapOption.series.push(lines);//此option是其他对象的option
console.log("进入方法B")
}
// 使用加载本地瓦片地图数据的插件
// 加载 echarts-amap 插件和 Leaflet
// echarts.registerMap('amap', {});
// echarts.initAMap();
// 在这里调用 mapChart.setOption(option) 更新地图，否则不会显示
mapChart.setOption(mapOption);
//在线的地图才能用这段代码
// var bmap = mapChart.getModel().getComponent('bmap').getBMap()
// bmap.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]}));
// bmap.setMapStyle({style: 'normal'})
// drawBoundaryOnMap();//添加本地json边界到地图,先注释掉，后期需要再打开
})
// .catch(function (error) {
// showAlert('本地shp数据读取失败', 'error', 3000);
// });
}
//添加本地json边界到地图,暂时先不用
function drawBoundaryOnMap() {
fetch('../json/青岛市城阳区.json')
.then((response) => response.json())
.then((data) => {
var mapChart = echarts.getInstanceByDom(document.getElementById('mapChart')); // 找到已有对象
var datajson = data.coordinates[0][0];
console.log("查询的数据=", datajson);
var geomData = [];
for (var i = 0; i < datajson.length - 1; i++) {
var start_lng = datajson[i][0];
var start_lat = datajson[i][1];
var gcj_lng = wgs84togcj02(start_lng, start_lat)[0];
var gcj_lat = wgs84togcj02(start_lng, start_lat)[1];
var baidu_lng = gcj02tobd09(gcj_lng, gcj_lat)[0];
var baidu_lat = gcj02tobd09(gcj_lng, gcj_lat)[1];
// geomData.push([baidu_lng, baidu_lat]);//百度地图坐标
geomData.push([gcj_lng, gcj_lat]);//国测局坐标
}
var newSeries = [
{
type: 'lines',
coordinateSystem: 'amap',//百度用bmap,高德用amap
polyline: true,
data: [{
coords: geomData,
value: ['xxxx', 'xxxx', '青岛市城阳区边界', 'red'],
}],
lineStyle: {
color: 'red',
width: 1
},
},
];
var originalOption = mapChart.getOption();
var originalSeries = originalOption.series || [];
var mergedSeries = originalSeries.concat(newSeries);
var mapOption = {
series: mergedSeries,
};
mapChart.setOption(mapOption);
console.log('地图加载完成');
})
.catch((error) => {
console.error('读取JSON文件失败:', error);
});
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
