<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???????<script src="../dist/threebox.js" type="text/javascript"></script> ???<!-- ???<script src="threebox.js" type="text/javascript"></script> ???--> ???<link rel="stylesheet" href="https://minedata.cn/minemapapi/v1.3/minemap.css"> ???<style> ???????*{ ???????????margin:0; ???????????padding:0; ???????} ???????body,html{ ???????????height:100%; ???????} ???????#container,#map,#deck-layer{ ???????????height:100%; ???????} ???????#deck-layer{ ???????????position:absolute; ???????????top:0; ???????????left:0; ???????} ???</style></head><body><div id="container"> ???<div id="map"></div> ???</div> <script src="https://minedata.cn/minemapapi/v1.3/minemap.js"></script><script src="jingxihua3.js"></script><script>minemap.accessToken = ‘449ba822788c46bea9f90dfba48e5269‘;minemap.solution = ‘4013‘;const map = new minemap.Map({ ???container: ‘map‘, ???style: ‘http://minedata.cn/service/solu/style/id/4013‘, ???zoom: 19, ???maxZoom: 23, ???center: [116.244421,40.073263], ???pitch: 60 ???//bearing: 140, ??// hash: true});//map.dragRotate.disable();//map.touchZoomRotate.disableRotation(); map.on("load", function() { ???map.setLayerZoomRange(‘96b6f495ae0d4bd78a1617d5afc58d9b‘,‘maxzoom‘,24) ???????????window.threebox = new Threebox(map); ???????threebox.setupDefaultLights(); ???????var source = { ???????????type: "FeatureCollection", ???????????features: [ ???????????{ ???????????????type: "Feature", ???????????????properties: { model: "new_scene","size":1 }, ???????????????geometry: { ???????????????????type: "Point", ???????????????????coordinates: [116.245263,40.066957,-35] ???????????????} ???????????} ???????????????????????] ???????}; ???????var symbols = threebox.addSymbolLayer({ ???????????id: ????????????"scale", ???????????source: ????????source, // You can also specify a URL or relative path such as "data/points.geojson", ???????????modelName: ?????{property: ‘model‘}, ???// will look for an .obj and .mtl file with this name ???????????modelDirectory: "models/", ?????????// in this directory ???????????//rotation: ??????{ generator: feature => (new THREE.Euler(Math.PI / 2, Math.PI, 0, "ZXY")) }, ???????????//scale: ?????????{ property: ‘size‘ }, ???????????scale: ?????????[1,1,1], ???????????rotation: { generator: feature => (new THREE.Euler(Math.PI / 2, 0, 90 * Math.PI / 180 + Math.PI / 2, "ZXY")) }, ???????????????????????scaleWithMapProjection: true ???????}); ???????????????????????????????????????????????????????map.addLayer({ ???????????id: "arrow", type: ‘fill‘, ???????????‘source‘: { ???????????‘type‘: ‘geojson‘, ???????????‘data‘: jxh.arrow}, ??????????????????????????paint: { ???????????????‘fill-opacity‘: 1, ???????????????‘fill-color‘: ‘#fff‘, ?????????????}, ?????????????layout: {} ?????????????????????}) ???????????????????map.addLayer({ ???????????id: "zebracrossing", type: ‘fill‘, ???????????‘source‘: { ???????????‘type‘: ‘geojson‘, ???????????‘data‘: jxh.zebracrossing}, ?????????????paint: { ???????????????‘fill-opacity‘: 1, ???????????????‘fill-color‘: ‘#ccc‘, ?????????????}, ?????????????layout: {} ?????????????????????}) ???????????????????map.addLayer( ?????????{ ???????????id: "baise_xuxian", ???????????type: ‘line‘, ???????????source:{ ???????????‘type‘: ‘geojson‘, ???????????‘data‘: jxh.baise_xuxian ???????????}, ????????????paint: { ???????????????‘line-opacity‘: 1, ???????????????‘line-color‘: ‘#dddddd‘, ???????????????‘line-width‘: 3, ???????????????"line-dasharray": [20,20] ?????????????}, ????????????layout: { ???????????????‘line-cap‘: ‘round‘, ?????????????} ?????????????????????}) ???????????????????map.addLayer( ?????????{ ???????????id: "baise_shuangshixian", ???????????type: ‘line‘, ???????????source:{ ???????????‘type‘: ‘geojson‘, ???????????‘data‘: jxh.baise_shuangshixian ???????????}, ????????????paint: { ???????????????‘line-opacity‘: 1, ???????????????‘line-color‘: ‘#dddddd‘, ???????????????‘line-width‘: 2 , ???????????????‘line-gap-width‘: 2 ?????????????}, ????????????layout: { ???????????????‘line-cap‘: ‘round‘, ?????????????} ?????????????????????}) ?????????????????????????????map.addLayer( ?????????{ ???????????id: "huangse_xuxian", ???????????type: ‘line‘, ???????????source:{ ???????????‘type‘: ‘geojson‘, ???????????‘data‘: jxh.huangse_xuxian ???????????}, ????????????paint: { ???????????????‘line-opacity‘: 1, ???????????????‘line-color‘: ‘#ebb505‘, ???????????????‘line-width‘: 3, ???????????????"line-dasharray": [20,20] ?????????????}, ????????????layout: { ???????????????‘line-cap‘: ‘round‘, ?????????????} ?????????????????????}) ????????????????????????????????????????map.addLayer( ?????????{ ???????????id: "huangse_shuangshixian", ???????????type: ‘line‘, ???????????source:{ ???????????‘type‘: ‘geojson‘, ???????????‘data‘: jxh.huangse_shuangshixian ???????????}, ????????????paint: { ???????????????‘line-opacity‘: 1, ???????????????‘line-color‘: ‘#ebb505‘, ???????????????‘line-width‘: 2 , ???????????????‘line-gap-width‘: 2 ?????????????}, ????????????layout: { ???????????????‘line-cap‘: ‘round‘, ?????????????} ?????????????????????}) ?????????????????????????????map.addLayer( ?????????{ ???????????id: "isolation_belt", type: ‘fill‘, ???????????source:{ ???????????‘type‘: ‘geojson‘, ???????????‘data‘: jxh.isolation_belt ???????????}, ?????????????paint: { ???????????????‘fill-opacity‘: 0.55, ???????????????‘fill-color‘: ‘#8deb89‘, ?????????????}, ?????????????layout: {} ?????????????????????}) ?????????????????????????????map.addLayer( ?????????{ ???????????id: "trafficisland", type: ‘extrusion‘, ????????????source:{ ???????????‘type‘: ‘geojson‘, ???????????‘data‘: jxh.trafficisland ???????????}, ?????????????paint: { ???????????????‘extrusion-opacity‘: 0.5, ???????????????‘extrusion-color‘: ‘#dcd9e6‘, ???????????????‘extrusion-height‘: 0.5, ?????????????}, ?????????????layout: {} ?????????????????????}) ???????????????????????map.addLayer( ?????????{ ???????????id: "stopline", ???????????type: ‘line‘, ???????????source:{ ???????????‘type‘: ‘geojson‘, ???????????‘data‘: jxh.stopline ???????????}, ????????????paint: { ???????????????‘line-opacity‘: 1, ???????????????‘line-color‘: ‘#dddddd‘, ???????????????‘line-width‘: 6 ??????????????}, ????????????layout: { ???????????????‘line-cap‘: ‘round‘, ?????????????} ?????????????????????}) ???}); ???????????map.on(‘mousemove‘, function (e) { ???//console.log(e.lngLat) ???});</script></body></html>精细化道路webgl可视化
原文地址：https://www.cnblogs.com/lilei2blog/p/9125181.html