展览 网站源码,中英文网站建设 大概要多久,网站文章正文可以做内链吗,做销售网站首先是turf.js(英文官网),也有中文网不过也就目录翻译了一下. 高德官网自行获得key 使用turf的isobands api实现. 数据: 需要准备geojson格式经纬度信息业务值(比如温度,高度,光照只要是number值什么数据都可以) 国内各地区geojson数据点这里获得
参考的是这位大佬写的内容 我…首先是turf.js(英文官网),也有中文网不过也就目录翻译了一下. 高德官网自行获得key 使用turf的isobands api实现. 数据: 需要准备geojson格式经纬度信息业务值(比如温度,高度,光照只要是number值什么数据都可以) 国内各地区geojson数据点这里获得
参考的是这位大佬写的内容 我这个是贵州的实例 业务值 使用的是随机值
style scoped langscss.About{height: 100%;width: 100%;position: relative;#map {position: absolute;top: 0;bottom: 0;width: 100%;}}
/styletemplatediv classAboutdiv idmap/div/div
/templatescript
import * as turf from turf/turf
import mapData from ../assets/json/guizhougexiancenter.json;
import guizhoulunkuo from ../assets/json/guizhoulunkuo.json;
import { onMounted, ref } from vue
import AmapLoader from amap/amap-jsapi-loader
export default {name: About,components: {},setup () {console.log(mapData, mapData)const calculateContourLines () {// 第一步 生成点位// 计算贵州东南西北最远坐标 var bbox turf.bbox(guizhoulunkuo); // 数组组合 01 03 21 23console.log(bbox, bbox)let coordinates [...(mapData.features[0].geometry.coordinates[0][0][0]),[bbox[0], bbox[1]],[bbox[2], bbox[1]],[bbox[2], bbox[3]],[bbox[0], bbox[3]],]// 绑定各经纬度第三个业务值let centerPositionList coordinates.map((item, index) {return {type: Feature,properties: {// 这个value就是温度;气温;光照等,除经纬度外影响划分区域的业务值value: (Math.random() * 100).toFixed(2)},geometry: {type: Point,coordinates: item //经纬度}}})// points为每个点数据let points {type: FeatureCollection,features: centerPositionList}// 第二步 网格点let interpolate_options {// 点位gridType: points,// property中取那个元素property: value,// 单位units: degrees,// 权重weight: 10};// interpolate中第一是点位数据 第二个是精细度(值越小画的点越多) 配置项// grid网格点let grid turf.interpolate(points, 0.05, interpolate_options);// value保留两位小数 经过interpolate计算后value会变得很长grid.features.map((i) (i.properties.value i.properties.value.toFixed(2)));// 第三步 等压线// 规定样式配置let isobands_options {zProperty: value,commonProperties: {fill-opacity: 0.8},breaksProperties: [{ fill: #e3e3ff },{ fill: #c6c6ff },{ fill: #a9aaff },{ fill: #8e8eff },{ fill: #7171ff },{ fill: #5554ff },{ fill: #3939ff },{ fill: #1b1cff },{ fill: #1500ff }]};// isobands没有经过编辑裁剪 是正方形图层, 是根据网格点,取值范围和样式配置返回等压线(geojson)let isobands turf.isobands(grid,[1, 10, 20, 30, 50, 70, 80, 90 ,100],isobands_options);// flatten 减少geoJson嵌套层级guizhoulunkuo turf.flatten(guizhoulunkuo);isobands turf.flatten(isobands);// console.log(isobands, isobands)// 第四步 将等压线限制在贵州范围内并生成最终等压线// 通过intersect判断是否存在交集 来判断是否在贵州范围内// features存放有交集的点位let features [];isobands.features.forEach(function (layer1) {guizhoulunkuo.features.forEach(function (layer2) {let intersection null;try {intersection turf.intersect(layer1, layer2);} catch (e) {layer1 turf.buffer(layer1, 0);intersection turf.intersect(layer1, layer2);}if (intersection ! null) {intersection.properties layer1.properties;intersection.id Math.random() * 100000;features.push(intersection);}});});// intersection为最终完整图层let intersection turf.featureCollection(features);console.log(intersection, intersection)// 最后 将数据传入地图// initMap(points, isobands, intersection)initGaoDeMap(points, isobands, intersection)}const initGaoDeMap (points, isobands, intersection) {// 可视化及交互部分AmapLoader.load({key:高德地图key, // keyversion:2.0, plugins:[AMap.DistrictSearch, AMap.GeoJSON], // 需要使用的的插件列表}).then((AMap) {const district new AMap.DistrictSearch({subdistrict:2,extensions:all,level:province});district.search(贵州,function(status, result){const bounds result.districtList[0].boundariesconst mask []for (let i0;ibounds.length;i){mask.push([bounds[i]])}const map new AMap.Map(map,{ // 设置地图容器idmask: mask, zoom:8, // 设置当前显示级别expandZoomRange:true, // 开启显示范围设置zooms: [7, 20], //最小显示级别为7最大显示级别为20center:[106.629577,26.684338], // 设置地图中心点位置zoomEnable:true, // 是否可以缩放地图resizeEnable:true,});// 添加描边for (let i0;ibounds.length; i) {const polyline new AMap.Polyline({path:bounds[i], // polyline 路径支持 lineString 和 MultiLineString})polyline.setMap(map);}loadGeoJson(AMap,map)})}).catch(e{console.log(e);})const loadGeoJson (AMap, map) {var geojson new AMap.GeoJSON({geoJSON: intersection,getPolygon: function(geojson, lnglats) {return new AMap.Polygon({path: lnglats,strokeColor: white,fillColor: geojson.properties.fill,fillOpacity: geojson.properties[fill-opacity],strokeWeight:0,});}});map.add(geojson)}}onMounted(() {calculateContourLines()})return {}}
}
/script
guizhoulunkuo.json是贵州轮廓通过我最上面获得geojson的网站获取 guizhougexiancenter.json 贵州各县中心点geojosn
// guizhougexiancenter.json
{type: FeatureCollection,features: [{type: Feature,properties: {adcode: 520000,name: 贵州省,center: [106.713478,26.578343],centroid: [106.880455,26.826368],childrenNum: 9,level: province,acroutes: [100000],parent: {adcode: 100000}},geometry: {type: MultiPolygon,coordinates: [[[[[106.943784,27.694395],[106.937265,27.706626],[106.831668,27.535288],[106.826591,28.131559],[107.191024,27.951342],[107.441872,28.550337],[107.605342,28.880088],[107.887857,28.521567],[107.722021,27.960858],[107.485723,27.765839],[107.892566,27.221552],[106.200954,28.327826],[105.698116,28.587057],[106.412476,27.803377],[109.192117,27.718745],[109.21199,27.51903],[108.848427,27.691904],[108.917882,27.238024],[108.229854,27.519386],[108.255827,27.941331],[108.405517,27.997976],[108.117317,28.26094],[108.495746,28.560487],[109.202627,28.165419],[107.977541,26.582964],[107.901337,26.896973],[108.12678,27.034657],[108.681121,26.959884],[108.423656,27.050233],[108.816459,27.173244],[109.212798,26.909684],[109.20252,26.680625],[108.440499,26.727349],[108.314637,26.669138],[109.136504,26.230636],[108.521026,25.931085],[108.912648,25.747058],[108.079613,26.381027],[107.593172,26.494803],[107.794808,26.199497],[107.517021,26.258205],[107.513508,26.702508],[107.8838,25.412239],[107.233588,26.580807],[107.478417,27.066339],[107.542757,25.826283],[107.32405,25.831803],[106.750006,25.429894],[106.447376,26.022116],[106.977733,26.448809],[106.657848,26.128637],[107.87747,25.985183],[106.715963,26.573743],[106.713397,26.58301],[106.670791,26.410464],[106.762123,26.630928],[106.633037,26.676849],[106.626323,26.646358],[106.969438,27.056793],[106.737693,27.092665],[106.599218,26.840672],[106.470278,26.551289],[105.946169,26.248323],[106.259942,26.40608],[105.745609,26.305794],[105.768656,26.056096],[105.618454,25.944248],[106.084515,25.751567],[104.897982,25.088599],[105.192778,25.431378],[104.955347,25.786404],[105.218773,25.832881],[105.650133,25.385752],[106.091563,25.166667],[105.81241,24.983338],[105.471498,25.108959],[104.846244,26.584805],[105.474235,26.210662],[104.95685,26.540478],[104.468367,25.706966],[105.284852,27.302085],[105.609254,27.143521],[106.038299,27.024923],[106.222103,27.459693],[105.768997,26.668497],[105.375322,26.769875],[104.286523,26.859099],[104.726438,27.119243]]]]]}}]
}
