fuzhenn / 3dtiles-issues

issues for 3dtiles
14 stars 1 forks source link

Geo3DTilesLayer 和 VectorLayer 高度不贴合 #1

Open FEJackFly opened 3 years ago

FEJackFly commented 3 years ago

开发环境

macos chrome 90.0.4430.212 分辨率 1920*1080

代码示例

    <script>
      var map = new maptalks.Map("map", {
        center: [117.76718795646154, 39.012899563559685],
        zoom: 18,
        // spatialReference: {
        //   projection: "identity",
        // },
      });
      const layer = new maptalks.Geo3DTilesLayer("3dtiles", {
        maxCacheSize: 1000, //缓存的最大瓦片数
        // loadingLimitOnInteracting : 1, //地图交互过程中瓦片请求最大数量
        // loadingLimit : 0, //瓦片请求最大数量
        services: [
          {
            url: "./Production_1.json",

            maximumScreenSpaceError: 1.0,
            // urlParams : 'v=0.0',
            // ajaxOptions : { credentials : 'include' },
            // 把模型降低1200米
            heightOffset: 1000,
            ambientLight: [0.0, 0.0, 0.0],
            // maxExtent : maxExtent
            // ajaxInMainThread : true, //从主线程发起ajax请求,用于worker发起ajax报跨域错误
          },
          // 其他的3dtiles数据源
        ],
      });
      console.log(layer);
      layer.addTo(map);

      // 车道线图层
      const mapLineLayer = new maptalks.VectorLayer("mapLine", {
        zIndex: 1,
      });
      mapLineLayer.addTo(map);
      axios
        .get("./json/mapc.json")
        .then(function (response) {
          console.log(response);
          const geojson = response.data;

          //动态线
          geojson.features.forEach((item) => {
            if (item.geometry.type === "LineString") {
              let line = new maptalks.LineString(item.geometry.coordinates, {
                symbol: {
                  lineColor: "red",
                  lineWidth: 1,
                },
              });
              line.addTo(mapLineLayer);
            } else if (item.geometry.type === "MultiLineString") {
              let MultiLineString = new maptalks.MultiLineString(
                item.geometry.coordinates,
                {
                  symbol: {
                    lineColor: "red",
                    lineWidth: 1,
                  },
                }
              );
              MultiLineString.addTo(mapLineLayer);
            }
            // else if (item.geometry.type == "Polygon") {
            //   let color = "#d2dce6";

            //   let colorObj = {
            //     white: {
            //       Arrow: "blue",
            //       yard: "#d2dce6",
            //     },
            //     black: {
            //       Arrow: "blue",
            //       yard: "#3c3e46",
            //     },
            //   };
            //   const theme = localStorage.theme || "black";
            //   if (item.properties.type == "Arrow") {
            //     color = colorObj[theme].Arrow;
            //   } else {
            //     color = colorObj[theme].yard;
            //   }
            //   var polygon = new maptalks.Polygon(item.geometry.coordinates, {
            //     visible: true,
            //     editable: true,
            //     cursor: "pointer",
            //     shadowBlur: 0,
            //     shadowColor: "black",
            //     draggable: false,
            //     dragShadow: false, // display a shadow during dragging
            //     drawOnAxis: null, // force dragging stick on a axis, can be: x, y
            //     symbol: {
            //       lineWidth: 0,
            //       polygonFill: color,
            //       polygonOpacity: 1,
            //     },
            //   }).addTo(mapLineLayer);
            // } else if (item.geometry.type == "Point") {
            //   if (item.properties.text) {
            //     var point = new maptalks.Marker(item.geometry.coordinates, {
            //       visible: true,
            //       editable: true,
            //       cursor: "pointer",
            //       shadowBlur: 0,
            //       shadowColor: "black",
            //       draggable: false,
            //       dragShadow: false, // display a shadow during dragging
            //       drawOnAxis: null, // force dragging stick on a axis, can be: x, y
            //       symbol: {
            //         textFaceName: "sans-serif",
            //         textName: item.properties.text,
            //         textFill: "#5678f3",
            //         textHorizontalAlignment: "center",
            //         textSize: 12,
            //       },
            //     }).addTo(mapLineLayer);
            //   }
            // }
          });
        })
        .catch(function (error) {
          console.log(error);
        });
    </script>